mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
Provide the basic layout framework for UX/UI
This commit is contained in:
Harvey Kandola
parent
942bc386f4
commit
eb7ebf391d
18 changed files with 212 additions and 141 deletions
18
gui/app/components/layout/bottom-bar.js
Normal file
18
gui/app/components/layout/bottom-bar.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. 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 <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
// import $ from 'jquery';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['layout-footer'],
|
||||
tagName: 'footer'
|
||||
});
|
||||
18
gui/app/components/layout/content-area.js
Normal file
18
gui/app/components/layout/content-area.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. 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 <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
// import $ from 'jquery';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['layout-content'],
|
||||
tagName: 'article'
|
||||
});
|
||||
|
|
@ -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'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -7,17 +7,54 @@
|
|||
</li>
|
||||
{{/layout/top-bar}}
|
||||
|
||||
<div class="container-fluids">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-3 d-none d-md-block">
|
||||
{{#layout/side-bar}}
|
||||
<h1>ddd</h1>
|
||||
{{/layout/side-bar}}
|
||||
</div>
|
||||
<div class="col-9">
|
||||
content
|
||||
</div>
|
||||
<main class="layout-body">
|
||||
{{#layout/content-area}}
|
||||
<h1>How to install this</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
{{/layout/content-area}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{#layout/side-bar}}
|
||||
<h1>Hello Sidebar</h1>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
<p>Something</p>
|
||||
{{/layout/side-bar}}
|
||||
</main>
|
||||
|
||||
{{#layout/bottom-bar}}
|
||||
Hello
|
||||
{{/layout/bottom-bar}}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
9
gui/app/styles/layout/layout-footer.scss
Normal file
9
gui/app/styles/layout/layout-footer.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
73
gui/app/styles/layout/layout-master.scss
Normal file
73
gui/app/styles/layout/layout-master.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
13
gui/app/styles/layout/layout-sidebar.scss
Normal file
13
gui/app/styles/layout/layout-sidebar.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
3
gui/app/templates/components/layout/bottom-bar.hbs
Normal file
3
gui/app/templates/components/layout/bottom-bar.hbs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<div class="footer">
|
||||
{{yield}}
|
||||
</div>
|
||||
2
gui/app/templates/components/layout/content-area.hbs
Normal file
2
gui/app/templates/components/layout/content-area.hbs
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{{yield}}
|
||||
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<div id="sidebar" class="sidebar">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div id="top-bar" class="clearfix container-fluid">
|
||||
<div class="row no-gutters">
|
||||
|
||||
<div class="col col-4 col-md-9">
|
||||
<div class="col col-6 col-md-9">
|
||||
<div class="top-bar d-none d-md-block">
|
||||
<ul class="items d-flex flex-wrap align-items-center">
|
||||
<ul class="items d-flex align-items-center">
|
||||
<li class="item"><img class="logo" src="/assets/img/icon-white-64x64.png" /></li>
|
||||
{{#if (eq appMeta.edition 'Community')}}
|
||||
<li class="item">
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="top-bar d-md-none dropdown d-flex flex-wrap align-items-center">
|
||||
<div class="top-bar d-md-none dropdown d-flex align-items-center">
|
||||
<div class="hamburger" id="top-nav-hamburger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">view_headline</i>
|
||||
<i class="material-icons">menu</i>
|
||||
</div>
|
||||
<div class="dropdown-menu" aria-labelledby="top-nav-hamburger">
|
||||
{{#if (eq appMeta.edition 'Community')}}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-8 col-md-3">
|
||||
<div class="col col-6 col-md-3">
|
||||
<div class="top-bar">
|
||||
<div class="buttons d-flex flex-wrap align-items-center">
|
||||
<div class="btn-group">
|
||||
|
|
@ -133,7 +133,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{#if session.authenticated}}
|
||||
<div id="whats-new-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue