mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
new layout implementation
This commit is contained in:
parent
4ceddfc1f3
commit
10afc1c5dc
18 changed files with 147 additions and 127 deletions
|
@ -10,5 +10,7 @@
|
|||
// https://documize.com
|
||||
|
||||
import Ember from 'ember';
|
||||
import stringUtil from '../utils/string';
|
||||
|
||||
export default Ember.Component.extend({});
|
||||
export default Ember.Component.extend({
|
||||
});
|
16
app/app/components/back-to-space.js
Normal file
16
app/app/components/back-to-space.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
// 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 Ember from 'ember';
|
||||
import stringUtil from '../utils/string';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
});
|
|
@ -41,6 +41,10 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
|
|||
},
|
||||
|
||||
positionTool() {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let s = $(".scroll-tool");
|
||||
let windowpos = $(window).scrollTop();
|
||||
|
||||
|
|
|
@ -71,6 +71,10 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
},
|
||||
|
||||
positionTool() {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let s = $(".scroll-space-tool");
|
||||
let windowpos = $(window).scrollTop();
|
||||
|
||||
|
|
|
@ -1,12 +1,8 @@
|
|||
{{#layout/zone-container}}
|
||||
|
||||
{{layout/zone-navigation}}
|
||||
|
||||
{{#layout/zone-header title="Documize Settings" message="General options, space management, user management"}}
|
||||
{{layout/button-home}}
|
||||
{{/layout/zone-header}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{back-to-home}}
|
||||
<div class="sidebar-menu">
|
||||
<ul class="options">
|
||||
{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
|
||||
|
|
|
@ -3,13 +3,7 @@
|
|||
{{layout/zone-navigation}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{#link-to 'folders.folder' model.id model.slug}}
|
||||
<div class="regular-button button-white">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">space</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
|
||||
{{back-to-space document=model folder=model}}
|
||||
<div class="sidebar-menu">
|
||||
<ul class="options">
|
||||
<li class="option {{if tabGeneral "selected"}}" {{action 'selectTab' 'tabGeneral'}}>General</li>
|
||||
|
|
|
@ -2,11 +2,8 @@
|
|||
|
||||
{{layout/zone-navigation}}
|
||||
|
||||
{{#layout/zone-header title=session.user.fullname message="Your Documize profile"}}
|
||||
{{layout/button-home}}
|
||||
{{/layout/zone-header}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{back-to-home}}
|
||||
<div class="sidebar-menu">
|
||||
<div class="avatar-large">{{session.user.initials}}</div>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
@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";
|
||||
|
@ -27,6 +26,7 @@
|
|||
@import "view/document/wysiwyg.scss";
|
||||
@import "view/document/editor.scss";
|
||||
@import "view/document/wizard.scss";
|
||||
@import "view/common.scss";
|
||||
@import "vendor.scss";
|
||||
@import "responsive.scss";
|
||||
@import "print.scss";
|
||||
|
|
21
app/app/styles/view/common.scss
Normal file
21
app/app/styles/view/common.scss
Normal file
|
@ -0,0 +1,21 @@
|
|||
.space-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.space-name {
|
||||
max-width: 90%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.back-to-home-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.back-to-home-name {
|
||||
max-width: 90%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
|
@ -1,19 +1,7 @@
|
|||
.document-sidebar {
|
||||
@extend .no-select;
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
|
||||
.space-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.space-name {
|
||||
max-width: 90%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .summary-line {
|
||||
color: $color-gray;
|
||||
margin: 30px 0;
|
||||
|
|
|
@ -91,31 +91,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .zone-header {
|
||||
// background-color: $color-header;
|
||||
// padding: 0 40px 0 40px;
|
||||
// > .info {
|
||||
// padding: 20px 0 20px 0;
|
||||
// > .title {
|
||||
// color: $color-off-black;
|
||||
// font-size: 1.2rem;
|
||||
// }
|
||||
// > .message {
|
||||
// color: $color-gray;
|
||||
// font-size: 1rem;
|
||||
// margin: 10px 0 0 5px;
|
||||
// }
|
||||
// }
|
||||
// > .actions {
|
||||
// padding: 20px 0 20px 0;
|
||||
// }
|
||||
// }
|
||||
.zone-header {
|
||||
background-color: $color-header;
|
||||
padding: 0 40px 0 40px;
|
||||
> .info {
|
||||
padding: 20px 0 20px 0;
|
||||
> .title {
|
||||
color: $color-off-black;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
> .message {
|
||||
color: $color-gray;
|
||||
font-size: 1rem;
|
||||
margin: 10px 0 0 5px;
|
||||
}
|
||||
}
|
||||
> .actions {
|
||||
padding: 20px 0 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zone-sidebar {
|
||||
background-color: $color-header;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 0 40px 0 40px;
|
||||
padding: 40px 40px 0 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.sidebar-menu {
|
||||
margin: 30px 0;
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
> .options {
|
||||
padding: 0;
|
||||
|
@ -11,7 +11,7 @@
|
|||
list-style: none;
|
||||
cursor: pointer;
|
||||
@extend .no-select;
|
||||
color: $color-gray;
|
||||
color: $color-off-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
|
|
6
app/app/templates/components/back-to-home.hbs
Normal file
6
app/app/templates/components/back-to-home.hbs
Normal file
|
@ -0,0 +1,6 @@
|
|||
{{#link-to 'application' }}
|
||||
<div class="regular-button button-white back-to-home-button">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name back-to-home-name">home</div>
|
||||
</div>
|
||||
{{/link-to}}
|
6
app/app/templates/components/back-to-space.hbs
Normal file
6
app/app/templates/components/back-to-space.hbs
Normal file
|
@ -0,0 +1,6 @@
|
|||
{{#link-to 'folders.folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-white space-button">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name space-name">{{folder.name}}</div>
|
||||
</div>
|
||||
{{/link-to}}
|
|
@ -1,10 +1,5 @@
|
|||
<div class="document-sidebar">
|
||||
{{#link-to 'folders.folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-white space-button">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name space-name">{{folder.name}}</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
{{back-to-space document=model folder=folder}}
|
||||
|
||||
{{#if session.authenticated}}
|
||||
<div class="summary-line hidden-xs hidden-sm">
|
||||
|
|
|
@ -1,39 +1,52 @@
|
|||
<div class="sidebar-menu">
|
||||
|
||||
{{#if session.isEditor}}
|
||||
<div id="add-space-button" class="regular-button button-white" data-tooltip="Share" data-tooltip-position="top center">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">Space</div>
|
||||
</div>
|
||||
{{#dropdown-dialog target="add-space-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>New space</label>
|
||||
<div class="tip">A repository for related documentation</div>
|
||||
{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
|
||||
</div>
|
||||
{{#if session.isEditor}}
|
||||
<div id="add-space-button" class="regular-button button-white" data-tooltip="Share" data-tooltip-position="top center">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">Space</div>
|
||||
</div>
|
||||
{{#dropdown-dialog target="add-space-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>New space</label>
|
||||
<div class="tip">A repository for related documentation</div>
|
||||
{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
|
||||
<div class="folders-list">
|
||||
<div id="new-document" class="round-button button-green doc-tool" data-tooltip="New space" data-tooltip-position="top center">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
|
||||
{{#if showScrollTool}}
|
||||
<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
|
||||
<i class="material-icons color-gray">vertical_align_top</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="folders-list">
|
||||
<div id="new-document" class="round-button button-green doc-tool" data-tooltip="New space" data-tooltip-position="top center">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
|
||||
{{#if showScrollTool}}
|
||||
<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
|
||||
<i class="material-icons color-gray">vertical_align_top</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="section">
|
||||
<div class="heading">EVERYONE</div>
|
||||
{{#unless hasPublicFolders}}
|
||||
<div class="message margin-left-15">No global spaces</div>
|
||||
{{/unless}}
|
||||
<ul class="list">
|
||||
{{#each publicFolders as |folder|}}
|
||||
{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
|
||||
<li class="item">{{ folder.name }}</li>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{#if session.authenticated}}
|
||||
<div class="section">
|
||||
<div class="heading">EVERYONE</div>
|
||||
{{#unless hasPublicFolders}}
|
||||
<div class="message margin-left-15">No global spaces</div>
|
||||
<div class="heading">TEAM</div>
|
||||
{{#unless hasProtectedFolders}}
|
||||
<div class="message margin-left-15">No protected spaces</div>
|
||||
{{/unless}}
|
||||
<ul class="list">
|
||||
{{#each publicFolders as |folder|}}
|
||||
{{#each protectedFolders as |folder|}}
|
||||
{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
|
||||
<li class="item">{{ folder.name }}</li>
|
||||
{{/link-to}}
|
||||
|
@ -41,38 +54,22 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
{{#if session.authenticated}}
|
||||
<div class="section">
|
||||
<div class="heading">TEAM</div>
|
||||
{{#unless hasProtectedFolders}}
|
||||
<div class="message margin-left-15">No protected spaces</div>
|
||||
{{/unless}}
|
||||
<ul class="list">
|
||||
{{#each protectedFolders as |folder|}}
|
||||
{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
|
||||
<li class="item">{{ folder.name }}</li>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="heading">PERSONAL</div>
|
||||
{{#unless hasPrivateFolders}}
|
||||
<div class="message margin-left-15">No private spaces</div>
|
||||
{{/unless}}
|
||||
<ul class="list">
|
||||
{{#each privateFolders as |folder|}}
|
||||
{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
|
||||
<li class="item">{{ folder.name }}</li>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="copyright hidden-xs hidden-sm">
|
||||
<a href="https://documize.com?ref=app-footer" target="_blank">Copyright © 2016 Documize Inc.</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="heading">PERSONAL</div>
|
||||
{{#unless hasPrivateFolders}}
|
||||
<div class="message margin-left-15">No private spaces</div>
|
||||
{{/unless}}
|
||||
<ul class="list">
|
||||
{{#each privateFolders as |folder|}}
|
||||
{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
|
||||
<li class="item">{{ folder.name }}</li>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="copyright hidden-xs hidden-sm">
|
||||
<a href="https://documize.com?ref=app-footer" target="_blank">Copyright © 2016 Documize Inc.</a>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
{{#link-to 'application'}}
|
||||
<div class="regular-button button-white">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">home</div>
|
||||
</div>
|
||||
{{/link-to}}
|
Loading…
Add table
Add a link
Reference in a new issue