@@ -16,6 +16,7 @@
@keydown.down.prevent="() => select(0, 0)"
@keyup.prevent.delete="unselectCmd"
@keyup.prevent.enter="doCmd"
+ @keyup.prevent.esc="closeQuickActions"
/>
@@ -58,7 +59,7 @@ import TaskModel from '@/models/task'
import NamespaceModel from '@/models/namespace'
import TeamModel from '@/models/team'
-import {CURRENT_LIST} from '@/store/mutation-types'
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
import ListModel from '@/models/list'
const TYPE_LIST = 'list'
@@ -90,7 +91,13 @@ export default {
}
},
computed: {
- active: () => true, // TODO: use state + keyboard shortcut
+ active() {
+ const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+ if (!active) {
+ this.reset()
+ }
+ return active
+ },
results() {
const lists = (Object.values(this.$store.state.lists).filter(l => {
return l.title.toLowerCase().includes(this.query.toLowerCase())
@@ -150,7 +157,7 @@ export default {
hintText() {
let namespace
- if (this.selectedCmd !== null) {
+ if (this.selectedCmd !== null && this.currentList !== null) {
switch (this.selectedCmd.action) {
case CMD_NEW_TASK:
return `Create a task in the current list (${this.currentList.title})`
@@ -221,6 +228,9 @@ export default {
})
}, 150)
},
+ closeQuickActions() {
+ this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+ },
doAction(type, item) {
switch (type) {
case TYPE_LIST:
@@ -358,6 +368,10 @@ export default {
this.selectedCmd = null
},
+ reset() {
+ this.query = ''
+ this.selectedCmd = null
+ }
},
}
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
index 22fba6eab..e30346701 100644
--- a/src/styles/components/notifications.scss
+++ b/src/styles/components/notifications.scss
@@ -1,24 +1,16 @@
.notifications {
width: 50px;
- .trigger {
- cursor: pointer;
- color: $grey-400;
- padding: 1rem;
- font-size: 1.25rem;
- position: relative;
+ .unread-indicator {
+ position: absolute;
+ top: 1rem;
+ right: .75rem;
+ width: .75rem;
+ height: .75rem;
- .unread-indicator {
- position: absolute;
- top: 1rem;
- right: .75rem;
- width: .75rem;
- height: .75rem;
-
- background: $primary;
- border-radius: 100%;
- border: 2px solid $white;
- }
+ background: $primary;
+ border-radius: 100%;
+ border: 2px solid $white;
}
.notifications-list {
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 82c1c7cfd..075aa6bb5 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -318,112 +318,123 @@
display: inline-block;
}
}
+
}
}
}
-.navbar .user {
- span {
- font-family: $vikunja-font;
+.navbar {
+ .trigger-button {
+ cursor: pointer;
+ color: $grey-400;
+ padding: 1rem;
+ font-size: 1.25rem;
+ position: relative;
}
- .avatar {
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
- vertical-align: middle;
- height: 40px;
- }
+ .user {
+ span {
+ font-family: $vikunja-font;
+ }
- .logout-icon {
- color: $grey-900;
-
- .icon {
+ .avatar {
+ -webkit-border-radius: 100%;
+ -moz-border-radius: 100%;
+ border-radius: 100%;
vertical-align: middle;
+ height: 40px;
+ }
+
+ .logout-icon {
+ color: $grey-900;
+
+ .icon {
+ vertical-align: middle;
+ }
+ }
+
+ .dropdown-trigger .button {
+ background: none;
+
+ &:focus:not(:active), &:active {
+ outline: none !important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
}
}
- .dropdown-trigger .button {
- background: none;
-
- &:focus:not(:active), &:active {
- outline: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- box-shadow: none !important;
- }
- }
-}
-
-.menu-hide-button, .menu-show-button {
- display: none;
- z-index: 31;
- font-weight: bold;
- font-size: 2rem;
- color: $text;
- line-height: 1;
-
- &:hover, &:focus {
- color: $grey-900;
- }
-}
-
-.menu-hide-button {
- position: fixed;
-
- &:hover, &:focus {
+ .menu-hide-button, .menu-show-button {
+ display: none;
+ z-index: 31;
+ font-weight: bold;
+ font-size: 2rem;
color: $text;
+ line-height: 1;
+
+ &:hover, &:focus {
+ color: $grey-900;
+ }
}
-}
-.navbar-brand .menu-show-button {
- display: block;
-}
-
-.mobile-overlay {
- display: none;
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(250, 250, 250, 0.8);
- z-index: 5;
- opacity: 0;
- transition: all $transition;
-}
-
-@media screen and (max-width: $tablet) {
.menu-hide-button {
- display: block;
- top: $hamburger-menu-icon-spacing;
- right: $hamburger-menu-icon-spacing;
+ position: fixed;
+
+ &:hover, &:focus {
+ color: $text;
+ }
}
- .menu-show-button {
+ .navbar-brand .menu-show-button {
display: block;
- margin-left: $hamburger-menu-icon-spacing;
}
.mobile-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(250, 250, 250, 0.8);
+ z-index: 5;
+ opacity: 0;
+ transition: all $transition;
+ }
+
+ @media screen and (max-width: $tablet) {
+ .menu-hide-button {
+ display: block;
+ top: $hamburger-menu-icon-spacing;
+ right: $hamburger-menu-icon-spacing;
+ }
+
+ .menu-show-button {
+ display: block;
+ margin-left: $hamburger-menu-icon-spacing;
+ }
+
+ .mobile-overlay {
+ display: block;
+ opacity: 1;
+ }
+
+ .navbar.is-dark .navbar-brand > .navbar-item {
+ margin: 0 auto;
+ }
+ }
+
+ .logout-icon {
+ margin-right: 0.85rem !important;
+ }
+
+ .menu-bottom-link {
+ width: 100%;
+ color: $grey-300;
+ text-align: center;
display: block;
- opacity: 1;
- }
-
- .navbar.is-dark .navbar-brand > .navbar-item {
- margin: 0 auto;
+ margin: 1rem 0;
+ font-size: .8rem;
}
}
-
-.logout-icon {
- margin-right: 0.85rem !important;
-}
-
-.menu-bottom-link {
- width: 100%;
- color: $grey-300;
- text-align: center;
- display: block;
- margin: 1rem 0;
- font-size: .8rem;
-}