1
0
Fork 0
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:
Harvey Kandola 2016-10-06 17:56:16 -07:00
parent 4ceddfc1f3
commit 10afc1c5dc
18 changed files with 147 additions and 127 deletions

View file

@ -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({
});

View 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({
});

View file

@ -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();

View file

@ -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();

View file

@ -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}}

View file

@ -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>

View file

@ -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>

View file

@ -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";

View 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;
}

View file

@ -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;

View file

@ -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;
}

View file

@ -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;

View 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}}

View 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}}

View file

@ -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">

View file

@ -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&nbsp;&copy;&nbsp;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&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
</div>

View file

@ -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}}