From edb256e754d979ca1ae23b7cc775b94e9cce8c47 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Fri, 14 Dec 2018 11:52:31 +0000 Subject: [PATCH] Bring new UX to each admin view --- gui/app/components/customize/smtp-settings.js | 2 +- gui/app/components/customize/space-admin.js | 7 +- gui/app/constants/constants.js | 4 + gui/app/pods/auth/share/route.js | 6 - gui/app/pods/customize/general/template.hbs | 2 +- gui/app/pods/customize/product/template.hbs | 4 +- gui/app/pods/customize/template.hbs | 2 +- gui/app/styles/core/icon.scss | 13 + gui/app/styles/core/layout/spacing.scss | 2 +- gui/app/styles/core/news.scss | 22 +- gui/app/styles/core/view/customize.scss | 71 +++- .../core/widget/widget-list-picker.scss | 18 +- .../components/customize/auth-settings.hbs | 2 +- .../components/customize/backup-restore.hbs | 8 +- .../components/customize/general-settings.hbs | 21 +- .../customize/integration-settings.hbs | 2 +- .../components/customize/search-index.hbs | 2 +- .../components/customize/smtp-settings.hbs | 23 +- .../components/customize/space-admin.hbs | 103 ++--- .../components/customize/user-groups.hbs | 357 +++++++++--------- gui/app/templates/components/ui/ui-modal.hbs | 1 - gui/public/assets/font/dmzui.eot | Bin 15180 -> 16480 bytes gui/public/assets/font/dmzui.svg | 9 + gui/public/assets/font/dmzui.ttf | Bin 15024 -> 16324 bytes gui/public/assets/font/dmzui.woff | Bin 8076 -> 8612 bytes gui/public/assets/font/dmzui.woff2 | Bin 6600 -> 7076 bytes 26 files changed, 357 insertions(+), 324 deletions(-) diff --git a/gui/app/components/customize/smtp-settings.js b/gui/app/components/customize/smtp-settings.js index 37ca6421..080ff383 100644 --- a/gui/app/components/customize/smtp-settings.js +++ b/gui/app/components/customize/smtp-settings.js @@ -24,7 +24,7 @@ export default Component.extend(Notifier, { testSMTP: null, actions: { - saveSMTP(e) { + saveSMTP() { if (this.get('SMTPHostEmptyError')) { $("#smtp-host").focus(); return; diff --git a/gui/app/components/customize/space-admin.js b/gui/app/components/customize/space-admin.js index 07ba879c..8e5d87f9 100644 --- a/gui/app/components/customize/space-admin.js +++ b/gui/app/components/customize/space-admin.js @@ -33,13 +33,11 @@ export default Component.extend(Notifier, Modals, { init() { this._super(...arguments); - this.loadData(); }, didReceiveAttrs() { this._super(...arguments); - this.deleteSpace = { id: '', name: '' @@ -55,6 +53,7 @@ export default Component.extend(Notifier, Modals, { actions: { onShow(id) { this.set('deleteSpace.id', id); + this.modalOpen("#space-delete-modal", {"show": true}, '#delete-space-name'); }, onDelete() { @@ -91,13 +90,13 @@ export default Component.extend(Notifier, Modals, { this.get('documentSvc').export(spec).then((htmlExport) => { this.get('browserSvc').downloadFile(htmlExport, 'documize.html'); - this.notifySuccess('Exported'); + this.notifySuccess('Export completed'); }); }, onOwner(spaceId) { this.get('spaceSvc').grantOwnerPermission(spaceId).then(() => { /* jshint ignore:line */ - this.notifySuccess('Saved'); + this.notifySuccess('Added as owner'); }); } } diff --git a/gui/app/constants/constants.js b/gui/app/constants/constants.js index 42ad62dd..ff9a8a22 100644 --- a/gui/app/constants/constants.js +++ b/gui/app/constants/constants.js @@ -195,6 +195,7 @@ let constants = EmberObject.extend({ }, Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects + AddUser: 'dicon-add-27', All: 'dicon-menu-8', Announce: 'dicon-notification', ArrowUp: 'dicon-arrow-up-2', @@ -225,6 +226,7 @@ let constants = EmberObject.extend({ Person: 'dicon-single-01', People: 'dicon-multiple-19', Remove: 'dicon-i-remove', + RemoveUser: 'dicon-delete-28', Search: 'dicon-magnifier', Send: 'dicon-send', Settings: 'dicon-settings-gear', @@ -248,7 +250,9 @@ let constants = EmberObject.extend({ Delete: 'Delete', Export: 'Export', Insert: 'Insert', + Join : 'Join', Next: 'Next', + Remove: 'Remove', Reset: 'Reset', Restore: 'Restore', Save: 'Save', diff --git a/gui/app/pods/auth/share/route.js b/gui/app/pods/auth/share/route.js index d7c914c8..917cd004 100644 --- a/gui/app/pods/auth/share/route.js +++ b/gui/app/pods/auth/share/route.js @@ -9,7 +9,6 @@ // // https://documize.com -import $ from 'jquery'; import { inject as service } from '@ember/service'; import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; import Route from '@ember/routing/route'; @@ -37,10 +36,5 @@ export default Route.extend(AuthenticatedRouteMixin, { activate() { this.get('browser').setTitle('Share Space'); - // $('body').addClass('background-color-gray-200'); - }, - - deactivate() { - // $('body').removeClass('background-color-gray-200'); } }); diff --git a/gui/app/pods/customize/general/template.hbs b/gui/app/pods/customize/general/template.hbs index 09f7ff5a..9fce628b 100644 --- a/gui/app/pods/customize/general/template.hbs +++ b/gui/app/pods/customize/general/template.hbs @@ -1,5 +1,5 @@ {{layout/logo-heading - title="Customize" + title="General" desc="Options to help you customize Documize" icon=constants.Icon.Settings}} diff --git a/gui/app/pods/customize/product/template.hbs b/gui/app/pods/customize/product/template.hbs index ef10f476..0340348a 100644 --- a/gui/app/pods/customize/product/template.hbs +++ b/gui/app/pods/customize/product/template.hbs @@ -1,6 +1,6 @@ {{layout/logo-heading - title=(concat appMeta.edition " Edition " appMeta.version) - desc="Enterprise Edition provides premium features and comprehensive product support" + title="Documize Changelog" + desc=(concat "You are running "appMeta.edition " Edition " appMeta.version) icon=constants.Icon.Announce}} {{customize/change-log}} diff --git a/gui/app/pods/customize/template.hbs b/gui/app/pods/customize/template.hbs index 22aec9e3..46e65624 100644 --- a/gui/app/pods/customize/template.hbs +++ b/gui/app/pods/customize/template.hbs @@ -60,7 +60,7 @@ {{/if}} {{#link-to "customize.product" activeClass="selected" class="item" tagName="div"}} -
Changelog
+
Documize Changelog
{{/link-to}} diff --git a/gui/app/styles/core/icon.scss b/gui/app/styles/core/icon.scss index 0ecdd47e..6b785b52 100644 --- a/gui/app/styles/core/icon.scss +++ b/gui/app/styles/core/icon.scss @@ -414,3 +414,16 @@ icons .dicon-notification::before { content: "\ea4d"; } + + .dicon-handshake::before { + content: "\ea4e"; + } + + .dicon-add-27::before { + content: "\ea4f"; + } + + .dicon-delete-28::before { + content: "\ea50"; + } + diff --git a/gui/app/styles/core/layout/spacing.scss b/gui/app/styles/core/layout/spacing.scss index 378f5a54..269d501e 100644 --- a/gui/app/styles/core/layout/spacing.scss +++ b/gui/app/styles/core/layout/spacing.scss @@ -10,7 +10,7 @@ @media (max-width: $display-break-1) { div[class^="spacer-"] { - height: 1px; + height: 10px; } } diff --git a/gui/app/styles/core/news.scss b/gui/app/styles/core/news.scss index e95b6a6d..b500c908 100644 --- a/gui/app/styles/core/news.scss +++ b/gui/app/styles/core/news.scss @@ -4,38 +4,39 @@ > .update-status { padding: 25px; background-color: map-get($yellow-shades, 100); - border: 1px solid map-get($yellow-shades, 200); - @include shadow(); + border: 1px solid map-get($yellow-shades, 300); @include border-radius(3px); > .title { font-weight: bold; font-size: 1.5rem; - color: map-get($yellow-shades, 600); - margin-bottom: 15px; + color: map-get($yellow-shades, 800); + margin-bottom: 5px; display:block; } > .instructions { font-weight: 500; - font-size: 1.3rem; + font-size: 1.1rem; color: map-get($gray-shades, 800); margin-bottom: 30px; } > .links { - margin: 30px 0 0 0; + margin: 10px 0 0 0; > p { + margin: 0.3rem 0; + > .edition-name { - font-size: 1.3rem; + font-size: 1.1rem; font-weight: 400; color: map-get($yellow-shades, 900); } > .link { - font-size: 1.3rem; - color: map-get($yellow-shades, 800); + font-size: 1.1rem; + color: map-get($yellow-shades, 600); font-weight: 600; } } @@ -46,13 +47,12 @@ padding: 25px; background-color: map-get($gray-shades, 100); border: 1px solid map-get($gray-shades, 200); - @include shadow(); @include border-radius(3px); > .version { font-weight: 700; font-size: 1.2rem; - color: map-get($yellow-shades, 700); + color: map-get($gray-shades, 700); margin: 10px 0; display: block; } diff --git a/gui/app/styles/core/view/customize.scss b/gui/app/styles/core/view/customize.scss index 00672ad4..6c393e66 100644 --- a/gui/app/styles/core/view/customize.scss +++ b/gui/app/styles/core/view/customize.scss @@ -53,14 +53,41 @@ } > .space-list { - padding: 0; - margin: 3rem 0; + margin: 0; + padding: 0; > .space { - margin: 15px 0; - padding: 15px 0; - font-size: 1.2rem; - color: $theme-500; + @include card(); + list-style-type: none; + margin: 0 0 2rem 0; + padding: 15px 20px; + width: 100%; + + > .info { + padding: 0; + + > a { + > .name { + font-size: 1.3rem; + font-weight: 700; + color: map-get($gray-shades, 800); + + > .dicon { + color: map-get($gray-shades, 600); + font-size: 20px; + vertical-align: middle; + margin-right: 10px; + } + } + + > .desc { + font-size: 1.1rem; + font-weight: 400; + margin-top: 0.4rem; + color: $color-black-light-3; + } + } + } } } @@ -69,17 +96,23 @@ margin: 0; > .group { - margin: 15px 0; + @include card(); + list-style-type: none; + margin: 0 0 2rem 0; + padding: 15px 20px; + width: 100%; - .name { - color: $color-black-light-1; + > .name { font-size: 1.3rem; - font-weight: 600; + font-weight: 700; + color: map-get($gray-shades, 800); + } - > .purpose { - font-size: 1rem; - color: map-get($gray-shades, 600); - } + > .desc { + font-size: 1.1rem; + font-weight: 400; + margin-top: 0.4rem; + color: $color-black-light-3; } } } @@ -87,11 +120,11 @@ // used for group admin > .group-users-members { > .item { - margin: 10px 0; + margin: 5px 0; > .fullname { - color: $theme-500; - font-size: 1.2rem; + color: map-get($gray-shades, 800); + font-size: 1rem; } } } @@ -149,7 +182,7 @@ border: 1px solid map-get($green-shades, 200); padding: 20px 20px; background-color: map-get($green-shades, 100); - color: $color-black-light-1; + color: map-get($green-shades, 700); > .backup-fail { margin: 10px 0; @@ -168,7 +201,7 @@ margin: 50px 0; padding: 20px 20px; background-color: map-get($red-shades, 100); - color: $color-black-light-1; + color: map-get($red-shades, 700); > .restore-fail { margin: 10px 0; diff --git a/gui/app/styles/core/widget/widget-list-picker.scss b/gui/app/styles/core/widget/widget-list-picker.scss index 752f4c1e..0eb3ea59 100644 --- a/gui/app/styles/core/widget/widget-list-picker.scss +++ b/gui/app/styles/core/widget/widget-list-picker.scss @@ -10,9 +10,9 @@ @include border-radius(3px); margin: 0 0 15px 0; padding: 10px 15px; - color: map-get($gray-shades, 600); + color: map-get($gray-shades, 700); background-color: map-get($gray-shades, 100); - border: 1px solid map-get($gray-shades, 600); + border: 1px solid map-get($gray-shades, 200); cursor: pointer; position: relative; list-style-type: none; @@ -20,13 +20,12 @@ &:hover { > .text-header, > .text { - color: $color-black-light-1; + color: map-get($gray-shades, 800); } } > .text-header { @include ease-in(); - color: map-get($gray-shades, 600); font-size: 1.3rem; font-weight: 600; margin-bottom: 5px; @@ -38,9 +37,8 @@ > .text { @include ease-in(); - color: map-get($gray-shades, 600); font-size: 1rem; - font-weight: 500; + font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -51,7 +49,7 @@ position: absolute; top: 10px; right: 10px; - color: map-get($green-shades, 600); + color: map-get($yellow-shades, 800); font-weight: 700; font-size: 1.3rem; } @@ -59,11 +57,11 @@ > .selected { > .text-header, > .text { - color: $color-black-light-1; + color: map-get($yellow-shades, 800) !important; } - background-color: map-get($yellow-shades, 700) !important; - border: 1px solid map-get($yellow-shades, 700) !important; + background-color: map-get($yellow-shades, 100) !important; + border: 1px solid map-get($yellow-shades, 300) !important; } } } diff --git a/gui/app/templates/components/customize/auth-settings.hbs b/gui/app/templates/components/customize/auth-settings.hbs index 188cc45c..da0d30e7 100644 --- a/gui/app/templates/components/customize/auth-settings.hbs +++ b/gui/app/templates/components/customize/auth-settings.hbs @@ -163,7 +163,7 @@ {{ui/ui-button-gap}} {{/if}} - {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Activate onClick=(action "onSave")}} + {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked label=constants.Label.Activate onClick=(action "onSave")}} {{#if (gt keycloakFailure.length 0)}} diff --git a/gui/app/templates/components/customize/backup-restore.hbs b/gui/app/templates/components/customize/backup-restore.hbs index c551904d..81ae4e17 100644 --- a/gui/app/templates/components/customize/backup-restore.hbs +++ b/gui/app/templates/components/customize/backup-restore.hbs @@ -26,10 +26,10 @@ {{#if backupRunning}}

Backup running, please wait...

{{else}} - {{ui/ui-button color=constants.Color.Yellow light=true label=(concat "TENANT BACKUP (" appMeta.appHost ")") onClick=(action "onBackup")}} + {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Database label=(concat "BACKUP TENANT (" appMeta.appHost ")") onClick=(action "onBackup")}} {{#if session.isGlobalAdmin}} {{ui/ui-button-gap}} - {{ui/ui-button color=constants.Color.Green light=true label="SYSTEM BACKUP" onClick=(action "onSystemBackup")}} + {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Database label="BACKUP SYSTEM" onClick=(action "onSystemBackup")}} {{/if}} {{/if}} {{#if backupFailed}} @@ -44,7 +44,7 @@
{{#if session.isGlobalAdmin}} -

Restore from a system backup should only be performed on an empty Documize database.

+

Restore from a system backup should only be performed on an empty Documize database.

{{/if}}

Restore operation will re-create users, groups, permissions, spaces, categories and content.

It can take several minutes to complete the restore process — please be patient while the restore operation is in progress.

@@ -63,7 +63,7 @@
Restore completed — restart your browser and log in
{{else}} {{#if restoreUploadReady}} - {{ui/ui-button color=constants.Color.Red light=false label=restoreButtonLabel onClick=(action "onShowRestoreModal")}} + {{ui/ui-button color=constants.Color.Red light=false icon=constants.Icon.Database label=restoreButtonLabel onClick=(action "onShowRestoreModal")}} {{/if}} {{/if}}
diff --git a/gui/app/templates/components/customize/general-settings.hbs b/gui/app/templates/components/customize/general-settings.hbs index 4d6b7ddf..7fd1488e 100644 --- a/gui/app/templates/components/customize/general-settings.hbs +++ b/gui/app/templates/components/customize/general-settings.hbs @@ -11,13 +11,13 @@ Provide short message explaining this Documize instance
- -
- - -
+ + {{ui/theme-picker onChange=(action "onThemeChange")}} + Users can set their own theme under Profile +
+
+ + {{x-toggle value=model.general.allowAnonymousAccess size="medium" theme="light" onToggle=(action (mut model.general.allowAnonymousAccess))}}
@@ -41,12 +41,7 @@ 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 -
- {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "save")}} + {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Settings label=constants.Label.Save onClick=(action "save")}} \ No newline at end of file diff --git a/gui/app/templates/components/customize/integration-settings.hbs b/gui/app/templates/components/customize/integration-settings.hbs index 5943f8ad..be917a2d 100644 --- a/gui/app/templates/components/customize/integration-settings.hbs +++ b/gui/app/templates/components/customize/integration-settings.hbs @@ -28,6 +28,6 @@ {{/if}} - {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onSave")}} + {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Integrations label=constants.Label.Save onClick=(action "onSave")}} \ No newline at end of file diff --git a/gui/app/templates/components/customize/search-index.hbs b/gui/app/templates/components/customize/search-index.hbs index 47fe872e..eabff71e 100644 --- a/gui/app/templates/components/customize/search-index.hbs +++ b/gui/app/templates/components/customize/search-index.hbs @@ -2,7 +2,7 @@

It can take up to 30 minutes to rebuild the search index.

- {{ui/ui-button color=constants.Color.Yellow light=true label=buttonLabel onClick=(action "reindex")}} + {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Search label=buttonLabel onClick=(action "reindex")}}
diff --git a/gui/app/templates/components/customize/smtp-settings.hbs b/gui/app/templates/components/customize/smtp-settings.hbs index f4ea48c5..ed1c9949 100644 --- a/gui/app/templates/components/customize/smtp-settings.hbs +++ b/gui/app/templates/components/customize/smtp-settings.hbs @@ -31,26 +31,17 @@ e.g. Documize
- -
- {{input id="smtp-anonymous" type="checkbox" checked=model.smtp.anonymous class="form-check-input"}} - -
+ + {{x-toggle value=model.smtp.anonymous size="medium" theme="light" onToggle=(action (mut model.smtp.anonymous))}}
- -
- {{input id="smtp-base64creds" type="checkbox" checked=model.smtp.base64creds class="form-check-input"}} - -
+ + {{x-toggle value=model.smtp.base64creds size="medium" theme="light" onToggle=(action (mut model.smtp.base64creds))}}
- -
- {{input id="smtp-usessl" type="checkbox" checked=model.smtp.usessl class="form-check-input"}} - -
+ + {{x-toggle value=model.smtp.usessl size="medium" theme="light" onToggle=(action (mut model.smtp.usessl))}}
- {{ui/ui-button color=constants.Color.Green light=true label=buttonText onClick=(action "saveSMTP")}} + {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Send label=buttonText onClick=(action "saveSMTP")}} \ No newline at end of file diff --git a/gui/app/templates/components/customize/space-admin.hbs b/gui/app/templates/components/customize/space-admin.hbs index 0c9fa18f..f2583e23 100644 --- a/gui/app/templates/components/customize/space-admin.hbs +++ b/gui/app/templates/components/customize/space-admin.hbs @@ -1,53 +1,68 @@ -
- {{#if spaces}} - {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Export label=constants.Label.Export onClick=(action "onExport")}} +{{#if spaces}} + {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Export label="Export All Content" onClick=(action "onExport")}} + {{ui/ui-spacer size=300}} -
+
+
    {{#each spaces as |space|}} -
    -
    - {{#link-to "folder" space.id space.slug class="alt"}}{{space.name}}{{/link-to}} -
    -
    -
    - person_add - {{#attach-tooltip showDelay=1000}}Add myself as space owner{{/attach-tooltip}} -
    -
    -
    - delete - {{#attach-tooltip showDelay=1000}}Delete space and all content{{/attach-tooltip}} -
    -
    -
    - {{/each}} -
    - -
+
+ + +
+{{else}} +

There are no shared spaces to manage

+{{/if}} diff --git a/gui/app/templates/components/customize/user-groups.hbs b/gui/app/templates/components/customize/user-groups.hbs index b132fb9a..520f574d 100644 --- a/gui/app/templates/components/customize/user-groups.hbs +++ b/gui/app/templates/components/customize/user-groups.hbs @@ -1,213 +1,196 @@ -
-
-
- {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.People label=constants.Label.Add onClick=(action "onShowAddGroupModal")}} - {{ui/ui-spacer size=300}} -