Skip to content

Commit

Permalink
Implemented settings.
Browse files Browse the repository at this point in the history
  • Loading branch information
@azizsafudin
azizsafudin committed Jul 2, 2018
1 parent faaa84b commit 3c99d8a
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 82 deletions.
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ export { default as widget1 } from './widget1.vue'
export { default as widget2 } from './widget2.vue'
...
export { default as widgetN } from './widgetN.vue'
// ^ ^
//all names here MUST be the same as the name in the manifest.
//this means that widgets can only have one word names.
//OR use underscores for spacing.
```

## Helpers
Expand All @@ -84,9 +88,7 @@ For now you have to use `localStorage.clear()` every time you make a change to y
Widget names have to be unique, check `widgets/index.js` to make sure yours is unique, if not one will override the other.

## To do
- Widget settings UI
- Basic structure implemented in WidgetLoader
- Allow users to set preferences for each widget in the UI
- Add a way to select background image
- More widgets
- Prayer time
- Quotes
Expand Down
22 changes: 15 additions & 7 deletions src/assets/css/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,27 @@

@import "../../../node_modules/bulma-extensions/dist/css/bulma-extensions.min.css";

@import url('https://fonts.googleapis.com/css?family=Lato|Convergence');
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/lato.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.navbar{
font-family: 'Convergence', sans-serif;
span, p, a, label {
font-family: 'Lato', sans-serif;
}

.is-transparent {
background: none;
}

html {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-image: url('/static/img/background-2.jpg');
background: url('/static/img/background-2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
87 changes: 50 additions & 37 deletions src/components/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,62 @@
<div class="modal-wrapper">
<div class="modal-container notification" v-bind:class="theme" @click.stop>
<button class="delete" @click="$emit('close')"></button>
<h3 class="is-size-5" v-bind:class="theme">&mdash;{{msg.title}}</h3>
<div class="level">
<div class="level-left">
<h3 class="level-item is-size-5" v-bind:class="theme">&mdash;{{msg.title}}</h3>
</div>
<div class="level-right">
<a class="button" v-bind:class="theme" @click="saveSettings">
<span class="icon" v-bind:class="theme">
<i class="fas fa-save"></i>
</span>
<span>Save</span>
</a>
</div>
</div>
<div class="columns">
<div class="column is-2">
<button class="button" @click="saveSettings">Save</button>
<!--<p class="control has-icons-right">-->
<!--<input class="input is-small is-rounded" type="text" v-model="search">-->
<!--<span class="icon is-small is-right">-->
<!--<i class="fas fa-search"></i>-->
<!--</span>-->
<!--</p>-->
</div>
<div class="column scrollbox">
<div class="box" v-for="(setting, key) in settings">
<span class="is-capitalized subtitle">{{key}}</span>
<div class="column scrollbox" >
<div class="message" v-for="(setting, key) in settings">
<div class="message-header">
<span class="is-capitalized is-size-5">{{key | underscore-space}}</span>
</div>
<div class="message-body">
<div class="field is-horizontal" v-for="(item, key) in setting">
<div class="field-label is-normal">
<label class="label">{{item.name}}</label>
</div>
<!--for booleans-->
<div class="control" v-if="setting[key].type === 'boolean'">
<input
v-model="setting[key].value"
:id="key"
type="checkbox"
:name="key"
class="switch is-rounded is-rtl"
:checked="item"
>
<label :for="key">{{item.name}}</label>
<div class="field-body" v-if="setting[key].type === 'boolean'">
<div class="field">
<div class="control">
<input
v-model="setting[key].value"
:id="key"
type="checkbox"
:name="key"
class="checkbox switch is-rounded is-rtl"
>
<label class="label" :for="key"></label>
</div>
</div>
</div>

<!--for strings-->
<!--<div class="field-label" v-if="setting[key].type === 'string'">-->
<!--<label>{{item.name}}</label>-->
<!--</div>-->
<!--<div class="control" v-if="setting[key].type === 'string'">-->
<!--<input-->
<!--v-model="setting[key].value"-->
<!--:id="key"-->
<!--type="text"-->
<!--:name="key"-->
<!--class="input is-rounded"-->
<!--:checked="item"-->
<!--&gt;-->
<!--</div>-->

<div class="field-body" v-if="setting[key].type === 'string'">
<div class="field">
<div class="control">
<input
v-model="setting[key].value"
type="text"
class="input is-rounded"
>
</div>
</div>
</div>
</div>
<!--Implement other types of settings here-->
</div>
</div>
</div>
Expand Down Expand Up @@ -82,7 +95,7 @@ export default {
'has-text-white': this.dark,
'has-text-black': !this.dark,
'is-dark': this.dark,
'is-light': this.dark,
'is-light': !this.dark,
}
},
}
Expand Down Expand Up @@ -123,7 +136,7 @@ export default {
}
.scrollbox {
width: 100%;
height: 400px;
height: 35rem;
overflow: auto;
}
.modal-enter {
Expand Down
64 changes: 35 additions & 29 deletions src/components/WidgetList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,36 @@
</div>
</div>
<!--<button class="delete" @click="$emit('close')"></button>-->
<table class="table is-dark is-narrow is-fullwidth">
<tbody>
<tr v-for="widget in filteredList" class="scrollbox">
<td class="is-capitalized">{{widget.name}}</td>
<td class="is-size-7">{{widget.description}}</td>
<td>
<button
class="button is-primary is-pulled-right"
@click="handleClick('add', widget.name)"
v-if="!isAdded(widget.name)"
>
<span class="icon">
<i class="fas fa-plus"></i>
</span>
</button>
<button
class="button is-danger is-pulled-right"
@click="handleClick('remove', widget.name)"
v-else
>
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="scrollbox">
<table class="table is-dark is-narrow is-fullwidth">
<tbody>
<tr v-for="widget in filteredList">
<td class="is-capitalized">{{widget.name | underscore-space}}</td>
<td class="is-size-7">{{widget.description}}</td>
<td>
<button
class="button is-primary is-pulled-right"
@click="handleClick('add', widget.name)"
v-if="!isAdded(widget.name)"
>
<span class="icon">
<i class="fas fa-plus"></i>
</span>
</button>
<button
class="button is-danger is-pulled-right"
@click="handleClick('remove', widget.name)"
v-else
>
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -136,7 +138,11 @@ export default {
.table{
border-radius: 5px;
}
.scrollbox {
width: 100%;
height: 35rem;
overflow: auto;
}
.modal-enter {
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/WidgetsLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ for (let key in components) {
widget_list.push(obj.manifest);
}

if(saved_layout === null || saved_layout.length === 0) {
if(saved_layout === null || saved_layout.length === 0 && storage.getSettings('mdash').setDefault.value) {
layout.push(components.clock.manifest.layout);
layout.push(components.date.manifest.layout);
layout.push(components.welcome.manifest.layout);
Expand Down
4 changes: 2 additions & 2 deletions src/components/partials/Navigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<nav class="navbar is-transparent is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a href="https://msociety.tech" class="navbar-item" @mouseover = "showLogo = false" @mouseleave = "showLogo = true" v-bind:class="theme">
<a href="http://msociety.tech" class="navbar-item" @mouseover = "showLogo = false" @mouseleave = "showLogo = true" v-bind:class="theme">
<p class="is-size-5">&mdash;</p>
<transition name="slide-fade">
<span v-if="!showLogo" class=" is-size-5" >mdash</span>
Expand Down Expand Up @@ -79,7 +79,7 @@ export default {
};
</script>

<style>
<style scoped>
.icon {
font-size: 0.75em;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/widgets/clock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ const manifest = {
},
layout: { // default layout
i: widget_name, // Must be the same name
x: 8,
x: 6,
y: 2,
w: 8,
w: 12,
h: 4,
},
};
Expand Down
11 changes: 10 additions & 1 deletion src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,21 @@ const default_settings = {
type: 'boolean',
},
setDefault: {
name: 'Always set default widgets when dash is empty',
name: 'Set default widgets',
value: true,
type: 'boolean',
},
};

Vue.filter('truncate', function (string, value) {
if (string && string.length > value - 3) return string.substring(0, value) + '...';
else return string;
});

Vue.filter('underscore-space', function (string) {
return string.replace(/_/g, ' ');
});

//set default mdash settings
let settings = storage.getSettings('mdash');
if(settings !== null) settings = Object.assign({}, default_settings, settings);
Expand Down
Binary file added static/fonts/lato.woff2
View file
Binary file not shown.
Binary file added static/img/background-3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/background-4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3c99d8a

Please sign in to comment.