Fix app-navigation menu
This commit is contained in:
Raimund Schlüßler
parent
2d1b305b6c
commit
3062af8f39
6 changed files with 162 additions and 76 deletions
|
|
@ -117,39 +117,64 @@ $white: #fff;
|
|||
font-size: 100%;
|
||||
}
|
||||
|
||||
.app-navigation-entry-menu li {
|
||||
float: inherit;
|
||||
width: auto !important;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover a {
|
||||
opacity: 1 !important;
|
||||
.app-navigation-entry-menu {
|
||||
ul {
|
||||
align-items: unset;
|
||||
}
|
||||
|
||||
&.confirmed a {
|
||||
&.confirmation-confirm {
|
||||
display: inline-block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.confirmation-abort {
|
||||
display: inline-block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
li {
|
||||
float: inherit;
|
||||
width: auto !important;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
|
||||
/*
|
||||
* rules for confirmation directive
|
||||
*/
|
||||
> a {
|
||||
&:not(:empty).confirmation-confirm {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
span.countdown {
|
||||
background-color: inherit;
|
||||
color: $white;
|
||||
display: block;
|
||||
text-align: center;
|
||||
filter: alpha(opacity=100) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.confirmed a {
|
||||
&.confirmation-confirm {
|
||||
display: inline-block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.confirmation-abort {
|
||||
display: inline-block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
float: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,27 +223,6 @@ $white: #fff;
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* rules for confirmation directive
|
||||
*/
|
||||
|
||||
.app-navigation-entry-menu {
|
||||
li > a {
|
||||
&:not(:empty).confirmation-confirm {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
span.countdown {
|
||||
background-color: inherit;
|
||||
color: $white;
|
||||
display: block;
|
||||
text-align: center;
|
||||
filter: alpha(opacity=100) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirmation-default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -12143,6 +12143,12 @@
|
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
|
||||
"integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
|
||||
},
|
||||
"vue-click-outside": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
|
||||
"integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y=",
|
||||
"dev": true
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
"stylelint-scss": "^3.1.3",
|
||||
"stylelint-webpack-plugin": "^0.10.5",
|
||||
"svg-sprite": "^1.4.0",
|
||||
"vue-click-outside": "^1.0.7",
|
||||
"vue-jest": "^2.6.0",
|
||||
"vue-loader": "^15.4.1",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
|
|
|
|||
62
src/components/PopoverMenu.vue
Normal file
62
src/components/PopoverMenu.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
License as published by the Free Software Foundation; either
|
||||
version 3 of the License, or any later version.
|
||||
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public
|
||||
License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
|
||||
<template>
|
||||
<component :is="tag">
|
||||
<button v-click-outside="closeMenu" @click="toggleMenu" />
|
||||
<div :class="{'open': menuOpen}" class="app-navigation-entry-menu">
|
||||
<slot />
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clickOutside from 'vue-click-outside'
|
||||
|
||||
export default {
|
||||
name: 'PopoverMenu',
|
||||
components: {
|
||||
clickOutside
|
||||
},
|
||||
directives: {
|
||||
clickOutside
|
||||
},
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuOpen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.menuOpen = false
|
||||
},
|
||||
toggleMenu() {
|
||||
this.menuOpen = !this.menuOpen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -64,30 +64,29 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">{{ getCalendarCount(calendar.uri) | counterFormatter }}</li>
|
||||
<li v-show="calendar.writable" class="app-navigation-entry-utils-menu-button"><button /></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-show="calendar.writable" class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a ng-click="startEdit(calendar)">
|
||||
<span class="icon-rename" />
|
||||
<span>{{ t('tasks', 'Edit') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="showCalDAVUrl(calendar)">
|
||||
<span class="icon-public" />
|
||||
<span>{{ t('tasks', 'Link') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="calendar.exportUrl" :download="calendar.uri + '.ics'">
|
||||
<span class="icon-download" />
|
||||
<span>{{ t('tasks', 'Download') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)" />
|
||||
<popover v-show="calendar.writable" tag="li" class="app-navigation-entry-utils-menu-button">
|
||||
<ul>
|
||||
<li>
|
||||
<a ng-click="startEdit(calendar)">
|
||||
<span class="icon-rename" />
|
||||
<span>{{ t('tasks', 'Edit') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="showCalDAVUrl(calendar)">
|
||||
<span class="icon-public" />
|
||||
<span>{{ t('tasks', 'Link') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="exportUrl(calendar)" :download="calendar.uri + '.ics'">
|
||||
<span class="icon-download" />
|
||||
<span>{{ t('tasks', 'Download') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)" />
|
||||
</ul>
|
||||
</popover>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||
|
|
@ -159,10 +158,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Colorpicker from './Colorpicker'
|
||||
import PopoverMenu from './PopoverMenu'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'colorpicker': Colorpicker
|
||||
'colorpicker': Colorpicker,
|
||||
'popover': PopoverMenu
|
||||
},
|
||||
filters: {
|
||||
counterFormatter: function(count) {
|
||||
|
|
@ -197,6 +198,15 @@ export default {
|
|||
case 2:
|
||||
return this.getCollectionCount(collection.id) < 1
|
||||
}
|
||||
},
|
||||
exportUrl(calendar) {
|
||||
var url = calendar.url
|
||||
// cut off last slash to have a fancy name for the ics
|
||||
if (url.slice(url.length - 1) === '/') {
|
||||
url = url.slice(0, url.length - 1)
|
||||
}
|
||||
url += '?export'
|
||||
return url
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export default ({
|
|||
displayname: 'Test 1',
|
||||
color: '#eef',
|
||||
writable: true,
|
||||
url: '/nextcloud/remote.php/dav/calendars/raimund.schluessler/test-1',
|
||||
tasks: [
|
||||
{
|
||||
calendar: {
|
||||
|
|
@ -75,6 +76,7 @@ export default ({
|
|||
displayname: 'Test 2',
|
||||
color: '#eef',
|
||||
writable: false,
|
||||
url: '/nextcloud/remote.php/dav/calendars/raimund.schluessler/test-2',
|
||||
tasks: [
|
||||
{
|
||||
calendar: {
|
||||
|
|
@ -150,6 +152,7 @@ export default ({
|
|||
displayname: 'Test 3',
|
||||
color: '#112233',
|
||||
writable: true,
|
||||
url: '/nextcloud/remote.php/dav/calendars/raimund.schluessler/test-3',
|
||||
tasks: [
|
||||
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue