From 679049d2b13e25d40fffa4853e0810a907508520 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Sat, 24 Nov 2018 18:39:43 +0000 Subject: [PATCH] [WIP] User can select theme --- domain/meta/endpoint.go | 5 +- .../components/customize/general-settings.js | 7 +++ gui/app/components/ui/theme-picker.js | 46 +++++++++++++++++++ gui/app/components/user-profile.js | 9 +++- gui/app/models/organization.js | 1 + gui/app/models/user.js | 1 + gui/app/services/app-meta.js | 18 ++++++-- gui/app/styles/core/view/common.scss | 34 ++++++++++++++ .../components/customize/general-settings.hbs | 8 ++++ .../templates/components/ui/theme-picker.hbs | 14 ++++++ gui/app/templates/components/user-profile.hbs | 6 ++- 11 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 gui/app/components/ui/theme-picker.js create mode 100644 gui/app/templates/components/ui/theme-picker.hbs diff --git a/domain/meta/endpoint.go b/domain/meta/endpoint.go index 759ad8e5..ea1c4639 100644 --- a/domain/meta/endpoint.go +++ b/domain/meta/endpoint.go @@ -282,13 +282,12 @@ type searchStatus struct { // Themes returns list of installed UI themes. func (h *Handler) Themes(w http.ResponseWriter, r *http.Request) { type theme struct { - Name string `json:"names"` + Name string `json:"name"` Primary string `json:"primary"` } th := []theme{} - - th = append(th, theme{Name: "Default", Primary: "#280A42"}) + th = append(th, theme{Name: "", Primary: "#280A42"}) th = append(th, theme{Name: "Blue", Primary: "#176091"}) th = append(th, theme{Name: "Deep Orange", Primary: "#BF360C"}) th = append(th, theme{Name: "Teal", Primary: "#00695C"}) diff --git a/gui/app/components/customize/general-settings.js b/gui/app/components/customize/general-settings.js index eebcbd56..a5fd2d71 100644 --- a/gui/app/components/customize/general-settings.js +++ b/gui/app/components/customize/general-settings.js @@ -13,10 +13,12 @@ import $ from 'jquery'; import { empty, and } from '@ember/object/computed'; import { isEmpty } from '@ember/utils'; import { set } from '@ember/object'; +import { inject as service } from '@ember/service'; import Notifier from '../../mixins/notifier'; import Component from '@ember/component'; export default Component.extend(Notifier, { + appMeta: service(), maxTags: 3, titleEmpty: empty('model.general.title'), messageEmpty: empty('model.general.message'), @@ -70,6 +72,11 @@ export default Component.extend(Notifier, { set(this, 'messageError', false); set(this, 'conversionEndpointError', false); }); + }, + + onThemeChange(theme) { + this.get('appMeta').setTheme(theme); + this.set('model.general.theme', theme); } } }); diff --git a/gui/app/components/ui/theme-picker.js b/gui/app/components/ui/theme-picker.js new file mode 100644 index 00000000..96a2236b --- /dev/null +++ b/gui/app/components/ui/theme-picker.js @@ -0,0 +1,46 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +import { inject as service } from '@ember/service'; +import { set } from '@ember/object'; +import Component from '@ember/component'; + +export default Component.extend({ + appMeta: service(), + value: '', + onChange: null, + + didReceiveAttrs() { + this._super(...arguments); + + let defTheme = this.get('appMeta.theme'); + this.get('appMeta').getThemes().then((themes) => { + _.each(themes, (theme) => { + theme.selected = theme.name === defTheme ? true: false; + if (theme.name === '') theme.name = 'Default'; + }); + + this.set('themes', themes); + }); + }, + + actions: { + onSelect(selectedTheme) { + let themes = this.get('themes'); + if (this.get('onChange') !== null) { + _.each(themes, (theme) => { + set(theme, 'selected', theme.name === selectedTheme ? true: false); + }); + this.get('onChange')(selectedTheme); + } + } + } +}); diff --git a/gui/app/components/user-profile.js b/gui/app/components/user-profile.js index 6c004ca5..597c2b5b 100644 --- a/gui/app/components/user-profile.js +++ b/gui/app/components/user-profile.js @@ -11,12 +11,14 @@ import $ from 'jquery'; import { empty } from '@ember/object/computed'; -import Component from '@ember/component'; import { computed, set } from '@ember/object'; import { isPresent, isEqual, isEmpty } from '@ember/utils'; +import { inject as service } from '@ember/service'; import AuthProvider from '../mixins/auth'; +import Component from '@ember/component'; export default Component.extend(AuthProvider, { + appMeta: service(), hasFirstnameError: empty('model.firstname'), hasLastnameError: empty('model.lastname'), hasEmailError: computed('model.email', function() { @@ -83,6 +85,11 @@ export default Component.extend(AuthProvider, { set(this, 'password.password', ''); set(this, 'password.confirmation', ''); }); + }, + + onThemeChange(theme) { + this.get('appMeta').setTheme(theme); + this.set('model.theme', theme); } } }); diff --git a/gui/app/models/organization.js b/gui/app/models/organization.js index 08433ebe..289ee030 100644 --- a/gui/app/models/organization.js +++ b/gui/app/models/organization.js @@ -19,6 +19,7 @@ export default Model.extend({ conversionEndpoint: attr('string'), allowAnonymousAccess: attr('boolean', { defaultValue: false }), maxTags: attr('number', {defaultValue: 3}), + theme: attr('string'), created: attr(), revised: attr() }); diff --git a/gui/app/models/user.js b/gui/app/models/user.js index ff56d7e9..548a0aed 100644 --- a/gui/app/models/user.js +++ b/gui/app/models/user.js @@ -27,6 +27,7 @@ export default Model.extend({ accounts: attr(), groups: attr(), lastVersion: attr('string'), + theme: attr('string'), created: attr(), revised: attr(), diff --git a/gui/app/services/app-meta.js b/gui/app/services/app-meta.js index a60b47f3..73241ba2 100644 --- a/gui/app/services/app-meta.js +++ b/gui/app/services/app-meta.js @@ -120,10 +120,22 @@ export default Service.extend({ }, setTheme(theme) { - theme = theme.trim(); - if (theme.length === 0) return; + $('#theme-link').remove(); + + theme = theme.toLowerCase().replace(' ', '-').replace('default', '').trim(); + if (theme.length === 0) { + return; + } let file = this.get('assetMap').resolve(`assets/theme-${theme}.css`); - $('head').append(``); + $('head').append(``); + }, + + getThemes() { + return this.get('ajax').request(`public/meta/themes`, { + method: 'GET' + }).then((response) => { + return response; + }); } }); diff --git a/gui/app/styles/core/view/common.scss b/gui/app/styles/core/view/common.scss index 661fd4b1..886acb02 100644 --- a/gui/app/styles/core/view/common.scss +++ b/gui/app/styles/core/view/common.scss @@ -32,3 +32,37 @@ color: $color-gray; margin: 5rem 0; } + + +.theme-picker { + display : block; + margin-bottom: 10px; + + > .theme { + height: 100px; + width: 250px; + text-align: center; + color: $color-white; + font-weight: 600; + font-size: 1.2rem; + display: inline-block; + position: relative; + margin: 0 20px 20px 0; + padding: 10px 0 0 0; + cursor: default; + border: 7px solid $color-gray-light; + @include border-radius(3px); + @include ease-in(); + + &:hover { + border: 7px solid $color-gray; + } + + .tick { + text-align: center; + color: $color-white; + font-weight: 400; + font-size: 2rem; + } + } +} diff --git a/gui/app/templates/components/customize/general-settings.hbs b/gui/app/templates/components/customize/general-settings.hbs index 960ca75a..852c9281 100644 --- a/gui/app/templates/components/customize/general-settings.hbs +++ b/gui/app/templates/components/customize/general-settings.hbs @@ -61,6 +61,14 @@ How many tags can be assigned to a document (between 3 and 10 tags) +
+ +
+ {{ui/theme-picker onChange=(action 'onThemeChange')}} + Users can set their own theme under Profile +
+
+
Save
\ No newline at end of file diff --git a/gui/app/templates/components/ui/theme-picker.hbs b/gui/app/templates/components/ui/theme-picker.hbs new file mode 100644 index 00000000..bf693d3c --- /dev/null +++ b/gui/app/templates/components/ui/theme-picker.hbs @@ -0,0 +1,14 @@ +
+ {{#each themes as |theme|}} +
+ {{theme.name}} +
+ {{#if theme.selected}} + ✓ + {{else}} +   + {{/if}} +
+
+ {{/each}} +
\ No newline at end of file diff --git a/gui/app/templates/components/user-profile.hbs b/gui/app/templates/components/user-profile.hbs index 3545a444..e4d85ea1 100644 --- a/gui/app/templates/components/user-profile.hbs +++ b/gui/app/templates/components/user-profile.hbs @@ -20,6 +20,10 @@ {{input id="confirmPassword" type="password" value=password.confirmation class=(if hasConfirmPasswordError 'form-control is-invalid' 'form-control')}} +
+ + {{ui/theme-picker onChange=(action 'onThemeChange')}} +
{{/if}} -
Save
+
Save