design optimizations for NC14

This commit is contained in:
korelstar 2018-08-01 21:47:35 +02:00
parent bc084286d1
commit 268a8b09dc
2 changed files with 37 additions and 37 deletions

View File

@ -4,8 +4,11 @@
* See the COPYING file.
*/
#app-navigation {
padding-bottom: 0; /* no settings bar, so no padding needed */
#app {
width: 100%;
}
#app-content {
height: 100%;
}
#app-navigation #note-add #new-note-button {
@ -16,10 +19,6 @@
background-position: 10px center;
}
#app-navigation .active a {
padding-right: 70px;
}
#app-navigation > ul > li.has-error a{
color:#f00;
}
@ -62,29 +61,22 @@
display: inline;
}
#app-navigation .utils button {
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
box-shadow: none;
display: none;
height: 32px;
width: 32px;
}
/* only display the delete button when the feed is active */
#app-navigation .utils .delete-button {
/* only display the delete button when the note is active */
#app-navigation .app-navigation-entry-utils-menu-button {
display: none;
}
#app-navigation .active > .utils .icon-delete,
#app-navigation .active > .utils .icon-star {
#app-navigation .app-navigation-entry-utils-menu-button.button-star.starred,
#app-navigation .active .app-navigation-entry-utils-menu-button.button-delete,
#app-navigation .active .app-navigation-entry-utils-menu-button.button-star,
#app-navigation li:hover .app-navigation-entry-utils-menu-button.button-delete,
#app-navigation li:hover .app-navigation-entry-utils-menu-button.button-star {
display: inline-block;
}
#app-navigation .app-navigation-entry-utils .app-navigation-entry-utils-menu-button .icon-delete {
opacity: .3;
}
#app-navigation .utils .icon-starred {
#app-navigation .app-navigation-entry-utils-menu-button .icon-starred {
display: inline-block;
opacity: 1 !important;
}

View File

@ -51,23 +51,31 @@ style('notes', [
<!-- notes list -->
<li ng-repeat="note in filteredNotes = (notes| and:search | orderBy:['-favorite','-modified'])"
ng-class="{ active: note.id == route.noteId,'has-error': note.error }">
<a href="#/notes/{{ note.id }}">
<a href="#/notes/{{ note.id }}" title="{{ note.title | noteTitle }}">
{{ note.title | noteTitle }}
<span ng-if="note.unsaved">*</span>
</a>
<span class="utils" ng-class="{'hidden': note.error }">
<button class="svg action icon-delete"
title="<?php p($l->t('Delete note')); ?>"
notes-tooltip
data-placement="bottom"
ng-click="delete(note.id)"></button>
<button class="svg action icon-star"
title="<?php p($l->t('Favorite')); ?>"
notes-tooltip
data-placement="bottom"
ng-click="toggleFavorite(note.id)"
ng-class="{'icon-starred': note.favorite}"></button>
</span>
<div class="app-navigation-entry-utils" ng-class="{'hidden': note.error }">
<ul>
<li class="app-navigation-entry-utils-menu-button button-delete">
<button class="svg action icon-delete"
title="<?php p($l->t('Delete note')); ?>"
notes-tooltip
data-placement="bottom"
ng-click="delete(note.id)"></button>
</li>
<li class="app-navigation-entry-utils-menu-button button-star"
ng-class="{starred: note.favorite}"
>
<button class="svg action icon-star"
title="<?php p($l->t('Favorite')); ?>"
notes-tooltip
data-placement="bottom"
ng-click="toggleFavorite(note.id)"
ng-class="{'icon-starred': note.favorite}"></button>
</li>
</ul>
</div>
</li>
<li ng-show="notesLoaded && !filteredNotes.length">
<span class="nav-entry" ng-show="search">