Skip to content

Fit app-navigation to css guidelines #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
skjnldsv wants to merge 6 commits into from
Closed

Fit app-navigation to css guidelines #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f643c4d
Initial fix for app-navigation
skjnldsv Sep 13, 2017
a54cbab
Fix inline js
skjnldsv Sep 13, 2017
93183d3
Fix wrap to parent
skjnldsv Sep 20, 2017
b41ea7a
Css fixes for bullet
skjnldsv Sep 20, 2017
4fee8b4
All inbox as first item
skjnldsv Sep 28, 2017
a6807ae
Removed unwanted attribute to all inbox
skjnldsv Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 11 additions & 67 deletions css/mail.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,48 +140,6 @@
}


/* START: should be done in core/apps.css */

#app-navigation .collapse {
display: inline-block !important;
opacity: .3;
z-index: 1;
}

#app-navigation-accounts {
height: calc(100% - 65px);
overflow-x: hidden;
}

#app-navigation ul ul {
display: block;
}

#app-navigation ul ul ul {
display: none;
}

#app-navigation .navigation-account {
position: relative;
}
#app-navigation .navigation-account .app-navigation-entry-utils-menu-button {
/* show the account menu toggle (three dots) by default */
display: inline-block;
}

#app-navigation ul ul li > a {
padding-left: 32px;
}

#app-navigation ul .collapsible.open:hover {
box-shadow: inset 0 0 3px #ddd;
}

#app-navigation ul .collapsible.open ul {
display: block;
}
/* STOP: should be done in core/apps.css */

#emptycontent,
#mail-messages #emptycontent.emptycontent-search {
position: static;
Expand All @@ -194,15 +152,8 @@
}

.mail-account-email {
display: inline-block;
opacity: .5;
padding: 20px 0 10px 25px;
width: calc(100% - 50px);
margin: initial;
font-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* for icon color */
padding-left: 44px !important;
}
.mail-account-email:first-child {
display: none;
Expand All @@ -218,22 +169,16 @@
opacity: .5;
}

/* TODO to be deleted when lower suppported server
include app-navigation-entry-bullet */
.mail-account-color {
display: inline-block;
display: block;
width: 14px;
height: 14px;
margin: 16px;
border-radius: 50%;
position: relative;
left: 15px;
top: -12px;
}
/* color dot position fix for Safari */
@media not all and (min-resolution:.001dpcm) { @media
{
.mail-account-color {
top: 2px;
position: absolute;
}
}}

.mail-message-account-color {
position: absolute;
Expand All @@ -242,6 +187,10 @@
z-index: 1;
}

/* hide folders on unified account */
#account-1 + .folders {
display: none;
}

/* settings */

Expand Down Expand Up @@ -389,11 +338,6 @@
padding: 3px;
}

/* override core values to work with custom html */
#app-navigation .app-navigation-entry-utils {
top: 7px;
}

/* autocomplete list */
.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete {
display: flex;
Expand Down
5 changes: 4 additions & 1 deletion js/routecontroller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ define(function(require) {
// Show first folder of first account
var firstAccount = this.accounts.at(0);
var firstFolder = firstAccount.folders.at(0);
if(firstAccount.get('accountId') < 0) {
return _this.showFolder(firstAccount.get('accountId'), firstAccount.get('id'), showComposer);
}
return _this.showFolder(firstAccount.get('accountId'), firstFolder.get('id'), showComposer);
},

Expand All @@ -128,7 +131,7 @@ define(function(require) {
if (_.isUndefined(folder)) {
folder = account.folders.at(0);
Radio.ui.trigger('error:show', t('mail', 'Invalid folder'));
this._navigate('accounts/' + accountId + '/folders/' + folder.get('id'));
this._navigate('accounts/' + accountId + '/folders/' + btoa(account.get('id')));
return Promise.resolve();
}
return FolderController.showFolder(account, folder, !showComposer);
Expand Down
8 changes: 7 additions & 1 deletion js/service/accountservice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,13 @@ define(function(require) {
if (accounts.length > 1) {
accounts.add({
accountId: -1,
isUnified: true
isUnified: true,
id: btoa('all-inboxes'),
name: t('mail', 'All inboxes'),
emailAddress: t('mail', 'All inboxes'),
isEmpty: false,
noSelect: false,
delimiter: '.'
}, {
at: 0
});
Expand Down
49 changes: 26 additions & 23 deletions js/templates/account.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
{{#if emailAddress}}
<div class="mail-account-color" style="background-color: {{accountColor emailAddress}}"></div>
<div class="mail-account-color app-navigation-entry-bullet" style="background-color: {{accountColor emailAddress}}"></div>
Copy link

@pixelipo pixelipo Sep 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be rendered via CSS, similar to the way folders' icons are done?

Copy link
Member Author

@skjnldsv skjnldsv Sep 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean the background color?

Copy link

@pixelipo pixelipo Sep 21, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not only that, the whole .mail-account-color could be moved over to .mail-account-email:before. That would make for a cleaner DOM.

edit: Because the bullet is just decoration

Copy link
Member Author

@skjnldsv skjnldsv Sep 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bullet is now integrated into server. It's part of the css guidelines.
see nextcloud/server#6399

{{/if}}
<h2 class="mail-account-email" title="{{emailAddress}}">{{emailAddress}}</h2>
<a href="#" class="icon mail-account-email" id="account{{accountId}}" title="{{emailAddress}}">{{emailAddress}}</a>

{{#if hasMenu}}
<ul class="app-navigation-entry-utils">
<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
</ul>

<ul class="app-navigation-entry-menu popovermenu bubble menu">
<li>
<a href="#" class="menuitem action action-settings permanent" data-action="Settings">
<span class="icon icon-rename"></span>
<span>{{ t 'Settings' }}</span>
</a>
</li>
{{#if isDeletable}}
<li>
<a href="#" class="menuitem action action-delete permanent" data-action="Delete">
<span class="icon icon-delete"></span>
<span>{{ t 'Delete account' }}</span>
</a>
</li>
{{/if}}
</ul>
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
</ul>
</div>
<div class="app-navigation-entry-menu">
<ul>
<li>
<a href="#" class="menuitem action action-settings permanent" data-action="Settings">
<span class="icon icon-rename"></span>
<span>{{ t 'Settings' }}</span>
</a>
</li>
{{#if isDeletable}}
<li>
<a href="#" class="menuitem action action-delete permanent" data-action="Delete">
<span class="icon icon-delete"></span>
<span>{{ t 'Delete account' }}</span>
</a>
</li>
{{/if}}
</ul>
</div>
{{/if}}

<div class="folders with-icon"></div>
<ul class="folders"></ul>
{{#unless isUnifiedInbox}}
{{#if hasFolders}}
<span class="account-toggle-collapse">{{toggleCollapseMessage}}</span>
Expand Down
15 changes: 8 additions & 7 deletions js/templates/folder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{{#if folders}}
<button class="collapse"></button>
{{/if}}
<a class="folder
{{#if specialRole}} icon-{{specialRole}} svg{{/if}}
{{#if noSelect}} no-select {{/if}}"
href="{{#if noSelect}}#{{else}}{{url}}{{/if}}">
{{name}}
{{#if count}}
<span class="utils">{{count}}</span>
{{/if}}
</a>
<div class="folders"></div>
{{#if count}}
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter">{{count}}</li>
</ul>
</div>
{{/if}}
<ul class="folders"></ul>
4 changes: 3 additions & 1 deletion js/views/accountview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ define(function(require) {

return Marionette.View.extend({
template: AccountTemplate,
tagName: 'li',
templateContext: function() {
var toggleCollapseMessage = this.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders');
return {
Expand All @@ -34,7 +35,8 @@ define(function(require) {
'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
'click @ui.deleteButton': 'onDelete',
'click @ui.settingsButton': 'showAccountSettings',
'click @ui.email': 'onClick'
'click @ui.email': 'onClick',
'click .mail-account-color' : 'render'
},
regions: {
folders: '.folders'
Expand Down
9 changes: 8 additions & 1 deletion js/views/folderlistview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ define(function(require) {
]);

var FolderListView = Marionette.CollectionView.extend({
tagName: 'ul',
tagName: 'li',
childView: FolderView,
collapsed: true,
initialize: function(options) {
Expand All @@ -34,6 +34,13 @@ define(function(require) {
}
var specialRole = child.get('specialRole');
return SHOW_COLLAPSED.indexOf(specialRole) !== -1;
},
onRender: function() {
this.$el = this.$el.children();
// Unwrap the element to prevent infinitely
// nesting elements during re-render.
this.$el.unwrap();
this.setElement(this.$el);
}
});

Expand Down
6 changes: 0 additions & 6 deletions js/views/folderview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,6 @@ define(function(require) {
if (this.model.get('specialRole')) {
classes.push('special-' + this.model.get('specialRole'));
}
if (this.model.folders.length > 0) {
classes.push('collapsible');
}
if (this.model.get('open')) {
classes.push('open');
}
// .removeClass() does not work, https://bugs.jqueryui.com/ticket/9015
this.$el.prop('class', '');
var _this = this;
Expand Down
8 changes: 8 additions & 0 deletions js/views/navigation-accounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ define(function(require) {
return Marionette.CollectionView.extend({
collection: null,
childView: AccountView,
tagName: 'li',
/**
* @returns {undefined}
*/
Expand Down Expand Up @@ -53,6 +54,13 @@ define(function(require) {
folder.set('active', true);
}
},
onRender: function() {
this.$el = this.$el.children();
// Unwrap the element to prevent infinitely
// nesting elements during re-render.
this.$el.unwrap();
this.setElement(this.$el);
},
/**
* @returns {undefined}
*/
Expand Down
2 changes: 1 addition & 1 deletion templates/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<div id="app">
<div id="app-navigation" class="icon-loading">
<div id="mail-new-message-fixed"></div>
<div id="app-navigation-accounts"></div>
<ul id="app-navigation-accounts"></ul>
<div id="app-settings">
<div id="app-settings-header">
<button class="settings-button"
Expand Down