1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-21 22:29:41 +02:00

Make Login action more prominent

Closes #247
This commit is contained in:
Harvey Kandola 2019-05-20 15:21:33 +01:00
parent 62c3cd03ad
commit 14f313a836
25 changed files with 499 additions and 358 deletions

View file

@ -17,7 +17,6 @@ import AuthMixin from '../../mixins/auth';
import Component from '@ember/component';
export default Component.extend(AuthMixin, {
classNames: ["section"],
router: service(),
documentService: service('document'),
folderService: service('folder'),

View file

@ -0,0 +1,17 @@
// 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 Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-grid-container'],
});

View file

@ -0,0 +1,17 @@
// 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 Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-content'],
});

View file

@ -0,0 +1,17 @@
// 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 Component from '@ember/component';
export default Component.extend({
tagName: 'div',
classNames: ['master-sidebar'],
});

View file

@ -341,6 +341,7 @@ let constants = EmberObject.extend({
Invite: 'Invite',
Join: 'Join',
Leave: 'Leave',
Login: 'Login',
Move: 'Move',
Next: 'Next',
OK: 'OK',

View file

@ -1,6 +1,17 @@
{{#layout/master-sidebar selectedItem="settings"}}
<Ui::UiSpacer @size=300 />
<Layout::MasterNavigation @selectedItem="settings" />
<Layout::MasterToolbar>
<div class="zone-1" />
<div class="zone-2">
<div class="label color-gray-700">
Documize {{appMeta.edition}} Edition {{appMeta.version}} (build {{appMeta.revision}})
</div>
</div>
<div class="zone-3" />
</Layout::MasterToolbar>
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">administration</div>
<div class="list">
@ -64,8 +75,9 @@
{{/link-to}}
</div>
</div>
{{/layout/master-sidebar}}
{{#layout/master-content}}
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{outlet}}
{{/layout/master-content}}
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,4 +1,12 @@
{{#layout/master-sidebar}}
<Layout::MasterNavigation />
<Layout::MasterToolbar>
<div class="zone-1" />
<div class="zone-2" />
<div class="zone-3">
</div>
</Layout::MasterToolbar>
<Layout::Grid::Container>
{{folder/space-sidebar
spaces=model.folders
space=model.folder
@ -17,7 +25,41 @@
categoryFilter=category
onFiltered=(action "onFiltered")
onRefresh=(action "onRefresh")}}
{{/layout/master-sidebar}}
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">ABOUT</div>
<div class="text">
Documize product updates are released frequently for both
cloud and self-hosted customers.
</div>
<div class="text">
Have an idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates"
icon=constants.Icon.Announce}}
<div class="product-news">
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
</Layout::Grid::Content>
</Layout::Grid::Container>
{{#layout/master-content}}
<div class="grid-container-6-4">

View file

@ -1,9 +1,7 @@
<Layout::MasterNavigation @selectedItem="spaces" />
<Layout::MasterToolbar>
<div class="zone-1">
</div>
<div class="zone-2">
</div>
<div class="zone-1" />
<div class="zone-2" />
<div class="zone-3">
{{#if (or session.isEditor session.isAdmin)}}
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}}
@ -16,13 +14,9 @@
</div>
</Layout::MasterToolbar>
<div class="master-container">
<div class="master-sidebar">
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
{{yield}}
<Ui::UiSpacer @size=300 />
<div class="section">
<div class="title">filter</div>
<div class="list">
@ -67,11 +61,10 @@
{{/if}}
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<div class="master-content">
<Layout::Grid::Content>
{{layout/logo-heading title=appMeta.title desc=appMeta.message logo=true}}
<Ui::UiSpacer @size=400 />
{{spaces/space-list spaces=selectedSpaces labels=labels}}
@ -140,9 +133,5 @@
</div>
</div>
</div>
</div>
</div>
<Layout::MasterContent>
</Layout::MasterContent>
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,11 +1,26 @@
{{#layout/master-sidebar}}
{{/layout/master-sidebar}}
<Layout::MasterNavigation />
<Layout::MasterToolbar />
{{#layout/master-content}}
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">PROFILE</div>
<div class="text">
Set your personal information or reset your password.
</div>
<div class="text">
Have a product idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title=session.user.fullname
desc="Manage you profile and password"
desc="Manage your profile and password"
icon=constants.Icon.Person}}
{{user/user-profile model=model save=(action "save")}}
{{/layout/master-content}}
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,6 +1,9 @@
{{#layout/master-sidebar selectedItem="search"}}
<Ui::UiSpacer @size=300 />
<Layout::MasterNavigation @selectedItem="search" />
<Layout::MasterToolbar />
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">Match Filter</div>
<div class="list">
@ -23,7 +26,6 @@
</div>
</div>
<Ui::UiSpacer @size=200 />
<div class="section">
<div class="title">query examples</div>
<div class="view-search">
@ -61,9 +63,10 @@
{{/if}}
</div>
</div>
{{/layout/master-sidebar}}
</div>
</Layout::Grid::Sidebar>
{{#layout/master-content}}
<Layout::Grid::Content>
{{layout/logo-heading
title="Search"
desc="Find content"
@ -72,4 +75,5 @@
{{search/search-view
filter=filter
matchFilter=matchFilter}}
{{/layout/master-content}}
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -12,4 +12,7 @@
import Route from '@ember/routing/route';
export default Route.extend({
activate() {
this.get('browser').setTitle('Product News');
}
});

View file

@ -1,20 +1,33 @@
{{#layout/master-sidebar}}
<Ui::UiSpacer @size=300 />
<div class="section">
<div class="title">SUMMARY</div>
<Ui::UiSpacer @size=100 />
<p>Documize {{appMeta.edition}} Edition</p>
<p>Version {{appMeta.version}}</p>
<p>Build {{appMeta.revision}}</p>
<Layout::MasterNavigation />
<Layout::MasterToolbar>
<div class="zone-1" />
<div class="zone-2">
<div class="label color-gray-700">
Documize {{appMeta.edition}} Edition {{appMeta.version}} (build {{appMeta.revision}})
</div>
</div>
<div class="zone-3" />
</Layout::MasterToolbar>
{{/layout/master-sidebar}}
{{#layout/master-content}}
<Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">ABOUT</div>
<div class="text">
Documize product updates are released frequently for both
cloud and self-hosted customers.
</div>
<div class="text">
Have an idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates from Documize Inc."
desc="Latest product news and updates"
icon=constants.Icon.Announce}}
<div class="product-news">
@ -23,4 +36,5 @@
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
{{/layout/master-content}}
</Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -153,9 +153,11 @@ $color-white-dark-1: #f5f5f5;
* Specialty colors
**************************************************************/
// Documents, spaces card background color
// Documents and spaces card background color
$color-card: #F6F4EE;
$color-sidebar: #f2f8fd;
$color-sidebar: #F6F4EE;
// $color-card: #F6F4EE;
// $color-sidebar: #f2f8fd;
/**************************************************************
* Theme colors.

View file

@ -1,5 +1,5 @@
@import "grid.scss";
@import "spacing.scss";
@import "headings.scss";
@import "bars.scss";
@import "layout.scss";
@import "sidebar.scss";

View file

@ -1,6 +1,6 @@
// CSS GRID LAYOUT
// Mobile-first layout
// *****************************************************************
// Define mobile-first layout for top navigation bar and toolbar.
// *****************************************************************
.master-navigation {
display: block;
height: auto;
@ -8,7 +8,7 @@
> .navbar {
display: block;
height: auto;
height: 40px;
width: 100%;
background-color: $theme-500;
text-align: center;
@ -50,6 +50,14 @@
}
}
> a.option {
color: $theme-300;
&:hover {
color: $color-white;
}
}
> .invalid-plan {
> .dicon {
color: map-get($yellow-shades, 600) !important;
@ -86,10 +94,10 @@
> .toolbar {
display: block;
height: auto;
min-height: 40px;
height: 50px;
width: 100%;
background-color: map-get($gray-shades, 100);
background-color: $color-sidebar;
background-color: $theme-100;
text-align: center;
padding: 0;
z-index: 999;
@ -107,16 +115,31 @@
> div[class^="zone-"], div[class*=" zone-"] {
margin: 0;
padding: 10px 10px;
justify-content: center;
> .label {
font-size: 1rem;
}
}
}
}
}
.master-container {
// *****************************************************************
// Define mobile-first layout for main content zone with a sidebar.
// *****************************************************************
.master-grid-container {
display: block;
height: auto;
width: 100%;
.master-sidebar {
display: block;
height: auto;
width: 100%;
padding: 10px;
}
.master-content {
display: block;
height: auto;
@ -125,47 +148,39 @@
}
}
// Desktop layout adjustments
// Small screen starts around 900px
@media (min-width: $display-break-1) and (min-height: 650px) {
.master-navigation {
> .navbar {
}
> .toolbar {
}
}
}
.master-sidebar-container {
display: block;
height: auto;
width: 100%;
//z-index: 1041; // required if we want to show modals from inside sidebar
}
// $sidebar-height: calc(100vh - 90px);
$sidebar-height: auto;
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-container {
.master-grid-container {
display: grid;
grid-template-columns: 200px auto;
.master-sidebar {
width: 200px;
height: $sidebar-height;
// overflow-x: hidden;
// overflow-y: auto;
padding: 20px 15px;
}
.master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 210px);
}
}
}
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-grid-container {
display: grid;
grid-template-columns: 240px auto;
.master-sidebar {
width: 200px;
height: auto;
max-height: 90vh;
overflow-x: hidden;
overflow-y: auto;
width: 240px;
}
.master-content {
@ -176,69 +191,35 @@
}
}
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 290px auto;
.master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 300px);
}
}
.master-sidebar-container {
position: fixed;
width: 290px;
height: 100vh;
.master-sidebar {
position: fixed;
top: 0;
left: 70px;
width: 220px;
height: 100vh;
}
}
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
.master-grid-container {
display: grid;
grid-template-columns: 320px auto;
grid-template-columns: 300px auto;
.master-sidebar {
width: 300px;
padding: 40px 20px;
}
.master-content {
grid-column-start: 2;
padding: 40px 30px;
max-width: calc(100vw - 330px);
}
}
.master-sidebar-container {
position: fixed;
width: 320px;
height: 100vh;
.master-sidebar {
position: fixed;
top: 0;
left: 70px;
width: 250px;
height: 100vh;
padding: 20px 10px;
max-width: calc(100vw - 310px);
}
}
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
.master-grid-container {
display: grid;
grid-template-columns: 370px minmax(auto, 1200px);
grid-template-columns: 350px minmax(auto, 1200px);
.master-sidebar {
width: 350px;
padding: 40px 20px;
}
.master-content {
grid-column-start: 2;
@ -246,19 +227,43 @@
max-width: 1200px;
}
}
}
.master-sidebar-container {
position: fixed;
width: 370px;
height: 100vh;
// *****************************************************************
// Define mobile-first layout for content without a sidebar.
// *****************************************************************
.master-container {
display: block;
height: auto;
width: 100%;
padding: 20px;
}
.master-sidebar {
position: fixed;
top: 0;
left: 70px;
width: 300px;
height: 100vh;
padding: 20px 15px;
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-container {
padding: 20px;
}
}
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
padding: 20px;
}
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
padding: 30px;
}
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
padding: 40px;
max-width: 1200px;
}
}

View file

@ -1,7 +1,10 @@
.sidebar-content {
display: block;
position: relative;
// @extend .text-truncate;
padding: 20px 10px 10px 10px;
background-color: $color-sidebar;
@include border-radius(4px);
border: 1px solid map-get($gray-shades, 100);
> .section {
margin: 0;

View file

@ -1,5 +1,5 @@
<Ui::UiSpacer @size=300 />
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="title">filter</div>
<div class="list">
<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}>
@ -54,3 +54,5 @@
{{else}}
{{/if}}
</div>
</div>
</Layout::Grid::Sidebar>

View file

@ -0,0 +1,2 @@
{{yield}}

View file

@ -0,0 +1,2 @@
{{yield}}

View file

@ -0,0 +1 @@
{{yield}}

View file

@ -0,0 +1 @@
{{yield}}

View file

@ -1,4 +0,0 @@
<div class="master-content">
{{yield}}
</div>
<Ui::UiSpacer @size=300 />

View file

@ -101,7 +101,7 @@
{{/if}}
{{/if}}
<div class="divider"></div>
<a class={{if hasWhatsNew "item bold green" "item"}} href="#" {{action "onNew"}}>What's New</a>
<a class={{if hasWhatsNew "item bold red" "item"}} href="#" {{action "onNew"}}>What's New</a>
<a href="https://docs.documize.com" target="_blank" class="item">Help</a>
{{#if enableLogout}}
<div class="divider"></div>
@ -112,10 +112,8 @@
</div>
</div>
{{else}}
{{#link-to "auth.login" class="login"}}
<i class={{concat "dicon " constants.Icon.Unlocked}}>
{{#attach-tooltip showDelay=1000}}Login{{/attach-tooltip}}
</i>
{{#link-to "auth.login" class="option"}}
{{constants.Label.Login}}
{{/link-to}}
{{/if}}
</div>

View file

@ -3,4 +3,3 @@
{{yield}}
</div>
</div>