diff --git a/gui/app/components/layout/bottom-bar.js b/gui/app/components/layout/bottom-bar.js new file mode 100644 index 00000000..53d32cf2 --- /dev/null +++ b/gui/app/components/layout/bottom-bar.js @@ -0,0 +1,18 @@ +// 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 $ from 'jquery'; +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['layout-footer'], + tagName: 'footer' +}); diff --git a/gui/app/components/layout/content-area.js b/gui/app/components/layout/content-area.js new file mode 100644 index 00000000..4bcd425f --- /dev/null +++ b/gui/app/components/layout/content-area.js @@ -0,0 +1,18 @@ +// 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 $ from 'jquery'; +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['layout-content'], + tagName: 'article' +}); diff --git a/gui/app/components/layout/side-bar.js b/gui/app/components/layout/side-bar.js index 1c2fcaf4..731dbe9b 100644 --- a/gui/app/components/layout/side-bar.js +++ b/gui/app/components/layout/side-bar.js @@ -9,108 +9,10 @@ // // https://documize.com -import $ from 'jquery'; -import { notEmpty } from '@ember/object/computed'; -import { inject as service } from '@ember/service' -import ModalMixin from '../../mixins/modal'; +// import $ from 'jquery'; import Component from '@ember/component'; -export default Component.extend(ModalMixin, { - folderService: service('folder'), - appMeta: service(), - session: service(), - store: service(), - pinned: service(), - enableLogout: true, - hasPins: notEmpty('pins'), - hasSpacePins: notEmpty('spacePins'), - hasDocumentPins: notEmpty('documentPins'), - hasWhatsNew: false, - newsContent: '', - - init() { - this._super(...arguments); - let constants = this.get('constants'); - - this.pins = []; - - if (this.get('appMeta.authProvider') === constants.AuthProvider.Keycloak) { - let config = this.get('appMeta.authConfig'); - config = JSON.parse(config); - this.set('enableLogout', !config.disableLogout); - } - - this.get('session').hasWhatsNew().then((v) => { - this.set('hasWhatsNew', v); - }); - - let version = this.get('appMeta.version'); - let edition = this.get('appMeta.edition').toLowerCase(); - - let self = this; - let cacheBuster = + new Date(); - $.ajax({ - url: `https://storage.googleapis.com/documize/news/${edition}/${version}.html?cb=${cacheBuster}`, - type: 'GET', - dataType: 'html', - success: function (response) { - if (self.get('isDestroyed') || self.get('isDestroying')) return; - self.set('newsContent', response); - } - }); - }, - - didInsertElement() { - this._super(...arguments); - - if (this.get("session.authenticated")) { - this.eventBus.subscribe('pinChange', this, 'setupPins'); - this.setupPins(); - } - }, - - setupPins() { - if (this.get('isDestroyed') || this.get('isDestroying')) return; - - this.get('pinned').getUserPins().then((pins) => { - if (this.get('isDestroyed') || this.get('isDestroying')) { - return; - } - this.set('pins', pins); - this.set('spacePins', pins.filterBy('isSpace', true)); - this.set('documentPins', pins.filterBy('isDocument', true)); - }); - }, - - willDestroyElement() { - this._super(...arguments); - - this.eventBus.unsubscribe('pinChange'); - }, - - actions: { - jumpToPin(pin) { - let folderId = pin.get('folderId'); - let documentId = pin.get('documentId'); - - if (_.isEmpty(documentId)) { - // jump to space - let folder = this.get('store').peekRecord('folder', folderId); - this.get('router').transitionTo('folder', folderId, folder.get('slug')); - } else { - // jump to doc - let folder = this.get('store').peekRecord('folder', folderId); - this.get('router').transitionTo('document', folderId, folder.get('slug'), documentId, 'document'); - } - }, - - onShowWhatsNewModal() { - this.modalOpen("#whats-new-modal", { "show": true }); - - if (this.get('newsContent.length') > 0) { - this.get('session').seenNewVersion(); - this.set('hasWhatsNew', false); - } - } - } +export default Component.extend({ + classNames: ['layout-sidebar'], + tagName: 'nav' }); diff --git a/gui/app/components/layout/top-bar.js b/gui/app/components/layout/top-bar.js index 1c2fcaf4..0117470f 100644 --- a/gui/app/components/layout/top-bar.js +++ b/gui/app/components/layout/top-bar.js @@ -16,6 +16,8 @@ import ModalMixin from '../../mixins/modal'; import Component from '@ember/component'; export default Component.extend(ModalMixin, { + classNames: ['layout-header'], + tagName: 'header', folderService: service('folder'), appMeta: service(), session: service(), diff --git a/gui/app/pods/theming/template.hbs b/gui/app/pods/theming/template.hbs index 1c92cfec..60e42df8 100644 --- a/gui/app/pods/theming/template.hbs +++ b/gui/app/pods/theming/template.hbs @@ -7,17 +7,54 @@ {{/layout/top-bar}} -
-
-
- {{#layout/side-bar}} -

ddd

- {{/layout/side-bar}} -
-
- content -
+
+ {{#layout/content-area}} +

How to install this

+

+ Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. +

+

+ Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. +

+

+ Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. +

+

+ Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. +

+

+ Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. +

+

+ Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. +

+

+ Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. +

+

+ Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. +

+

+ Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. +

+

+ Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. +

+ {{/layout/content-area}} -
-
+ {{#layout/side-bar}} +

Hello Sidebar

+

Something

+

Something

+

Something

+

Something

+

Something

+

Something

+

Something

+

Something

+ {{/layout/side-bar}} + +{{#layout/bottom-bar}} + Hello +{{/layout/bottom-bar}} \ No newline at end of file diff --git a/gui/app/styles/base.scss b/gui/app/styles/base.scss index 5001429e..7727b99b 100644 --- a/gui/app/styles/base.scss +++ b/gui/app/styles/base.scss @@ -10,20 +10,21 @@ // https://documize.com html { - height: 100%; - width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-overflow-style: -ms-autohiding-scrollbar; + text-rendering: optimizeLegibility; + height: 100%; + width: 100%; overflow-y: scroll; font-size: 0.875rem; } body { + display: flex; height: 100%; - min-height: 100%; - width: 100%; - // overflow-y: scroll; + // height: 100vh; + flex-direction: column; } a { diff --git a/gui/app/styles/color.scss b/gui/app/styles/color.scss index ce02be2e..c51ce3ad 100644 --- a/gui/app/styles/color.scss +++ b/gui/app/styles/color.scss @@ -16,8 +16,8 @@ $color-primary-light: #E6F1F8; $color-link: #348A37; // theme purple -// $color-primary: #280A42; -// $color-primary-light: #F7F2FF; +$color-primary: #280A42; +$color-primary-light: #F7F2FF; // black, white $color-black: #000000; diff --git a/gui/app/styles/layout/all.scss b/gui/app/styles/layout/all.scss index 2138d8c5..6fe5e9ce 100644 --- a/gui/app/styles/layout/all.scss +++ b/gui/app/styles/layout/all.scss @@ -1,4 +1,5 @@ -@import "top-bar.scss"; -@import "sidebar.scss"; -@import "sub-nav.scss"; +@import "layout-master.scss"; +@import "layout-topbar.scss"; +@import "layout-sidebar.scss"; +@import "layout-footer.scss"; diff --git a/gui/app/styles/layout/layout-footer.scss b/gui/app/styles/layout/layout-footer.scss new file mode 100644 index 00000000..42e8d704 --- /dev/null +++ b/gui/app/styles/layout/layout-footer.scss @@ -0,0 +1,9 @@ +.footer { + background-color: $color-off-white; + background-color: $color-primary-light; + // border-top: 1px solid $color-gray-light2; + color: $color-gray; + font-weight: 500; + font-size: 0.9rem; + padding: 10px 2rem; +} diff --git a/gui/app/styles/layout/layout-master.scss b/gui/app/styles/layout/layout-master.scss new file mode 100644 index 00000000..4054b915 --- /dev/null +++ b/gui/app/styles/layout/layout-master.scss @@ -0,0 +1,73 @@ +.layout-header, +.layout-footer { + flex: 0 0 auto; +} + +.layout-body { + display: flex; + flex: 1 0 auto; + flex-direction: column; + padding: 2rem; +} + +.layout-content { + margin-top: 2rem; +} + +.layout-sidebar { + order: -1; + background-color: $color-gray-light2; + padding: 1rem; +} + +footer { + margin: auto auto 0 auto; + position: sticky; + bottom: 0; +} + +@media (min-width: 720px) { + .layout-body { + flex-direction: row; + } + + .layout-content { + flex: 1; + padding: 0 2rem; + margin: 0; + } + + .layout-sidebar { + flex: 0 0 20rem; + height: calc(100vh - 145px); + overflow-x: hidden; + overflow-y: scroll; + } +} + +@media (min-width: 1200px) { + .layout-sidebar { + flex: 0 0 30rem; + } + + .layout-content { + padding: 0 2rem 0 3rem; + } +} + +@media (min-width: 1800px) { + .layout-sidebar { + flex: 0 0 35rem; + } + + .layout-content { + padding: 0 2rem 0 4rem; + } +} + +@media (max-width: 576px) { + footer { + position: relative; + bottom: auto; + } +} diff --git a/gui/app/styles/layout/layout-sidebar.scss b/gui/app/styles/layout/layout-sidebar.scss new file mode 100644 index 00000000..a259c456 --- /dev/null +++ b/gui/app/styles/layout/layout-sidebar.scss @@ -0,0 +1,13 @@ +.sidebar { + padding: 2rem; + background-color: $color-white; + // border: 1px solid $color-border; + // @include border-radius(4px); + + // @include border-radius(4px); + // border: 1px solid $color-gray-light2; + // padding: 1rem; + // // padding: 30px 20px; + // height: calc(100vh - 145px); + // width: 350px; +} diff --git a/gui/app/styles/layout/top-bar.scss b/gui/app/styles/layout/layout-topbar.scss similarity index 94% rename from gui/app/styles/layout/top-bar.scss rename to gui/app/styles/layout/layout-topbar.scss index 90dced91..f3bc0e48 100644 --- a/gui/app/styles/layout/top-bar.scss +++ b/gui/app/styles/layout/layout-topbar.scss @@ -5,7 +5,7 @@ .top-bar { background-color: $color-primary; color: $color-white; - padding: 0 30px; + padding: 0 2rem; font-size: 1rem; height: 50px; @@ -69,9 +69,10 @@ > i { font-size: 1.8rem; line-height: 2.1rem; - padding: 3px 5px 0 5px; + padding: 0px 3px 0px 3px; color: $color-primary-light; cursor: pointer; + vertical-align: sub; } &:hover { diff --git a/gui/app/styles/layout/sidebar.scss b/gui/app/styles/layout/sidebar.scss deleted file mode 100644 index 6d5750c7..00000000 --- a/gui/app/styles/layout/sidebar.scss +++ /dev/null @@ -1,8 +0,0 @@ -.sidebar { - height: calc(100vh - 50px); - // width: 300px; - width: 100%; - background-color: $color-gray-light3; - border-right: 1px solid $color-gray-light2; - padding: 30px 20px; -} diff --git a/gui/app/styles/layout/sub-nav.scss b/gui/app/styles/layout/sub-nav.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/gui/app/templates/components/layout/bottom-bar.hbs b/gui/app/templates/components/layout/bottom-bar.hbs new file mode 100644 index 00000000..a45dae2c --- /dev/null +++ b/gui/app/templates/components/layout/bottom-bar.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/gui/app/templates/components/layout/content-area.hbs b/gui/app/templates/components/layout/content-area.hbs new file mode 100644 index 00000000..c23f542a --- /dev/null +++ b/gui/app/templates/components/layout/content-area.hbs @@ -0,0 +1,2 @@ +{{yield}} + diff --git a/gui/app/templates/components/layout/side-bar.hbs b/gui/app/templates/components/layout/side-bar.hbs index 6b6eab9c..74d31843 100644 --- a/gui/app/templates/components/layout/side-bar.hbs +++ b/gui/app/templates/components/layout/side-bar.hbs @@ -1,3 +1,3 @@ \ No newline at end of file + diff --git a/gui/app/templates/components/layout/top-bar.hbs b/gui/app/templates/components/layout/top-bar.hbs index 8f1b9234..7975b7b9 100644 --- a/gui/app/templates/components/layout/top-bar.hbs +++ b/gui/app/templates/components/layout/top-bar.hbs @@ -1,9 +1,9 @@
-
+
-
    +
      • {{#if (eq appMeta.edition 'Community')}}
    • @@ -29,9 +29,9 @@
-
+
{{#if (eq appMeta.edition 'Community')}} @@ -52,7 +52,7 @@
-
+
@@ -133,7 +133,6 @@
- {{#if session.authenticated}}