1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-05 05:25:27 +02:00

Outline framework in place

This commit is contained in:
Harvey Kandola 2018-05-18 20:11:24 +01:00
parent 4045197871
commit 942bc386f4
18 changed files with 752 additions and 177 deletions

View file

@ -0,0 +1,116 @@
// 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 { notEmpty } from '@ember/object/computed';
import { inject as service } from '@ember/service'
import ModalMixin from '../../mixins/modal';
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);
}
}
}
});

View file

@ -0,0 +1,116 @@
// 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 { notEmpty } from '@ember/object/computed';
import { inject as service } from '@ember/service'
import ModalMixin from '../../mixins/modal';
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);
}
}
}
});

View file

@ -0,0 +1,15 @@
// 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 Controller from '@ember/controller';
export default Controller.extend({
});

View file

@ -0,0 +1,15 @@
// 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 Route from '@ember/routing/route';
export default Route.extend({
});

View file

@ -0,0 +1,23 @@
{{#layout/top-bar}}
<li class="item">
{{#link-to "folders" class="link"}}SOMETHING{{/link-to}}
</li>
<li class="item">
{{#link-to "folders" class="link selected"}}Space X July 2019{{/link-to}}
</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>
</div>
</div>

View file

@ -145,6 +145,10 @@ export default Router.map(function () {
path: 'accounts'
});
this.route('theming', {
path: 'theming'
});
this.route('not-found', {
path: '/*wildcard'
});

View file

@ -19,6 +19,7 @@
@import "view/navigation.scss";
@import "view/toolbar.scss";
@import "view/views.scss";
@import "layout/all.scss";
@import "vendor.scss";
@import "print.scss";

View file

@ -0,0 +1,4 @@
@import "top-bar.scss";
@import "sidebar.scss";
@import "sub-nav.scss";

View file

@ -0,0 +1,8 @@
.sidebar {
height: calc(100vh - 50px);
// width: 300px;
width: 100%;
background-color: $color-gray-light3;
border-right: 1px solid $color-gray-light2;
padding: 30px 20px;
}

View file

View file

@ -0,0 +1,85 @@
#top-bar {
padding: 0 !important;
}
.top-bar {
background-color: $color-primary;
color: $color-white;
padding: 0 30px;
font-size: 1rem;
height: 50px;
> .items {
margin: 0;
padding: 0;
height: 50px;
> .item {
list-style: none;
display: inline-block;
margin: 0 30px 0 0;
padding: 0;
font-size: 1.2rem;
letter-spacing: 0.1rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
> .logo {
height: 35px;
width: 35px;
}
> .link, .link:visited {
@include ease-in();
color: $color-white;
&:hover {
color: darken($color-white, 15%);
}
}
> .selected {
background-color: $color-primary-light !important;
color: $color-primary !important;
padding: 5px 10px !important;
&:hover {
color: darken($color-primary, 15%) !important;
}
}
}
}
> .buttons {
height: 50px;
float: right;
> .button-icon-gap {
margin-left: 20px;
}
}
> .hamburger {
@include ease-in();
@include border-radius(3px);
background-color: $color-primary;
border: 1px solid $color-primary-light;
> i {
font-size: 1.8rem;
line-height: 2.1rem;
padding: 3px 5px 0 5px;
color: $color-primary-light;
cursor: pointer;
}
&:hover {
background-color: $color-primary-light;
> i {
color: $color-primary;
}
}
}
}

View file

@ -54,6 +54,9 @@
.page-toolbar,
.start-section,
.start-button,
#top-bar,
#sidebar,
#sub-nav,
.new-section-wizard {
float: none !important;
display: none !important;

View file

@ -0,0 +1,3 @@
<div id="sidebar" class="sidebar">
{{yield}}
</div>

View file

@ -0,0 +1,199 @@
<div id="top-bar" class="clearfix container-fluid">
<div class="row no-gutters">
<div class="col col-4 col-md-9">
<div class="top-bar d-none d-md-block">
<ul class="items d-flex flex-wrap 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">
{{#link-to "folders" class=(if (eq selectItem 'spaces') 'link selected' 'link')}}SPACES{{/link-to}}
</li>
{{/if}}
{{#if (eq appMeta.edition 'Enterprise')}}
<li class="item">
{{#link-to "folders" class=(if (eq selectItem 'spaces') 'link selected' 'link')}}SPACES{{/link-to}}
</li>
{{#if session.viewDashboard}}
<li class="item">
{{#link-to "dashboard" class=(if (eq selectItem 'dashboard') 'link selected' 'link')}}ACTIONS{{/link-to}}
</li>
{{/if}}
{{#if session.viewAnalytics}}
<li class="item">
{{#link-to "analytics" class=(if (eq selectItem 'analytics') 'link selected' 'link')}}ANALYTICS{{/link-to}}
</li>
{{/if}}
{{/if}}
{{yield}}
</ul>
</div>
<div class="top-bar d-md-none dropdown d-flex flex-wrap 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>
</div>
<div class="dropdown-menu" aria-labelledby="top-nav-hamburger">
{{#if (eq appMeta.edition 'Community')}}
{{#link-to "folders" class="dropdown-item"}}Spaces{{/link-to}}
{{#link-to "folders" class="dropdown-item"}}Spaces{{/link-to}}
{{#link-to "folders" class="dropdown-item"}}Spaces{{/link-to}}
{{/if}}
{{#if (eq appMeta.edition 'Enterprise')}}
{{#link-to "folders" class="dropdown-item"}}Spaces{{/link-to}}
{{#if session.viewDashboard}}
{{#link-to "dashboard" class="dropdown-item"}}Actions{{/link-to}}
{{/if}}
{{#if session.viewAnalytics}}
{{#link-to "analytics" class="dropdown-item"}}Analytics{{/link-to}}
{{/if}}
{{/if}}
</div>
</div>
</div>
<div class="col col-8 col-md-3">
<div class="top-bar">
<div class="buttons d-flex flex-wrap align-items-center">
<div class="btn-group">
{{#link-to "search" class="button-icon-white" }}
<i class="material-icons">search</i>
{{/link-to}}
</div>
{{#if session.authenticated}}
{{#if hasPins}}
<div class="button-icon-gap" />
<div class="btn-group">
<div class="button-icon-white" id="user-pins-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">star</i>
</div>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-pins-button">
{{#if hasSpacePins}}
<h6 class="dropdown-header">Spaces</h6>
{{#each spacePins as |pin|}}
<a class="dropdown-item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
{{/each}}
{{/if}}
{{#if hasDocumentPins}}
<h6 class="dropdown-header">Documents</h6>
{{#each documentPins as |pin|}}
<a class="dropdown-item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
{{/each}}
{{/if}}
</div>
</div>
{{/if}}
<div class="button-icon-gap" />
<div class="btn-group">
<div class="button-gravatar-white align-text-bottom" id="profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{session.user.initials}}
{{#if hasWhatsNew}}
<div class="whats-new-dot" />
{{/if}}
{{#if session.isGlobalAdmin}}
{{#if appMeta.updateAvailable}}
<div class="update-available-dot" />
{{/if}}
{{/if}}
</div>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="profile-button">
{{#link-to 'profile' class="dropdown-item" }}Profile{{/link-to}}
{{#if session.isAdmin}}
{{#link-to 'customize.general' class="dropdown-item" }}Settings{{/link-to}}
{{/if}}
<div class="dropdown-divider"></div>
{{#if session.isGlobalAdmin}}
{{#if appMeta.updateAvailable}}
{{#link-to 'customize.license' class="dropdown-item font-weight-bold color-orange" }}Update available{{/link-to}}
{{/if}}
{{/if}}
<a href="#" class="dropdown-item {{if hasWhatsNew 'color-whats-new font-weight-bold'}}" {{action 'onShowWhatsNewModal'}}>What's New</a>
<a href="https://docs.documize.com" target="_blank" class="dropdown-item">Help</a>
<a href="#" class="dropdown-item" data-toggle="modal" data-target="#about-documize-modal" data-backdrop="static">About</a>
{{#if enableLogout}}
<div class="dropdown-divider"></div>
{{#link-to 'auth.logout' class="dropdown-item" }}Logout{{/link-to}}
{{/if}}
</div>
</div>
{{else}}
<div class="button-icon-gap" />
<div class="btn-group">
{{#link-to 'auth.login' class="button-icon-white " }}
<i class="material-icons">lock_open</i>
{{/link-to}}
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{#if session.authenticated}}
<div id="whats-new-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-header modal-header-white">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" data-dismiss="modal" aria-label="Close">&times;</span>
</button>
</div>
<div class="modal-content">
<div class="modal-body">
<div class="product-news">
<h2>What's New</h2>
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="about-documize-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="product-about">
<div class="edition">
Documize {{appMeta.edition}} Edition
</div>
<div class="version">
{{appMeta.version}}
</div>
<div class="dotcom">
<a href="https://documize.com">https://documize.com</a>
</div>
{{#if (eq appMeta.edition 'Community')}}
<div class="copyright">
&copy; Documize Inc. All rights reserved.
</div>
<div class="license">
<br/>
<br/> This software (Documize Community Edition) is licensed under
<a href="http://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPL v3</a>
You can operate outside the AGPL restrictions by purchasing Documize Enterprise Edition and obtaining a commercial licenseby
contacting
<a href="mailto:sales@documize.com">sales@documize.com</a>
</div>
{{/if}}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{/if}}