-
+
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
new file mode 100644
index 00000000..9742fb35
--- /dev/null
+++ b/src/components/quick-actions/quick-actions.vue
@@ -0,0 +1,388 @@
+
+
+
+
+
+
+ {{ hintText }}
+
+
+
+
+
+ {{ r.title }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/store/index.js b/src/store/index.js
index 46a88ca0..260d0270 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,7 @@ import {
LOADING,
LOADING_MODULE,
MENU_ACTIVE,
- ONLINE,
+ ONLINE, QUICK_ACTIONS_ACTIVE,
} from './mutation-types'
import config from './modules/config'
import auth from './modules/auth'
@@ -44,6 +44,7 @@ export const store = new Vuex.Store({
hasTasks: false,
menuActive: true,
keyboardShortcutsActive: false,
+ quickActionsActive: false,
},
mutations: {
[LOADING](state, loading) {
@@ -60,6 +61,12 @@ export const store = new Vuex.Store({
},
[CURRENT_LIST](state, currentList) {
+ if (currentList === null) {
+ state.currentList = {}
+ state.background = null
+ return
+ }
+
setTitle(currentList.title)
// Not sure if this is the right way to do it but hey, it works
@@ -127,5 +134,8 @@ export const store = new Vuex.Store({
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
state.keyboardShortcutsActive = active
},
+ [QUICK_ACTIONS_ACTIVE](state, active) {
+ state.quickActionsActive = active
+ },
},
})
\ No newline at end of file
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 4a9043c5..9c6381d2 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -6,6 +6,7 @@ export const CURRENT_LIST = 'currentList'
export const HAS_TASKS = 'hasTasks'
export const MENU_ACTIVE = 'menuActive'
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
+export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
export const CONFIG = 'config'
export const AUTH = 'auth'
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index 4a1720de..b870f964 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -23,3 +23,4 @@
@import 'api-config';
@import 'datepicker';
@import 'notifications';
+@import 'quick-actions';
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index 2d1997e2..5d42503e 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -72,6 +72,10 @@
max-width: 100%;
min-width: 100%;
+ &-inline {
+ position: static;
+ }
+
button {
background: transparent;
display: block;
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
index 22fba6ea..e3034670 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/components/quick-actions.scss b/src/styles/components/quick-actions.scss
new file mode 100644
index 00000000..71583e9a
--- /dev/null
+++ b/src/styles/components/quick-actions.scss
@@ -0,0 +1,67 @@
+.quick-actions {
+
+ .modal-content {
+ top: 6rem !important;
+ transform: translate(-50%, -3rem) !important;
+ }
+
+ .action-input {
+ display: flex;
+ align-items: center;
+
+ .input {
+ border: 0;
+ font-size: 1.5rem;
+ }
+
+ &.has-active-cmd .input {
+ padding-left: .5rem;
+ }
+
+ .active-cmd {
+ font-size: 1.25rem;
+ margin-left: .5rem;
+ }
+ }
+
+ .results {
+ text-align: left;
+ width: 100%;
+ color: $grey-800;
+
+ .result {
+ &-title {
+ background: $grey-50;
+ padding: .5rem;
+ display: block;
+ font-size: .75rem;
+ }
+
+ &-items {
+ button {
+ font-size: .9rem;
+ width: 100%;
+ background: transparent;
+ text-align: left;
+ box-shadow: none;
+ border-radius: 0;
+ text-transform: none;
+ font-family: $family-sans-serif;
+ font-weight: normal;
+ padding: .5rem .75rem;
+ border: none;
+ cursor: pointer;
+
+ &:focus, &:hover {
+ background: $grey-50;
+ box-shadow: none !important;
+ }
+
+ &:active {
+ background: $grey-100;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 82c1c7cf..075aa6bb 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;
-}
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 02cb5c65..b77e9628 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -429,6 +429,7 @@ import heading from '@/components/tasks/partials/heading'
import Datepicker from '@/components/input/datepicker'
import {playPop} from '@/helpers/playPop'
import TaskSubscription from '@/components/misc/subscription'
+import {CURRENT_LIST} from '@/store/mutation-types'
export default {
name: 'TaskDetailView',
@@ -520,7 +521,9 @@ export default {
return null
}
- return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+ const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+ this.$store.commit(CURRENT_LIST, list.list)
+ return list
},
canWrite() {
return this.task && this.task.maxRight && this.task.maxRight > rights.READ