From 18fc5db8c6d19528001e2aedfadea1bcacf58186 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Wed, 22 Nov 2017 17:27:09 +0000 Subject: [PATCH] [WIP] refactoring start document UX --- gui/app/components/folder/space-view.js | 12 --- gui/app/components/toolbar/for-space.js | 15 +-- gui/app/pods/folder/index/template.hbs | 8 +- gui/app/styles/bootstrap.scss | 6 +- gui/app/styles/view/common.scss | 4 + gui/app/styles/view/folder/all.scss | 2 - gui/app/styles/view/folder/document.scss | 24 ----- gui/app/styles/view/folder/wizard.scss | 101 ------------------ gui/app/styles/view/new-doc.scss | 87 +++++++++++++++ gui/app/styles/view/views.scss | 1 + .../components/folder/space-view.hbs | 5 +- .../components/folder/start-document.hbs | 69 ++++++------ .../components/toolbar/for-space.hbs | 9 +- 13 files changed, 145 insertions(+), 198 deletions(-) delete mode 100644 gui/app/styles/view/folder/document.scss delete mode 100644 gui/app/styles/view/folder/wizard.scss create mode 100644 gui/app/styles/view/new-doc.scss diff --git a/gui/app/components/folder/space-view.js b/gui/app/components/folder/space-view.js index b5cd8e64..2d08f063 100644 --- a/gui/app/components/folder/space-view.js +++ b/gui/app/components/folder/space-view.js @@ -118,18 +118,6 @@ export default Component.extend(AuthMixin, { }); }, - onImport() { - this.attrs.onRefresh(); - }, - - onStartDocument() { - this.set('showStartDocument', !this.get('showStartDocument')); - }, - - onHideStartDocument() { - this.set('showStartDocument', false); - }, - onDocumentFilter(filter, id) { let docs = this.get('documents'); let categories = this.get('categories'); diff --git a/gui/app/components/toolbar/for-space.js b/gui/app/components/toolbar/for-space.js index 6ae8f68c..8a729854 100644 --- a/gui/app/components/toolbar/for-space.js +++ b/gui/app/components/toolbar/for-space.js @@ -56,7 +56,7 @@ export default Component.extend(NotifierMixin, AuthMixin, { $('#add-space-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars schedule('afterRender', () => { - $("#new-space-name").focus(); + $("#new-document-name").focus(); }); }); }, @@ -86,11 +86,6 @@ export default Component.extend(NotifierMixin, AuthMixin, { folderId: this.get('space.id') }; - if (is.empty(pin.pin)) { - $('#pin-space-name').addClass('error').focus(); - return false; - } - this.get('pinned').pinItem(pin).then((pin) => { $('#pin-space-button').tooltip('dispose'); this.set('pinState.isPinned', true); @@ -149,6 +144,14 @@ export default Component.extend(NotifierMixin, AuthMixin, { $('#add-space-modal').modal('dispose'); this.attrs.onAddSpace(payload); + }, + + onImport() { + this.attrs.onRefresh(); + }, + + onHideStartDocument() { + // this.set('showStartDocument', false); } } }); diff --git a/gui/app/pods/folder/index/template.hbs b/gui/app/pods/folder/index/template.hbs index e9259b62..49ae0b59 100644 --- a/gui/app/pods/folder/index/template.hbs +++ b/gui/app/pods/folder/index/template.hbs @@ -1,7 +1,13 @@ {{layout/nav-bar}}
- {{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions onDeleteSpace=(action 'onDeleteSpace')}} + {{toolbar/for-space + spaces=model.folders + space=model.folder + permissions=model.permissions + templates=model.templates + onRefresh=(action 'onRefresh') + onDeleteSpace=(action 'onDeleteSpace')}} {{folder/space-view spaces=model.folders diff --git a/gui/app/styles/bootstrap.scss b/gui/app/styles/bootstrap.scss index e9716779..015ec751 100644 --- a/gui/app/styles/bootstrap.scss +++ b/gui/app/styles/bootstrap.scss @@ -45,12 +45,12 @@ $modal-footer-border-color: $color-white; } // rounded corners -$border-radius: .125rem; -$border-radius-lg: .15rem; -$border-radius-sm: .1rem; $border-radius: 0; $border-radius-lg: 0; $border-radius-sm: 0; +$border-radius: .125rem; +$border-radius-lg: .15rem; +$border-radius-sm: .1rem; // dropdown $dropdown-link-color: $color-off-black; diff --git a/gui/app/styles/view/common.scss b/gui/app/styles/view/common.scss index 1e3e88ef..800e1040 100644 --- a/gui/app/styles/view/common.scss +++ b/gui/app/styles/view/common.scss @@ -1,3 +1,7 @@ +.modal-content { + border: none !important; +} + .empty-state { text-align: center; margin: 0 auto; diff --git a/gui/app/styles/view/folder/all.scss b/gui/app/styles/view/folder/all.scss index 64e09e83..f26304ce 100644 --- a/gui/app/styles/view/folder/all.scss +++ b/gui/app/styles/view/folder/all.scss @@ -1,3 +1 @@ -@import "document.scss"; -@import "wizard.scss"; @import "settings.scss"; diff --git a/gui/app/styles/view/folder/document.scss b/gui/app/styles/view/folder/document.scss deleted file mode 100644 index 86e008f3..00000000 --- a/gui/app/styles/view/folder/document.scss +++ /dev/null @@ -1,24 +0,0 @@ - -.move-document-options { - height: 200px; - overflow-y: auto; - margin: 0; - padding: 0; - - > .option { - vertical-align: bottom; - cursor: pointer; - font-size: 0.9rem; - overflow: hidden; - white-space: nowrap; - - > .material-icons { - font-size: 0.9rem; - vertical-align: top; - } - } - - > .selected { - color: $color-link; - } -} diff --git a/gui/app/styles/view/folder/wizard.scss b/gui/app/styles/view/folder/wizard.scss deleted file mode 100644 index 31d4abfe..00000000 --- a/gui/app/styles/view/folder/wizard.scss +++ /dev/null @@ -1,101 +0,0 @@ -.new-document-wizard { - @include content-container(); - - .import-document-button { - width: 100%; - padding: 20px; - margin: 0 0 30px 0; - text-align: center; - color: $color-gray; - cursor: pointer; - font-size: 1.2rem; - line-height: 1.7rem; - @include ease-in(); - @extend .no-select; - border: 1px solid $color-stroke; - background-color: $color-off-white; - - &:hover { - border-color: $color-link; - color: $color-link; - } - - > .dz-preview, - .dz-processing { - display: none !important; - } - } - - > .input-control { - > .list-wrapper { - > .template-list { - margin: 0; - padding: 0; - - .item { - @include ease-in(); - @include border-radius(4px); - list-style: none; - cursor: pointer; - display: inline-block; - background-color: $color-blue; - margin: 0 20px 20px 0; - padding: 12px 0 0 20px; - width: 423px; - height: 60px; - position: relative; - - &:hover { - @include ease-in(); - border-color: $color-link; - - > .template-actions { - display: block; - } - } - - > .template-actions { - @include ease-in(); - display: none; - position: absolute; - top: 10px; - right: 8px; - - .material-icons { - color: $color-stroke; - font-size: 1rem; - } - } - - > .details { - width: 350px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - > .title { - font-size: 1rem; - font-weight: normal; - color: $color-white; - letter-spacing: 0.5px; - margin-top: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - > .desc { - color: $color-white; - font-size: 0.8rem; - margin-top: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } - } - } -} - diff --git a/gui/app/styles/view/new-doc.scss b/gui/app/styles/view/new-doc.scss new file mode 100644 index 00000000..f4941728 --- /dev/null +++ b/gui/app/styles/view/new-doc.scss @@ -0,0 +1,87 @@ +.new-document-wizard { + + > .import-zone { + .import-document-button { + width: 100%; + padding: 20px; + margin: 0 0 30px 0; + text-align: center; + color: $color-gray; + cursor: pointer; + font-size: 1.2rem; + line-height: 1.7rem; + @include ease-in(); + @extend .no-select; + border: 1px solid $color-stroke; + background-color: $color-off-white; + + &:hover { + border-color: $color-link; + color: $color-link; + } + + > .dz-preview, + .dz-processing { + display: none !important; + } + } + } + + > .fresh-zone { + > .template-list { + margin: 0; + padding: 0; + + .item { + @include ease-in(); + @include border-radius(4px); + list-style: none; + cursor: pointer; + display: block; + background-color: $color-blue; + margin: 0 20px 20px 0; + padding: 12px 0 0 20px; + height: 60px; + width: 100%; + position: relative; + + &:hover { + border-color: $color-link; + + > .template-actions { + display: block; + } + } + + > .template-actions { + display: none; + position: absolute; + top: 10px; + right: 8px; + + .material-icons { + color: $color-stroke; + font-size: 1rem; + } + } + + > .details { + > .title { + font-size: 1rem; + font-weight: normal; + color: $color-white; + letter-spacing: 0.5px; + margin-top: 0; + } + + > .desc { + color: $color-white; + font-size: 0.8rem; + margin-top: 5px; + } + } + } + } + } +} + diff --git a/gui/app/styles/view/views.scss b/gui/app/styles/view/views.scss index b88287f5..9547318e 100644 --- a/gui/app/styles/view/views.scss +++ b/gui/app/styles/view/views.scss @@ -1,2 +1,3 @@ @import "spaces.scss"; @import "space.scss"; +@import "new-doc.scss"; diff --git a/gui/app/templates/components/folder/space-view.hbs b/gui/app/templates/components/folder/space-view.hbs index 9f9799df..120e722e 100644 --- a/gui/app/templates/components/folder/space-view.hbs +++ b/gui/app/templates/components/folder/space-view.hbs @@ -1,4 +1,4 @@ -{{folder/space-heading space=space permissions=permissions}} +{{folder/space-heading space=space permissions=permissions }} {{#if hasCategories}}
@@ -33,6 +33,3 @@ {{folder/documents-list documents=filteredDocs spaces=spaces space=space templates=templates permissions=permissions onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}} - -{{folder/start-document folder=space templates=templates permissions=permissions - onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}} diff --git a/gui/app/templates/components/folder/start-document.hbs b/gui/app/templates/components/folder/start-document.hbs index 338fdd8a..b06ab571 100644 --- a/gui/app/templates/components/folder/start-document.hbs +++ b/gui/app/templates/components/folder/start-document.hbs @@ -1,48 +1,39 @@
-
- -
Provide a concise name for the new document
- {{focus-input type="text" id="new-document-name" value=newDocumentName class=(if newDocumentNameMissing 'document-name error-inline' 'document-name mousetrap') autocomplete="off"}} -
-
- close -
-
+
+
+ Click to select or drag-drop files
(doc, docx, md, markdown) +
-
- -
Start a blank document or pick a template
- -
-
    - {{#each savedTemplates key="id" as |template|}} -
  • - {{#if permissions.documentTemplate}} - {{#unless template.locked}} -
    - mode_edit -
    - {{/unless}} - {{/if}} -
    -
    {{template.title}}
    -
    {{template.description}}
    -
    -
    • - {{/each}} -
+
+ {{#each importStatus as |status|}} +

{{status}}

+ {{/each}}
-
- Alternatively, click to select or drag-drop files
(doc, docx, md, markdown) -
- -
- {{#each importStatus as |status|}} -

{{status}}

- {{/each}} +
+
+ + {{input type='text' id="new-document-name" class="form-control mousetrap" placeholder="Provide document name" value=newDocumentName class=(if newDocumentNameMissing 'document-name is-invalid' 'document-name mousetrap') autocomplete="off"}} +
+
    + {{#each savedTemplates key="id" as |template|}} +
  • + {{#if permissions.documentTemplate}} + {{#unless template.locked}} +
    + mode_edit +
    + {{/unless}} + {{/if}} +
    +
    {{template.title}}
    +
    {{template.description}}
    +
    +
    • + {{/each}} +
diff --git a/gui/app/templates/components/toolbar/for-space.hbs b/gui/app/templates/components/toolbar/for-space.hbs index c08a85d9..3db9bf8d 100644 --- a/gui/app/templates/components/toolbar/for-space.hbs +++ b/gui/app/templates/components/toolbar/for-space.hbs @@ -57,14 +57,11 @@