Skip to content

Fix app navigation menu, closes #49 #53

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

Merged
raimund-schluessler merged 3 commits into from
Feb 22, 2017
Merged

Fix app navigation menu, closes #49 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4496f42
Fix app navigation entry menu
Feb 20, 2017
9356893
Hide three-dots-icon-menu when not active
Feb 20, 2017
9fe895c
Fix sortorder dropdown
Feb 20, 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
77 changes: 31 additions & 46 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,29 +44,29 @@
#app-navigation .app-navigation-entry-utils li {
font-size: 100%;
}
#app-navigation .app-navigation-entry-menu li,
.sortorder-dropdown li {
#app-navigation li.list:not(.active) .app-navigation-entry-utils-menu-button {
display: none;
}
#app-navigation .app-navigation-entry-menu li {
float: inherit;
width: auto !important;
opacity: 0.5;
cursor: pointer;
height: 38px;
}
.sortorder-dropdown li.active {
opacity: 1;
.sortorder-dropdown li {
float: inherit;
width: auto !important;
cursor: pointer;
}
.sortorder-dropdown li.active a {
opacity: 1 !important;
}
#app-navigation .app-navigation-entry-menu li>a,
#app-navigation .app-navigation-entry-menu li>span,
.sortorder-dropdown li>span {
width: 100%;
padding: 10px;
display: inline-block;
line-height: normal;
height: auto;
min-height: auto;
box-sizing: border-box;
.sortorder-dropdown a {
width: 100% !important;
}
.app-navigation-entry-menu.sortorder-dropdown li > a span {
opacity: 1 !important;
}

#app-navigation .app-navigation-entry-menu li img,
#app-navigation .app-navigation-entry-menu li span,
.sortorder-dropdown li img,
Expand Down Expand Up @@ -601,15 +601,10 @@
display: block;
}
.sortorder-dropdown .icon {
margin-top: -2px;
margin-right: 3px;
margin: 12px 8px;
}
.sort-indicator {
width: 10px;
height: 8px;
margin-left: 5px;
display: inline-block;
vertical-align: text-bottom;
margin-left: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
Expand Down Expand Up @@ -1640,15 +1635,6 @@ ol[dnd-list] .dndPlaceholder {
box-shadow: 0 0 6px #f8b9b7;
}

.confirmed {
opacity: 1 !important;
}
.confirmed img {
margin-left: auto;
margin-right: auto !important;
display: block;
}

.confirmation-default {
overflow: hidden;
}
Expand All @@ -1660,37 +1646,36 @@ ol[dnd-list] .dndPlaceholder {
.confirmation-confirm, .confirmation-abort {
width: 50% !important;
display: none !important;
overflow: hidden;
float: right;
height: 100% !important;
padding-right: 0px !important;
background-position: center !important;
}

.confirmation-confirm, .confirmation-confirm span {
background-color: red;
.confirmation-confirm {
background-color: red !important;
cursor: default !important;
}

.confirmed .confirmation-confirm, .confirmed .confirmation-abort {
display: inline-block !important;
}

.confirmed .confirmation-confirm img {
display: none;
}
.app-navigation-entry-menu li > a:not(:empty).confirmation-confirm {
padding-right: 0 !important;
}

.countdown {
.app-navigation-entry-menu li > a span.countdown {
background-color: inherit;
color: white;
display: block;
text-align: center;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
}

.confirmed.active .confirmation-confirm{
cursor: pointer !important;
}
.confirmed.active .confirmation-confirm span.countdown {
.confirmed.active .countdown {
display: none;
}

.confirmed.active .confirmation-confirm img {
display: block;
}
19 changes: 9 additions & 10 deletions templates/confirmation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<span class="confirmation-default">
<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete.svg'))?>"/>
<span><?php p($l->t('Delete')); ?></span>
</span>
<span class="confirmation-confirm">
<a class="confirmation-default">
<span class="icon-delete svg"></span>
<span><?php p($l->t('Delete')); ?></span>
</a>
<a class="confirmation-abort icon-close svg" title="<?php p($l->t('Cancel')); ?>">
<span></span>
</a>
<a class="confirmation-confirm icon-delete-white no-permission svg">
<span class="countdown">33 &nbsp;</span>
<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete-white.svg'))?>"/>
</span>
<span class="confirmation-abort" title="<?php p($l->t('Cancel')); ?>">
<img class="icon-close svg" src="<?php p(image_path('core', 'actions/close.svg'))?>"/>
</span>
</a>
40 changes: 20 additions & 20 deletions templates/main.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,20 @@ class="collection"
<div class="app-navigation-entry-menu" ng-show="calendar.writable">
<ul>
<li>
<span ng-click="startEdit(calendar)">
<img class="icon-rename svg" src="<?php p(image_path('core', 'actions/rename.svg'))?>"/>
<a ng-click="startEdit(calendar)">
<span class="icon-rename svg"></span>
<span><?php p($l->t('Edit')); ?></span>
</span>
</a>
</li>
<li>
<span ng-click="showCalDAVUrl(calendar)">
<img class="icon-public svg" src="<?php p(image_path('core', 'actions/public.svg'))?>"/>
<a ng-click="showCalDAVUrl(calendar)">
<span class="icon-public svg"></span>
<span><?php p($l->t('Link')); ?></span>
</span>
</a>
</li>
<li>
<a href="{{calendar.exportUrl}}" download="{{calendar.uri}}.ics">
<img class="icon-download svg" src="<?php p(image_path('core', 'actions/download.svg'))?>"/>
<span class="icon-download svg"></span>
<span><?php p($l->t('Download')); ?></span>
</a>
</li>
Expand Down Expand Up @@ -144,7 +144,7 @@ class="collection"

<div id="app-content" ng-controller="TasksController" ng-class="{'details-visible':route.taskID}">
<div class="content-wrapper">
<div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
<div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
<a class="input-star">
<span class="icon input-star"></span>
</a>
Expand All @@ -167,46 +167,46 @@ class="collection"
<div class="app-navigation-entry-menu bubble sortorder-dropdown">
Copy link
Member

@skjnldsv skjnldsv Feb 22, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

This is NOT a app-navigation-entry-menu, we're in the content, this should be a popovermenu 😉
Though this should roughly be similar, changing the class should be enough :)

The menu content on the other hand, seems to be broken (click action), so since we're working on this, maybe fix this too? 😄

Copy link
Member

@skjnldsv skjnldsv Feb 22, 2017

Choose a reason for hiding this comment

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

If you want to work on this in another pr, I will change my review to approved to merge this fast! ;)

Copy link
Member Author

@raimund-schluessler raimund-schluessler Feb 22, 2017

Choose a reason for hiding this comment

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

Maybe tackle this in a follow up PR, so that we have a usable state for the menu already. Right now, master is broken and with this PR it should be fine, "just" not fitting the guideline ;)

Copy link
Member Author

@raimund-schluessler raimund-schluessler Feb 22, 2017

Choose a reason for hiding this comment

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

I created an issue: #57

Copy link
Member

@skjnldsv skjnldsv Feb 22, 2017

Choose a reason for hiding this comment

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

The click on menu is broken too, this is not just the guidelines 😃
When you select a sort option, you can't click the button again (or with a lot of difficulties)

Copy link
Member Author

@raimund-schluessler raimund-schluessler Feb 22, 2017

Choose a reason for hiding this comment

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

Hm, I never considered this a bug. But I am ok with keeping the menu open after clicking the popover.

Copy link
Member

@skjnldsv skjnldsv Feb 22, 2017

Choose a reason for hiding this comment

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

No no, Im talking about the button, not the menu :)

Copy link
Member Author

@raimund-schluessler raimund-schluessler Feb 22, 2017

Choose a reason for hiding this comment

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

Sorry, I don't get what you mean. Clicking on the sort-order dropdown button opens the menu, clicking it again, closes it. When I click inside the popover, a sorttype is selected and the menu is closed. What is wrong about that? 😕

Copy link
Member

@skjnldsv skjnldsv Feb 23, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Ahaha, sorry, you're right I'm not clear!
When you click the button, the popover opens, you can select an option and it closes right away, which is perfect!
BUT, after that, when you click the button again, it doesnt work. You need to click just under the icon. It doesn't work after that.

Copy link
Member Author

@raimund-schluessler raimund-schluessler Feb 23, 2017

Choose a reason for hiding this comment

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

Hm, I can't reproduce this behavior. After selecting an option I can open and close the menu just fine. It behaves the same as before. Could you maybe create an issue for that and tell me which browser you use?

<ul>
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
<span>
<a>
<span class="icon list-list"></span>
<span><?php p($l->t('Default')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li>
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
<span>
<a>
<span class="icon detail-date"></span>
<span><?php p($l->t('Due date')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li>
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
<span>
<a>
<span class="icon detail-start"></span>
<span><?php p($l->t('Start date')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li>
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
<span>
<a>
<span class="icon detail-priority"></span>
<span><?php p($l->t('Priority')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li>
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
<span>
<a>
<span class="icon sort-alphabetically"></span>
<span><?php p($l->t('Alphabetically')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li>
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
<span>
<a>
<span class="icon sort-manual"></span>
<span><?php p($l->t('Manually')); ?></span>
<span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
</span>
</a>
</li> -->
</ul>
</div>
Expand Down