...
 
Commits (1)
  • rockon999's avatar
    Styling cleanup. · adaad819
    rockon999 authored
    - Guides update (add settings).
    - Add showcase images.
    adaad819
<template>
<a v-if="typeof link !== 'undefined' && link !== null" class="showcase" :href="link">
<img :src="image">
<img v-if="image" class="showcase-image" :src="image">
</img>
<h2>{{ title }}</h2>
<p>{{ subtitle }}</p>
<div class="showcase-title">{{ title }}</div>
<div class="showcase-description">{{ subtitle }}</div>
</a>
<div v-else class="showcase">
<img :src="image">
<img v-if="image" class="showcase-image" :src="image">
</img>
<h2>{{ title }}</h2>
<p>{{ subtitle }}</p>
<div class="showcase-title">{{ title }}</div>
<div class="showcase-description">{{ subtitle }}</div>
</div>
</template>
<script>
......@@ -26,23 +26,34 @@ export default {
<style lang="scss">
.showcase {
margin: 2rem 0;
text-decoration: none !important;
text-align: center;
text-align: left;
color: black;
min-width: 14rem;
max-width: 25%;
max-height: 23rem;
overflow: hidden;
img {
.showcase-image {
margin: 0.5rem;
object-fit: cover;
height: 30vh;
max-height: 30vh;
overflow: hidden;
width: 100%;
}
p {
.showcase-description {
font-size: 1rem;
font-weight: 400;
margin: 0.25rem 0.5rem 0.5rem;
margin: 0.25rem 0.5rem 0.5rem 0;
text-overflow: ellipsis;
}
h2 {
.showcase-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0.5rem 0.5rem 0.25rem;
margin: 0.5rem 0.5rem 0.25rem 0;
border: none;
}
}
......
......@@ -21,11 +21,13 @@ export default {
</script>
<style lang="scss">
$height: 30vh;
.showcase-box {
padding: 2rem 0;
overflow: hidden;
.showcase-box-title-container {
border-bottom: 1px solid #eaecef;
display: flex;
flex-direction: row;
flex-wrap: wrap;
......@@ -33,7 +35,7 @@ export default {
}
.showcase-box-title {
font-size: 1.65rem;
font-size: 3rem;
padding-bottom: 0.1rem;
margin: 0.1rem 0 0.2rem;
border: none !important;
......@@ -43,6 +45,7 @@ export default {
padding: 0;
margin: 0.1rem 0.5rem 0.2rem;
border: none !important;
font-style: italic;
}
.showcase-box-inner {
......@@ -50,12 +53,10 @@ export default {
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
margin: 0 -3rem;
& > *:last-child {
margin-right: 0 !important;
}
& > *:first-child {
margin-left: 0 !important;
& > * {
margin: 1rem 3rem;
}
}
}
......
......@@ -6,6 +6,8 @@ title: About
## What is GJS?
GJS (sometimes called GNOME JavaScript) is a programming environment comparable to Node.js. It provides bindings to the [GNOME](https://gnome.org) ecosystem, allowing users to build power, native applications.
## Cool! What is under the hood?
##
\ No newline at end of file
GJS is built on the [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) JavaScript engine. It utilizes [GObject Introspection]() to provide access to the GNOME APIs using EcmaScript 6-level JavaScript.
\ No newline at end of file
......@@ -8,18 +8,20 @@ layout: IndexPage
Welcome to GJS!
<ShowCaseBox title="GJS" subtitle="Tutorials for GJS">
<ShowCase link="gjs/style-guide.html" title="Style Guide" subtitle="The official style guide for GJS and GNOME projects written in GJS." image="" />
<ShowCase link="gjs/transition.html" title="Transition" subtitle="How does GJS compare to other JavaScript environments?" image="" />
<ShowCase link="gjs/legacy-class-syntax.html" title="Legacy Classes" subtitle="How do I use the deprecated Lang.Class objects?" image="" />
<ShowCase link="gjs/features-across-versions.html" title="Feature Compatibility" subtitle="Which features work in my version of GJS?" image="" />
<ShowCaseBox title="GTK+" subtitle="Looking for help building an application?">
<ShowCase link="gtk/gtk-tutorial/" title="Getting Started with GTK+" subtitle="New to GTK+ or using it with GJS? This is for you!" />
<ShowCase link="gtk/application-packaging.html" title="GTK+ Application Packaging" subtitle="How do I package my GTK+ application with GJS?" />
</ShowCaseBox>
<ShowCaseBox title="GTK" subtitle="Gtk Tutorials">
<ShowCase link="gtk/gtk-tutorial/" title="Getting Started in GTK+ with GJS" subtitle="New to GTK+ or using it with GJS? This is for you!" image="" />
<ShowCase link="gtk/application-packaging.html" title="GTK+ Application Packaging" subtitle="How do I package my GTK+ application with GJS?" image="" />
<ShowCaseBox title="GJS" subtitle="What sets GJS apart from other JavaScript environments?">
<ShowCase link="gjs/style-guide.html" title="Style Guide" subtitle="The official style guide for GJS and GNOME projects written in GJS." />
<ShowCase link="gjs/transition.html" title="Transition" subtitle="How does GJS compare to other JavaScript environments?" />
<ShowCase link="gjs/legacy-class-syntax.html" title="Legacy Classes" subtitle="How do I use the deprecated Lang.Class objects?" />
<ShowCase link="gjs/features-across-versions.html" title="Feature Compatibility" subtitle="Which features work in my version of GJS?" />
</ShowCaseBox>
<ShowCaseBox title="Gio" subtitle="Gio Tutorials">
<ShowCase link="gio/file-operations.html" title="Files in GJS" subtitle="Basic File Operations in GJS" image="" />
<ShowCaseBox title="Gio" subtitle="Looking for help with files or application settings?">
<ShowCase link="gio/file-operations.html" title="Files in GJS" subtitle="Basic File Operations in GJS" />
</ShowCaseBox>
\ No newline at end of file
......@@ -4,6 +4,75 @@ title: Application Settings
# Application Settings
WIP
We just learned how to save application data to files. While this is appropriate for storing data relevant to the user's activities and any user-generated content, application-level settings should utilize the built-in GSettings APIs.
We just learned how to save application data to configuration files. This is appropriate for storing data relevant to the user's activities and any user-generated content. For application-level settings, however, you should utilize the built-in GSettings APIs.
\ No newline at end of file
# Defining a Schema
Before we can store any settings we must inform GSettings what we want to store. We do this with a *schema file*.
In your template or GNOME Builder Project you should find a file named `[your.app.id].gschema.xml`.
Its contents should look roughly like this:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<schemalist gettext-domain="[App Name]">
<schema id="[your.app.id]" path="[your/app/path]">
</schema>
</schemalist>
```
# Adding a setting
To add a setting you must add a `<key>` to `<schema>`.
A typical key looks like this:
```xml
<key name="is-running" type="b">
<default>false</default>
<summary>Running state</summary>
<description>Describes if it is running</description>
</key>
```
`name=` sets the name of the setting. This is used to retrieve and modify the setting's value.
`type=` sets the type of the setting. A complete list of types is available [here]().
`<default>` lists the default value of the setting.
`<summary>` briefly describes the purpose of the setting.
`<description>` provides a longer, more detailed explanation of the setting.
Once added, your settings file should look like this:
```xml
<<?xml version="1.0" encoding="UTF-8"?>
<schemalist gettext-domain="[app-name]">
<schema id="[your.app.id]" path="[your/app/path]">
<key name="is-running" type="b">
<default>false</default>
<summary>Running state</summary>
<description>Describes if it is running</description>
</key>
</schema>
</schemalist>
```
# Accessing settings
To access settings in your app you need a `Gio.Settings` instance:
```js
const settings = new Gio.Settings({ settings_id: '[your.app.id]' });
```
Now you can retrieve settings with `settings.get_{type}(name)`.
For example:
`const isRunning = settings.get_boolean('is-running');`
You can find a complete list of getters [here](http://devdocs.baznga.org/gio20~2.50p/gio.settings#method-get).
# Setting, a setting.
Setting your new setting's value is quite similar to getting it. Simply call `settings.set_{type}(name, value)`.
\ No newline at end of file
---
title: GJS Showcase
date: 2018-07-25 16:10:11
layout: IndexPage
---
Many amazing apps have been built in GJS. Check them out below!
# GJS Showcase
<ShowCase link="https://wiki.gnome.org/Apps/Documents" title="GNOME Documents" subtitle="A document manager application designed to work with GNOME 3." image="" />
Many amazing apps have been built in GJS. Check them out below!
<ShowCase link="https://wiki.gnome.org/Apps/Weather" title="GNOME Weather" subtitle="An application that allows you to monitor the current weather conditions for your city, or anywhere in the world, and to access updated forecasts provided by various internet services." image="" />
<ShowCaseBox>
<ShowCase link="https://wiki.gnome.org/Apps/Maps" title="GNOME Maps" subtitle="Maps gives you quick access to maps all across the world." image="" />
<ShowCase link="https://wiki.gnome.org/Apps/Documents" title="GNOME Documents" subtitle="A document manager application designed to work with GNOME 3." image="/showcase/gnome-documents.png" />
<ShowCase link="https://wiki.gnome.org/Apps/SoundRecorder" title="GNOME Sound Recorder" subtitle="A simple and modern sound recorder." image="" />
<!--
<ShowCase link="https://wiki.gnome.org/Apps/Weather" title="GNOME Weather" subtitle="An application that allows you to monitor the current weather conditions for your city, or anywhere in the world, and to access updated forecasts provided by various internet services." image="/showcase/gnome-weather.png" />
<ShowCase link="https://wiki.gnome.org/Apps/Maps" title="GNOME Maps" subtitle="Maps gives you quick access to maps all across the world." image="/showcase/gnome-maps.jpg" />
-->
\ No newline at end of file
<ShowCase link="https://wiki.gnome.org/Apps/SoundRecorder" title="GNOME Sound Recorder" subtitle="A simple and modern sound recorder." image="/showcase/gnome-sound-recorder.png" />
</ShowCaseBox>
\ No newline at end of file