From 791e653251c6329f58b9f23affeb7d6189b13b3d Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Thu, 30 Jun 2016 14:54:34 -0700 Subject: [PATCH 01/14] start of big UX changes --- app/app/components/folder/documents-list.js | 4 + ...{folder-dashboard.js => folder-toolbar.js} | 39 +---- .../{page-container.js => zone-container.js} | 0 app/app/components/layout/zone-content.js | 15 ++ app/app/components/layout/zone-header.js | 21 +++ app/app/components/layout/zone-navigation.js | 38 +++++ app/app/components/layout/zone-sidebar.js | 15 ++ app/app/helpers/document/file-icon.js | 23 +-- app/app/initializers/application.js | 6 +- app/app/pods/folders/folder/controller.js | 30 +++- app/app/pods/folders/folder/template.hbs | 40 +++--- app/app/pods/folders/settings/template.hbs | 30 ++-- app/app/routes/application.js | 9 ++ app/app/styles/app.scss | 1 + app/app/styles/base.scss | 7 +- app/app/styles/color.scss | 44 +++--- app/app/styles/view/document/content.scss | 14 +- app/app/styles/view/document/toolbar.scss | 2 +- app/app/styles/view/document/wizard.scss | 4 +- app/app/styles/view/document/wysiwyg.scss | 2 +- app/app/styles/view/layout.scss | 136 ++++++++---------- app/app/styles/view/page-auth.scss | 2 +- app/app/styles/view/page-documents.scss | 40 ++---- app/app/styles/view/page-folder-settings.scss | 3 + app/app/styles/widget/widget-button.scss | 48 ++++++- app/app/styles/widget/widget-card.scss | 2 +- app/app/styles/widget/widget-chip.scss | 16 +-- app/app/styles/widget/widget-dropdown.scss | 2 +- app/app/styles/widget/widget-input.scss | 10 +- .../styles/widget/widget-sidebar-menu.scss | 5 +- app/app/styles/widget/widget-table.scss | 10 +- .../components/document/document-view.hbs | 2 +- .../components/folder/document-tags.hbs | 14 +- .../components/folder/documents-list.hbs | 21 ++- .../components/folder/folder-settings.hbs | 10 +- ...older-dashboard.hbs => folder-toolbar.hbs} | 43 ++---- .../components/folder/folders-list.hbs | 38 ++--- .../components/layout/page-container.hbs | 2 +- .../components/layout/zone-container.hbs | 7 + .../components/layout/zone-content.hbs | 3 + .../components/layout/zone-header.hbs | 14 ++ .../components/layout/zone-navigation.hbs | 70 +++++++++ .../components/layout/zone-sidebar.hbs | 3 + 43 files changed, 542 insertions(+), 303 deletions(-) rename app/app/components/folder/{folder-dashboard.js => folder-toolbar.js} (76%) rename app/app/components/layout/{page-container.js => zone-container.js} (100%) create mode 100644 app/app/components/layout/zone-content.js create mode 100644 app/app/components/layout/zone-header.js create mode 100644 app/app/components/layout/zone-navigation.js create mode 100644 app/app/components/layout/zone-sidebar.js create mode 100644 app/app/styles/view/page-folder-settings.scss rename app/app/templates/components/folder/{folder-dashboard.hbs => folder-toolbar.hbs} (68%) create mode 100644 app/app/templates/components/layout/zone-container.hbs create mode 100644 app/app/templates/components/layout/zone-content.hbs create mode 100644 app/app/templates/components/layout/zone-header.hbs create mode 100644 app/app/templates/components/layout/zone-navigation.hbs create mode 100644 app/app/templates/components/layout/zone-sidebar.hbs diff --git a/app/app/components/folder/documents-list.js b/app/app/components/folder/documents-list.js index 05932992..f6850fd6 100644 --- a/app/app/components/folder/documents-list.js +++ b/app/app/components/folder/documents-list.js @@ -14,6 +14,10 @@ import Ember from 'ember'; export default Ember.Component.extend({ selectedDocuments: [], + emptyState: Ember.computed('documents', function() { + return this.get('documents.length') === 0; + }), + didReceiveAttrs() { this.set('selectedDocuments', []); this.audit.record('viewed-space'); diff --git a/app/app/components/folder/folder-dashboard.js b/app/app/components/folder/folder-toolbar.js similarity index 76% rename from app/app/components/folder/folder-dashboard.js rename to app/app/components/folder/folder-toolbar.js index 0f31e243..5ece1015 100644 --- a/app/app/components/folder/folder-dashboard.js +++ b/app/app/components/folder/folder-toolbar.js @@ -1,11 +1,11 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// 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 . +// by contacting . // // https://documize.com @@ -20,21 +20,12 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { folder: {}, busy: false, - hasSelectedDocuments: false, - selectedDocuments: [], importedDocuments: [], savedTemplates: [], isFolderOwner: false, moveFolderId: "", - hasDocuments: function() { - return this.documents.get('length') > 0; - }.property('documents.length'), - didReceiveAttrs() { - this.set('hasSelectedDocuments', false); - this.set('selectedDocuments', []); - this.set('importedDocuments', []); this.set('isFolderOwner', this.get('folder.userId') === this.session.user.id); let self = this; @@ -52,6 +43,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { let targets = _.reject(this.get('folders'), { id: this.get('folder').get('id') }); + this.set('movedFolderOptions', targets); }, @@ -79,11 +71,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { }, actions: { - onDocumentsChecked(documents) { - this.set('selectedDocuments', documents); - this.set('hasSelectedDocuments', documents.length > 0); - }, - onEditTemplate(template) { this.navigateToDocument(template); }, @@ -121,20 +108,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { }, deleteDocuments() { - let documents = this.get('selectedDocuments'); - let self = this; - - documents.forEach(function(document) { - self.get('documentService').deleteDocument(document).then(function() { - self.get('refresh')(); - }); - }); - - this.set('selectedDocuments', []); - this.set('hasSelectedDocuments', false); - this.send("showNotification", "Deleted"); - - return true; + this.attrs.onDeleteDocument(); }, setMoveFolder(folderId) { @@ -152,11 +126,10 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { return false; } - this.get('onMoveDocument')(this.get('selectedDocuments'), this.get('moveFolderId')); + this.attrs.onMoveDocument(this.get('moveFolderId')); this.set("moveFolderId", ""); - this.send("showNotification", "Moved"); return true; } } -}); \ No newline at end of file +}); diff --git a/app/app/components/layout/page-container.js b/app/app/components/layout/zone-container.js similarity index 100% rename from app/app/components/layout/page-container.js rename to app/app/components/layout/zone-container.js diff --git a/app/app/components/layout/zone-content.js b/app/app/components/layout/zone-content.js new file mode 100644 index 00000000..cb25c125 --- /dev/null +++ b/app/app/components/layout/zone-content.js @@ -0,0 +1,15 @@ +// 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 Ember from 'ember'; + +export default Ember.Component.extend({ +}); diff --git a/app/app/components/layout/zone-header.js b/app/app/components/layout/zone-header.js new file mode 100644 index 00000000..937dca3c --- /dev/null +++ b/app/app/components/layout/zone-header.js @@ -0,0 +1,21 @@ +// 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 Ember from 'ember'; + +export default Ember.Component.extend({ + title: "", + message: "", + + hasMessage: Ember.computed('message', function() { + return this.get('message').length !== 0; + }) +}); diff --git a/app/app/components/layout/zone-navigation.js b/app/app/components/layout/zone-navigation.js new file mode 100644 index 00000000..5602844a --- /dev/null +++ b/app/app/components/layout/zone-navigation.js @@ -0,0 +1,38 @@ +// 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 Ember from 'ember'; +import netUtil from '../../utils/net'; + +export default Ember.Component.extend({ + dashboardMode: false, + searchMode: false, + profileMode: false, + settingsMode: false, + folderMode: false, + documentMode: false, + + didInitAttrs() { + let self = this; + if (this.session.authenticated) { + this.session.user.accounts.forEach(function(account) { + account.active = account.orgId === self.session.appMeta.orgId; + }); + } + }, + + actions: { + switchAccount(domain) { + this.audit.record('switched-account'); + window.location.href = netUtil.getAppUrl(domain); + } + } +}); diff --git a/app/app/components/layout/zone-sidebar.js b/app/app/components/layout/zone-sidebar.js new file mode 100644 index 00000000..cb25c125 --- /dev/null +++ b/app/app/components/layout/zone-sidebar.js @@ -0,0 +1,15 @@ +// 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 Ember from 'ember'; + +export default Ember.Component.extend({ +}); diff --git a/app/app/helpers/document/file-icon.js b/app/app/helpers/document/file-icon.js index 04058c71..1d1d6904 100644 --- a/app/app/helpers/document/file-icon.js +++ b/app/app/helpers/document/file-icon.js @@ -1,11 +1,11 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// 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 . +// by contacting . // // https://documize.com @@ -31,6 +31,15 @@ export function documentFileIcon(params) { case "mp4": html = "avi.png"; break; + + case "html": + html = "html.png"; + break; + case "css": + html = "css.png"; + break; + + case "bat": case "sh": case "ps": @@ -41,13 +50,12 @@ export function documentFileIcon(params) { case "java": case "go": case "js": - case "html": case "rb": case "py": - case "css": case "json": case "config": - html = "bat.png"; + case "xml": + html = "code.png"; break; case "bin": case "exe": @@ -97,12 +105,9 @@ export function documentFileIcon(params) { html = "doc.png"; break; case "xslt": - case "xml": - html = "xml.png"; - break; } return new Ember.Handlebars.SafeString(html); } -export default Ember.Helper.helper(documentFileIcon); \ No newline at end of file +export default Ember.Helper.helper(documentFileIcon); diff --git a/app/app/initializers/application.js b/app/app/initializers/application.js index 0cc3d498..11372ba4 100644 --- a/app/app/initializers/application.js +++ b/app/app/initializers/application.js @@ -1,11 +1,11 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// 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 . +// by contacting . // // https://documize.com @@ -25,4 +25,4 @@ export function initialize( /*application*/ ) { export default { name: 'application', initialize: initialize -}; \ No newline at end of file +}; diff --git a/app/app/pods/folders/folder/controller.js b/app/app/pods/folders/folder/controller.js index 365b5ba4..8237cb61 100644 --- a/app/app/pods/folders/folder/controller.js +++ b/app/app/pods/folders/folder/controller.js @@ -4,14 +4,23 @@ import NotifierMixin from '../../../mixins/notifier'; export default Ember.Controller.extend(NotifierMixin, { documentService: Ember.inject.service('document'), folderService: Ember.inject.service('folder'), + hasSelectedDocuments: false, + selectedDocuments: [], actions: { refresh() { this.get('target.router').refresh(); }, - onMoveDocument(documents, folder) { + onDocumentsChecked(documents) { + this.set('selectedDocuments', documents); + this.set('hasSelectedDocuments', documents.length > 0); + }, + + onMoveDocument(folder) { let self = this; + let documents = this.get('selectedDocuments'); + documents.forEach(function(documentId) { self.get('documentService').getDocument(documentId).then(function(doc) { doc.set('folderId', folder); @@ -20,8 +29,27 @@ export default Ember.Controller.extend(NotifierMixin, { }); }); }); + + this.set('selectedDocuments', []); + this.set('hasSelectedDocuments', false); + this.send("showNotification", "Moved"); }, + onDeleteDocument() { + let documents = this.get('selectedDocuments'); + let self = this; + + documents.forEach(function(document) { + self.get('documentService').deleteDocument(document).then(function() { + self.get('target.router').refresh(); + }); + }); + + this.set('selectedDocuments', []); + this.set('hasSelectedDocuments', false); + this.send("showNotification", "Deleted"); + }, + showDocument(folder, document) { this.transitionToRoute('document', folder.get('id'), folder.get('slug'), document.get('id'), document.get('slug')); }, diff --git a/app/app/pods/folders/folder/template.hbs b/app/app/pods/folders/folder/template.hbs index 5e059912..0e8d010d 100644 --- a/app/app/pods/folders/folder/template.hbs +++ b/app/app/pods/folders/folder/template.hbs @@ -1,18 +1,24 @@ -{{#header/page-navigation folder=model.folder folderMode=true}} - {{header/message-box message=session.appMeta.message}} -{{/header/page-navigation}} +{{#layout/zone-container}} -{{#layout/page-container}} - {{#layout/page-sidebar}} - {{folder/folders-list folders=model.folders onFolderAdd=(action 'onFolderAdd')}} - {{/layout/page-sidebar}} - {{#layout/page-content}} - {{folder/folder-dashboard - documents=model.documents - folders=model.folders - folder=model.folder - refresh=(action 'refresh') - onMoveDocument=(action 'onMoveDocument') - showDocument=(action 'showDocument')}} - {{/layout/page-content}} -{{/layout/page-container}} + {{layout/zone-navigation}} + + {{#layout/zone-header title=model.folder.name message="A space provides a place for related content"}} + {{folder/folder-toolbar + folders=model.folders + folder=model.folder + hasSelectedDocuments=hasSelectedDocuments + refresh=(action 'refresh') + onDeleteDocument=(action 'onDeleteDocument') + onMoveDocument=(action 'onMoveDocument') + showDocument=(action 'showDocument')}} + {{/layout/zone-header}} + + {{#layout/zone-sidebar}} + {{folder/folders-list folders=model.folders onFolderAdd=(action 'onFolderAdd')}} + {{/layout/zone-sidebar}} + + {{#layout/zone-content}} + {{folder/documents-list documents=model.documents folder=model.folder isFolderOwner=isFolderOwner onDocumentsChecked=(action 'onDocumentsChecked') }} + {{/layout/zone-content}} + +{{/layout/zone-container}} diff --git a/app/app/pods/folders/settings/template.hbs b/app/app/pods/folders/settings/template.hbs index 8da9e971..8d637dd9 100644 --- a/app/app/pods/folders/settings/template.hbs +++ b/app/app/pods/folders/settings/template.hbs @@ -1,9 +1,19 @@ -{{#header/page-navigation folder=model folderMode=true}} - {{header/message-box message=session.appMeta.message}} -{{/header/page-navigation}} +{{#layout/zone-container}} -{{#layout/page-container}} - {{#layout/page-sidebar}} + {{layout/zone-navigation}} + + {{#layout/zone-header title=model.name message="Settings, sharing, permissions and deletion"}} +
+ {{#link-to 'folders.folder' model.id model.slug}} +
+ arrow_back +
space
+
+ {{/link-to}} +
+ {{/layout/zone-header}} + + {{#layout/zone-sidebar}}
  • General
    • @@ -12,8 +22,9 @@
  • Delete
- {{/layout/page-sidebar}} - {{#layout/page-content}} + {{/layout/zone-sidebar}} + + {{#layout/zone-content}} {{#folder/folder-settings tabGeneral=tabGeneral tabShare=tabShare @@ -28,5 +39,6 @@ onShare="onShare" onPermission="onPermission" }} {{/folder/folder-settings}} - {{/layout/page-content}} -{{/layout/page-container}} + {{/layout/zone-content}} + +{{/layout/zone-container}} diff --git a/app/app/routes/application.js b/app/app/routes/application.js index af1ef9b8..bdc1c112 100644 --- a/app/app/routes/application.js +++ b/app/app/routes/application.js @@ -39,9 +39,18 @@ export default Ember.Route.extend({ actions: { willTransition: function( /*transition*/ ) { + $("#zone-sidebar").css('height', 'auto'); Mousetrap.reset(); }, + didTransition() { + Ember.run.schedule("afterRender",this,function() { + $("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height() - $("#zone-header").height() - 35); + }); + + return true; + }, + error(error, transition) { // jshint ignore: line if (error) { if (netUtil.isAjaxAccessError(error)) { diff --git a/app/app/styles/app.scss b/app/app/styles/app.scss index b66df98b..2d73151f 100644 --- a/app/app/styles/app.scss +++ b/app/app/styles/app.scss @@ -17,6 +17,7 @@ @import "view/layout.scss"; @import "view/page-search.scss"; @import "view/page-documents.scss"; +@import "view/page-folder-settings.scss"; @import "view/page-settings.scss"; @import "view/page-auth.scss"; @import "view/page-onboard.scss"; diff --git a/app/app/styles/base.scss b/app/app/styles/base.scss index 575e7ac5..b1946208 100644 --- a/app/app/styles/base.scss +++ b/app/app/styles/base.scss @@ -27,26 +27,27 @@ .no-overflow-x { overflow-x: visible !important; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } img.responsive-img, video.responsive-video { max-width: 100%; height: auto; } -.bordered { border: 1px solid $color-border2; } +.bordered { border: 1px solid $color-border; } html { overflow-y: scroll; font-family: $base-font; background-color: $color-white; font-size: 14px; + height: 100%; } body { + height: 100%; min-height: 100%; } a { - color: $color-attachment; + color: $color-link; text-decoration: none; cursor: pointer; a:hover, a:focus { - color: $color-primary; text-decoration: underline; } } diff --git a/app/app/styles/color.scss b/app/app/styles/color.scss index 40c0151f..f4a5b0fd 100644 --- a/app/app/styles/color.scss +++ b/app/app/styles/color.scss @@ -8,35 +8,34 @@ // by contacting . // // https://documize.com + $color-off-white: #f5f5f5; $color-off-black: #333333; $color-black: #000000; $color-white: #ffffff; -$color-primary: #084d85; -$color-link: #5abc67; -$color-attachment: #2180cc; -$color-red: #d9493c; -$color-green: #1c962b; -$color-blue: #084d85; +$color-primary: #115a97; +$color-red: #d04134; +$color-green: #4caf50; +$color-blue: #115a97; $color-gray: #8b9096; -$color-background: #f8f8f8; -$color-tooltip: #4c4c4c; + +$color-header: #f3f5f8; +$color-link: #4caf50; +$color-border: #e1e1e1; + +$color-input: #a1a1a1; +$color-stroke: #e1e1e1; + +$color-tooltip: #a1a1a1; $color-toast: #4c4c4c; + $color-chip: #98A2AB; -$color-input: #98A2AB; -$color-stroke: #98A2AB; +$color-chip: #dff0f9; +$color-chip-border: #daeaf3; +$color-chip-text: #1b88e3; + $color-card-active: #f7fcff; -$color-border: #dbdbdb; -$color-border2: #e2e2e2; -$color-primary-light: lighten($color-primary, 30%); -$color-primary-dark: darken($color-primary, 10%); -$color-gray2: #f0eeee; -$color-active-state: #e2e2e2; -$color-sidebar: #e7f1f6; -$color-shadow: #dbdbdb; -$color-error: #c23c56; -$color-highlight: #fff8dc; -$color-warning: #990012; + .background-color-white { background-color: $color-white; } @@ -73,6 +72,3 @@ $color-warning: #990012; .color-gray { color: $color-gray; } -.color-error { - color: $color-error; -} diff --git a/app/app/styles/view/document/content.scss b/app/app/styles/view/document/content.scss index a24d3f31..8789b6ed 100644 --- a/app/app/styles/view/document/content.scss +++ b/app/app/styles/view/document/content.scss @@ -30,7 +30,7 @@ margin-top: 10px; padding: 0; list-style-type: none; - border-bottom: 1px solid $color-gray2; + border-bottom: 1px solid $color-border; padding-bottom: 10px; > .icon { @@ -38,8 +38,16 @@ margin-right: 10px; } - > a > .file { - font-size: 1rem; + > a { + color: $color-gray; + + &:hover { + color: $color-link; + } + + > .file { + font-size: 1rem; + } } > .action { diff --git a/app/app/styles/view/document/toolbar.scss b/app/app/styles/view/document/toolbar.scss index 3919be20..87792975 100644 --- a/app/app/styles/view/document/toolbar.scss +++ b/app/app/styles/view/document/toolbar.scss @@ -141,7 +141,7 @@ .deleted { font-size: 0.9rem; - color: $color-error; + color: $color-red; } .date { diff --git a/app/app/styles/view/document/wizard.scss b/app/app/styles/view/document/wizard.scss index 62fde865..2b4ee5ed 100644 --- a/app/app/styles/view/document/wizard.scss +++ b/app/app/styles/view/document/wizard.scss @@ -16,13 +16,13 @@ width: 400px; height: 80px; background-color: $color-white; - border: 1px solid $color-border2; + border: 1px solid $color-border; border-radius: 3px; margin: 0 30px 30px 0; &:hover { background-color: $color-card-active; - border: 1px solid $color-border2; + border: 1px solid $color-border; transition: 0.2s all ease; } diff --git a/app/app/styles/view/document/wysiwyg.scss b/app/app/styles/view/document/wysiwyg.scss index 3629737d..5963084e 100644 --- a/app/app/styles/view/document/wysiwyg.scss +++ b/app/app/styles/view/document/wysiwyg.scss @@ -89,7 +89,7 @@ { background-color: $color-off-white; padding: 10px; - border: 1px solid $color-border2; + border: 1px solid $color-border; @include border-radius(3px); } diff --git a/app/app/styles/view/layout.scss b/app/app/styles/view/layout.scss index 54439c7e..e8df14a1 100644 --- a/app/app/styles/view/layout.scss +++ b/app/app/styles/view/layout.scss @@ -1,10 +1,10 @@ .page-container { - padding-top: 60px; min-height: 500px; //ensure dropdowns render in viewport } .copyright { margin-top: 50px; + text-align: center; > a { font-size: 0.8rem; @@ -12,37 +12,36 @@ } } -.header { +.zone-navigation { background-color: $color-primary; color: $color-white; - height: 145px; padding: 0; margin: 0; - // z-index: 1; - // position: fixed; width: 100%; font-size: 1rem; + padding: 15px 40px 15px 40px; .content { - margin-top: 25px; > .title { - padding-left: 10px; - font-size: 1.1rem; + padding-left: 15px; + font-size: 1rem; display: inline-block; vertical-align: middle; + color: $color-white; + text-decoration: none; } > .name { - padding-right: 10px; - font-size: 1.1rem; + padding-right: 15px; + font-size: 1rem; display: inline-block; vertical-align: middle; } > .login { - padding: 10px 0 0 0; - font-size: 1.1rem; + padding: 15px 0 0 0; + font-size: 1rem; display: inline-block; > a { @@ -50,6 +49,23 @@ text-decoration: none; } } + + > .search { + padding-left: 15px; + font-size: 1rem; + display: inline-block; + vertical-align: middle; + margin-top: 5px; + + > a { + color: $color-white; + text-decoration: none; + + > .material-icons { + font-size: 1.5rem; + } + } + } } .header-button { @@ -73,7 +89,6 @@ > .material-icons { color: $color-primary; - // padding: 0 0 0 8px; text-align: center; font-size: 1.4em; } @@ -91,74 +106,41 @@ border-radius: 0; } } +} - .breadcrumb-menu { - margin: 0; - padding: 0; - color: $color-white; - padding: 20px 0 0 0; +.zone-header { + background-color: $color-header; + padding: 0 40px 0 40px; - > .option { - list-style: none; - list-style-type: none; - padding: 0 25px 22.5px 0; - float: left; + > .info { + padding: 20px 0 20px 0; - > a { - font-size: 1rem; - color: #AFB4BB; - text-decoration: none; - } + > .title { + color: $color-off-black; + font-size: 1.2rem; } - > .selected > a { - color: $color-white !important; - } - } + > .message { + color: $color-gray; + font-size: 1rem; + margin-top: 10px; + } + } - .dual-box { - background-color: $color-off-white; - color: $color-gray; - height: 45px; - border: 1px solid $color-border2; - border-radius: 4px; - width: 100%; - padding: 0 10px; - cursor: pointer; - display: inline-block; - - &:hover { - @extend .z-depth-tiny; - } - - .info { - font-size: 0.9rem; - line-height: 3rem; - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 90%; - } - - .icon { - float: right; - display: inline-block; - font-size: 1.5rem; - line-height: 3rem; - color: $color-stroke; - } - - .input { - font-size: 1rem; - line-height: 3rem; - display: inline-block; - transition: .3s; - } - } - - .dual-box-white { - background-color: $color-white; - color: $color-off-black; - } + > .actions { + padding: 20px 0 20px 0; + } +} + +.zone-sidebar { + height:100%; + min-height:100%; + padding: 0 0 0 40px; + border-right: 1px solid $color-border; + float: left; +} + +.zone-content { + padding: 0 40px 0 40px; + float: left; } diff --git a/app/app/styles/view/page-auth.scss b/app/app/styles/view/page-auth.scss index 4edbc9c2..a0112460 100644 --- a/app/app/styles/view/page-auth.scss +++ b/app/app/styles/view/page-auth.scss @@ -2,7 +2,7 @@ height: 450px; width: 450px; background-color: $color-white; - border: 1px solid $color-border2; + border: 1px solid $color-border; display: inline-block; border-radius : 3px; color: $color-off-black; diff --git a/app/app/styles/view/page-documents.scss b/app/app/styles/view/page-documents.scss index 4708b660..46631231 100644 --- a/app/app/styles/view/page-documents.scss +++ b/app/app/styles/view/page-documents.scss @@ -2,6 +2,11 @@ .folders-list { margin: 30px 0; + > .add-space-action { + text-align: center; + margin-bottom: 30px; + } + > .section { margin: 0 0 20px 0; @@ -48,14 +53,13 @@ } .documents-list { - margin: 35px 0; + margin: 15px 0; > .document { margin: 0; padding: 20px 20px 25px 20px; width: 100%; position: relative; - border-bottom: 1px solid $color-gray2; transition: .3s; &:hover { @@ -65,7 +69,6 @@ } > .snippet { - // color: $color-off-black; color: $color-gray; } } @@ -78,15 +81,15 @@ > .checkbox { position: absolute; display: none; - top: 5px; - right: 12px; + top: 8px; + right: 15px; cursor: pointer; > .material-icons { width: 10px; margin: 0; padding: 0; - color: $color-link; + color: $color-blue; } } @@ -110,34 +113,11 @@ font-size: 14px; line-height: 24px; } - - > .tags { - font-size: 0.8rem; - color: $color-gray; - margin-top: 8px; - - .tag { - background-color: $color-white; - color: $color-stroke; - text-decoration: none; - display: inline-block; - margin: 5px 10px 5px 0; - padding: 5px 10px; - border: 1px solid $color-border; - border-radius: 15px; - transition: 0.2s all ease; - - &:hover { - background-color: $color-off-white; - } - } - } } } > .selected-card { background-color: $color-card-active !important; - border-bottom: 1px solid $color-link !important; > .checkbox { display: block; @@ -175,7 +155,7 @@ } .no-documents { - margin-top: 100px; + margin-top: 50px; text-align: center; opacity: 0.4; diff --git a/app/app/styles/view/page-folder-settings.scss b/app/app/styles/view/page-folder-settings.scss new file mode 100644 index 00000000..7fd7502d --- /dev/null +++ b/app/app/styles/view/page-folder-settings.scss @@ -0,0 +1,3 @@ +.folder-settings { + margin-top: 30px; +} diff --git a/app/app/styles/widget/widget-button.scss b/app/app/styles/widget/widget-button.scss index ffe0a484..a582598b 100644 --- a/app/app/styles/widget/widget-button.scss +++ b/app/app/styles/widget/widget-button.scss @@ -3,7 +3,7 @@ @mixin button-hover-state($bg) { &:hover { background-color: lighten($bg, 3%); - @extend .z-depth-1; + @extend .z-depth-tiny; } } @@ -24,7 +24,7 @@ @extend .no-select; &:hover { - @extend .z-depth-half; + @extend .z-depth-tiny; } i { @@ -55,7 +55,38 @@ font-size: 1.2rem; &:hover { - @extend .z-depth-half; + @extend .z-depth-tiny; + } + + i { + color: $color-gray; + text-align: center; + } + + &:before { + border-radius: 0; + } +} + +.square-button-white { + display: inline-block; + position: relative; + overflow: hidden; + width: 32px; + height: 32px; + line-height: 31px; + padding: 0; + border-radius: 2px; + transition: .3s; + cursor: pointer; + vertical-align: middle; + background-color: $color-white; + border: 1px solid $color-stroke; + text-align: center; + @extend .no-select; + + &:hover { + @extend .z-depth-tiny; } i { @@ -134,8 +165,8 @@ -webkit-tap-highlight-color: transparent; color: $color-white; cursor: pointer; - border: none; - @extend .no-select; + border: none; + @extend .no-select; > .name { vertical-align: top; @@ -163,6 +194,13 @@ @include button-hover-state($color-gray); } +.button-white { + border: 1px solid $color-stroke; + background-color: $color-white; + color: $color-blue; + @include button-hover-state($color-white); +} + .button-transparent { background-color: transparent; color: $color-gray; diff --git a/app/app/styles/widget/widget-card.scss b/app/app/styles/widget/widget-card.scss index 2408b48c..26a743e2 100644 --- a/app/app/styles/widget/widget-card.scss +++ b/app/app/styles/widget/widget-card.scss @@ -1,5 +1,5 @@ .base-card { - border: 1px solid $color-border2; + border: 1px solid $color-border; display: inline-block; border-radius : 3px; background-color: $color-white; diff --git a/app/app/styles/widget/widget-chip.scss b/app/app/styles/widget/widget-chip.scss index 9c10afd0..b1e92526 100644 --- a/app/app/styles/widget/widget-chip.scss +++ b/app/app/styles/widget/widget-chip.scss @@ -1,29 +1,30 @@ .chip { display: inline-block; - border-radius: 15px; - border: 1px solid $color-border; + border-radius: 3px; + border: 1px solid $color-chip-border; padding: 0; height: 25px; line-height: 0; margin-right: 5px; + background-color: $color-chip; + color: $color-chip-text; &:hover { cursor: pointer; - background-color: $color-off-white; } > .chip-text { display: inline-block; font-weight: 400; font-size: 12px; - color: $color-stroke; + color: $color-chip-text; padding: 11px 10px 0 10px; letter-spacing: 0.7px; line-height: 0; } > i.material-icons { - color: $color-stroke; + color: $color-chip-text; font-size: 13px; margin: 13px 8px 0 0; padding: 0; @@ -33,14 +34,13 @@ .chip-action { @extend .chip; - background-color: $color-off-white; + background-color: $color-white; &:hover { cursor: pointer; - background-color: $color-off-white; } > .chip-text { - color: $color-chip; + color: $color-chip-text; } } diff --git a/app/app/styles/widget/widget-dropdown.scss b/app/app/styles/widget/widget-dropdown.scss index df6427c9..e0ccb37b 100644 --- a/app/app/styles/widget/widget-dropdown.scss +++ b/app/app/styles/widget/widget-dropdown.scss @@ -99,7 +99,7 @@ > li.divider { height: 1px; - border-top: 1px solid $color-border2; + border-top: 1px solid $color-border; margin: 5px 0; } diff --git a/app/app/styles/widget/widget-input.scss b/app/app/styles/widget/widget-input.scss index 54e4eed2..120b8b2c 100644 --- a/app/app/styles/widget/widget-input.scss +++ b/app/app/styles/widget/widget-input.scss @@ -44,7 +44,7 @@ > textarea { resize: none; height: auto !important; - overflow-y: hidden; + overflow-y: hidden; } > select, @@ -160,7 +160,7 @@ } .input-form { - border: 1px solid $color-border2; + border: 1px solid $color-border; display: block; border-radius : 3px; background-color: $color-white; @@ -187,6 +187,10 @@ margin-top: 30px; } +.form-borderless { + padding: 0 !important; + border: none !important; +} .widget-checkbox { color: $color-link; @@ -195,4 +199,4 @@ .checkbox-gray { color: $color-gray !important; -} \ No newline at end of file +} diff --git a/app/app/styles/widget/widget-sidebar-menu.scss b/app/app/styles/widget/widget-sidebar-menu.scss index da02f6a0..a309f1a0 100644 --- a/app/app/styles/widget/widget-sidebar-menu.scss +++ b/app/app/styles/widget/widget-sidebar-menu.scss @@ -1,16 +1,17 @@ .sidebar-menu { - margin: 20px 0; + margin: 30px 0; > .options { padding: 0; margin: 0; > .option { - margin-bottom: 10px; + margin-bottom: 15px; font-size: 1rem; list-style: none; cursor: pointer; @extend .no-select; + color: $color-gray; &:hover { color: $color-link; diff --git a/app/app/styles/widget/widget-table.scss b/app/app/styles/widget/widget-table.scss index ae3645ed..03258a9d 100644 --- a/app/app/styles/widget/widget-table.scss +++ b/app/app/styles/widget/widget-table.scss @@ -3,7 +3,7 @@ margin: 0 0 25px 0; width: 100%; font-size: 1rem; - border: 1px solid $color-border2; + border: 1px solid $color-border; border-radius: 2px; border-collapse: collapse; @@ -26,21 +26,21 @@ text-align: left; font-weight: bold; padding: 10px; - border-bottom: 1px solid $color-border2; + border-bottom: 1px solid $color-border; } } } .bordered { - border: 1px solid $color-border2; + border: 1px solid $color-border; } .border-top { - border-top: 1px solid $color-border2; + border-top: 1px solid $color-border; } .border-bottom { - border-bottom: 1px solid $color-border2; + border-bottom: 1px solid $color-border; } .action-link { diff --git a/app/app/templates/components/document/document-view.hbs b/app/app/templates/components/document/document-view.hbs index 9c64ce5d..8831f44d 100644 --- a/app/app/templates/components/document/document-view.hbs +++ b/app/app/templates/components/document/document-view.hbs @@ -17,7 +17,7 @@
    {{#each attachments key="id" as |a index|}}
  • - + {{ a.filename }} diff --git a/app/app/templates/components/folder/document-tags.hbs b/app/app/templates/components/folder/document-tags.hbs index de946a13..b7c9c0ad 100644 --- a/app/app/templates/components/folder/document-tags.hbs +++ b/app/app/templates/components/folder/document-tags.hbs @@ -1,5 +1,9 @@ -{{#each tagz as |tg|}} - {{#link-to "search" (query-params filter=tg) class="tag"}} - {{tg}} - {{/link-to}} -{{/each}} +
    + {{#each tagz as |tg|}} + {{#link-to "search" (query-params filter=tg)}} +
    + {{tg}} +
    + {{/link-to}} + {{/each}} +
    diff --git a/app/app/templates/components/folder/documents-list.hbs b/app/app/templates/components/folder/documents-list.hbs index 8daf9375..37e797c8 100644 --- a/app/app/templates/components/folder/documents-list.hbs +++ b/app/app/templates/components/folder/documents-list.hbs @@ -4,7 +4,7 @@ {{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
    {{ document.name }}
    {{ document.excerpt }}
    -
    {{folder/document-tags documentTags=document.tags}}
    +
    {{folder/document-tags documentTags=document.tags}}
    {{/link-to}}
    {{#if session.authenticated}} @@ -18,3 +18,22 @@
    • {{/each}}
+ +{{#if emptyState}} +
+
+
+ add +
space
+
+
Create a new space for
all your content
+
+
+
+ add +
content
+
+
Start with a content template or
import .doc .docx, .txt .md files
+
+
+{{/if}} diff --git a/app/app/templates/components/folder/folder-settings.hbs b/app/app/templates/components/folder/folder-settings.hbs index 52b76a05..6d82c9a1 100644 --- a/app/app/templates/components/folder/folder-settings.hbs +++ b/app/app/templates/components/folder/folder-settings.hbs @@ -1,6 +1,6 @@ -
+
{{#if tabGeneral}} -
+
@@ -13,7 +13,7 @@ {{/if}} {{#if tabShare}} -
+
@@ -31,7 +31,7 @@ {{/if}} {{#if tabDelete}} -
+
@@ -44,7 +44,7 @@ {{/if}} {{#if tabPermissions}} -
+
diff --git a/app/app/templates/components/folder/folder-dashboard.hbs b/app/app/templates/components/folder/folder-toolbar.hbs similarity index 68% rename from app/app/templates/components/folder/folder-dashboard.hbs rename to app/app/templates/components/folder/folder-toolbar.hbs index 7700b7a2..eced26d8 100644 --- a/app/app/templates/components/folder/folder-dashboard.hbs +++ b/app/app/templates/components/folder/folder-toolbar.hbs @@ -1,4 +1,4 @@ -