vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feature/projects-all-the-way-down #3323

Merged
konrad merged 123 commits from feature/projects-all-the-way-down into main 2023-05-30 10:09:40 +00:00
Conversation 16 Commits 123 Files Changed 85 +165 -197
5 changed files with 165 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3ad948305f - Show all commits

9
src/components/home/ProjectsNavigation.vue
View File

@ -152,4 +152,11 @@ async function saveProjectPosition(e: SortableEvent) {
projectUpdating.value[project.id] = false
}
}
</script>
</script>
<style lang="scss" scoped>
.list-setting-spacer {
width: 2.5rem;
flex-shrink: 0;
}
</style>

230
src/components/home/navigation.vue
View File

@ -47,44 +47,44 @@
</li>
</ul>
</nav>
<nav>
<nav class="menu namespaces-lists">
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-04-03 10:06:39 +00:00
Outdated
Review
Copy Link

Move v-if to front

Move `v-if` to front
✅ 1
konrad commented 2023-04-10 18:59:51 +00:00
Outdated
Review
Copy Link

Done

Done
<ProjectsNavigation :projects="projects"/>
</nav>
<!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
<!-- <template v-for="(n, nk) in namespaces" :key="n.id">-->
<!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
<!-- <BaseButton-->
<!-- @click="toggleProjects(n.id)"-->
<!-- class="menu-label"-->
<!-- v-tooltip="namespaceTitles[nk]"-->
<!-- >-->
<!-- <ColorBubble-->
<!-- v-if="n.hexColor !== ''"-->
<!-- :color="n.hexColor"-->
<!-- class="mr-1"-->
<!-- />-->
<!-- <span class="name">{{ namespaceTitles[nk] }}</span>-->
<!-- <div-->
<!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
<!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
<!-- >-->
<!-- <icon icon="chevron-down"/>-->
<!-- </div>-->
<!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
<!-- ({{ namespaceProjectsCount[nk] }})-->
<!-- </span>-->
<!-- </BaseButton>-->
<!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
<!-- </div>-->
<!-- &lt;!&ndash;-->
<!-- NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function-->
<!-- triggered by the change needs to have access to the current namespace-->
<!-- &ndash;&gt;-->
<!-- <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">-->
<!-- <template v-for="(n, nk) in namespaces" :key="n.id">-->
<!-- <div class="namespace-title" :class="{'has-menu': n.id > 0}">-->
<!-- <BaseButton-->
<!-- @click="toggleProjects(n.id)"-->
<!-- class="menu-label"-->
<!-- v-tooltip="namespaceTitles[nk]"-->
<!-- >-->
<!-- <ColorBubble-->
<!-- v-if="n.hexColor !== ''"-->
<!-- :color="n.hexColor"-->
<!-- class="mr-1"-->
<!-- />-->
<!-- <span class="name">{{ namespaceTitles[nk] }}</span>-->
<!-- <div-->
<!-- class="icon menu-item-icon is-small toggle-lists-icon pl-2"-->
<!-- :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"-->
<!-- >-->
<!-- <icon icon="chevron-down"/>-->
<!-- </div>-->
<!-- <span class="count" :class="{'ml-2 mr-0': n.id > 0}">-->
<!-- ({{ namespaceProjectsCount[nk] }})-->
<!-- </span>-->
dpschen commented 2023-03-28 13:17:48 +00:00
Outdated
Review
Copy Link

Can we put this component inside a <Suspense>? Then we can use await methods directly and without onBeforeMount hook.

Can we put this component inside a `<Suspense>`? Then we can use `await` methods directly and without `onBeforeMount ` hook.
konrad commented 2023-03-28 14:20:04 +00:00
Outdated
Review
Copy Link

I've now moved the project navigation into a separate wrapper component so that we can show a loading spinner while projects are loading and still show the other navigation links (overview, labels, etc).

I've now moved the project navigation into a separate wrapper component so that we can show a loading spinner while projects are loading and still show the other navigation links (overview, labels, etc).
dpschen commented 2023-04-01 12:26:13 +00:00
Outdated
Review
Copy Link

Ok. Will check

Ok. Will check
<!-- </BaseButton>-->
<!-- <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>-->
<!-- </div>-->
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-04-03 10:07:42 +00:00
Outdated
Review
Copy Link

Remove both computed above and use store + property directly instead.

Remove both computed above and use store + property directly instead.
✅ 1
konrad commented 2023-04-10 18:59:37 +00:00
Outdated
Review
Copy Link

Done

Done
<!-- &lt;!&ndash;-->
<!-- NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function-->
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-03-28 13:18:48 +00:00
Outdated
Review
Copy Link

This seems like something that the store should export instead as a computed.

This seems like something that the store should export instead as a computed.
✅ 1
konrad commented 2023-03-28 13:34:19 +00:00
Outdated
Review
Copy Link

That makes sense.

That makes sense.
konrad commented 2023-03-28 13:36:41 +00:00
Outdated
Review
Copy Link

Changed it.

Changed it.
<!-- triggered by the change needs to have access to the current namespace-->
<!-- &ndash;&gt;-->
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-03-28 13:24:30 +00:00
Outdated
Review
Copy Link

Simplify to

.sort((a, b) => a.position - b.position)
Simplify to ```ts .sort((a, b) => a.position - b.position) ```
✅ 1
konrad commented 2023-03-28 13:37:49 +00:00
Outdated
Review
Copy Link

Done.

Done.
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-03-28 13:19:22 +00:00
Outdated
Review
Copy Link

This computed as well.

This computed as well.
👍 1 ✅ 1
<!-- </template>-->
<!-- </nav>-->
<!-- </template>-->
<!-- </nav>-->
<PoweredByLink/>
dpschen commented 2023-04-12 14:58:49 +00:00
Outdated
Review
Copy Link

This sorts the returned computed of the store
=> sort already in store OR create copy (worse performance)

Error in vue developer tools:

[Vue warn] Set operation on key "0" failed: target is readonly. [...]

This sorts the returned computed of the store => sort already in store OR create copy (worse performance) Error in vue developer tools: > [Vue warn] Set operation on key "0" failed: target is readonly. [...]
konrad commented 2023-04-14 15:21:55 +00:00
Outdated
Review
Copy Link

Now sorting in store, that seems to work (or at least there are no errors now)

Now sorting in store, that seems to work (or at least there are no errors now)
</aside>
</template>
@ -169,11 +169,6 @@ function updateActiveProjects(namespace: INamespace, activeProjects: IProject[])
</script>
<style lang="scss" scoped>
$navbar-padding: 2rem;
$vikunja-nav-background: var(--site-background);
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
.logo {
display: block;
@ -187,7 +182,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.namespace-container {
background: $vikunja-nav-background;
background: var(--site-background);
color: $vikunja-nav-color;
padding: 0 0 1rem;
transition: transform $transition-duration ease-in;
@ -211,123 +206,6 @@ $vikunja-nav-selected-width: 0.4rem;
}
}
// these are general menu styles
// should be in own components
.menu {
.menu-label,
.menu-list .list-menu-link,
.menu-list a {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
}
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
&:hover {
background: var(--white);
}
.menu-list-dropdown {
opacity: 1;
transition: $transition;
}
@media(hover: hover) and (pointer: fine) {
.menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown {
opacity: 1;
}
}
}
.menu-item-icon {
color: var(--grey-400);
}
.menu-list-dropdown-trigger {
display: flex;
padding: 0.5rem;
}
.flip-list-move {
transition: transform $transition-duration;
}
.ghost {
background: var(--grey-200);
* {
opacity: 0;
}
}
a:hover {
background: transparent;
}
.list-menu-link,
li > a {
color: $vikunja-nav-color;
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
&:hover {
border-left: $vikunja-nav-selected-width solid var(--primary);
}
&.router-link-exact-active {
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
}
.icon {
height: 1rem;
vertical-align: middle;
padding-right: 0.5rem;
}
&.router-link-exact-active .icon:not(.handle) {
color: var(--primary);
}
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
}
&:hover .handle {
opacity: 1;
}
}
&:not(.dragging-disabled) .handle {
cursor: grab;
}
}
}
.top-menu {
margin-top: math.div($navbar-padding, 2);
@ -421,42 +299,4 @@ $vikunja-nav-selected-width: 0.4rem;
min-width: 85px;
}
}
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
color: $vikunja-nav-color;
padding: 0 .25rem;
.toggle-lists-icon {
svg {
transition: all $transition;
transform: rotate(90deg);
opacity: 1;
}
&.active svg {
transform: rotate(0deg);
opacity: 0;
}
}
&:hover .toggle-lists-icon svg {
opacity: 1;
}
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
.list-setting-spacer {
width: 2.5rem;
flex-shrink: 0;
}
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}
</style>

4
src/styles/common-imports.scss
View File

@ -33,3 +33,7 @@ $switch-view-height: 2.69rem;
$navbar-height: 4rem;
$navbar-width: 300px;
$navbar-padding: 2rem;
konrad marked this conversation as resolved Outdated
dpschen commented 2023-03-28 13:55:38 +00:00
Outdated
Review
Copy Link

These were meant as component local variables.

If we define them now as global we probably should replace them with css variables instead.

These were meant as component local variables. If we define them now as global we probably should replace them with css variables instead.
konrad commented 2023-03-28 14:50:07 +00:00
Outdated
Review
Copy Link

I think it's fine to use it as a scss variable since it will never change at runtime.

I think it's fine to use it as a scss variable since it will never change at runtime.
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;

3
src/styles/theme/_index.scss
View File

@ -8,4 +8,5 @@
@import "link-share";
@import "loading";
@import "flatpickr";
@import 'helpers';
@import 'helpers';
@import 'navigation';
dpschen commented 2023-04-11 16:04:46 +00:00
Outdated
Review
Copy Link

Since these styles are only used in the navigation component: import them only there

Since these styles are only used in the navigation component: import them only there
konrad commented 2023-04-12 09:53:17 +00:00
Outdated
Review
Copy Link

This only works if the imported styles are not scoped to the navigation component. I could still import them in a non-scoped style tag in that component but I guess it's probably better to refactor this whole thing at some point so that it uses individual components instead of one global style sheet (not in this PR)

This only works if the imported styles are not scoped to the navigation component. I could still import them in a non-scoped `style` tag in that component but I guess it's probably better to refactor this whole thing at some point so that it uses individual components instead of one global style sheet (not in this PR)

116
src/styles/theme/navigation.scss Normal file
View File

@ -0,0 +1,116 @@
// these are general menu styles
// should be in own components
.menu {
.menu-label,
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-04-01 13:03:21 +00:00
Outdated
Review
Copy Link

menu-label isn't used anymore.

`menu-label` isn't used anymore.
✅ 1
konrad commented 2023-04-01 14:54:29 +00:00
Outdated
Review
Copy Link

Removed.

Removed.
.menu-list .list-menu-link,
.menu-list a {
display: flex;
align-items: center;
cursor: pointer;
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
}
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
&:hover {
background: var(--white);
}
.menu-list-dropdown {
opacity: 1;
transition: $transition;
}
@media(hover: hover) and (pointer: fine) {
.menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown {
opacity: 1;
}
}
}
.menu-item-icon {
color: var(--grey-400);
}
.menu-list-dropdown-trigger {
display: flex;
padding: 0.5rem;
}
.flip-list-move {
transition: transform $transition-duration;
}
.ghost {
background: var(--grey-200);
* {
opacity: 0;
}
}
a:hover {
background: transparent;
}
.list-menu-link,
li > a {
color: $vikunja-nav-color;
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
&:hover {
border-left: $vikunja-nav-selected-width solid var(--primary);
}
&.router-link-exact-active {
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
}
.icon {
height: 1rem;
vertical-align: middle;
padding-right: 0.5rem;
}
&.router-link-exact-active .icon:not(.handle) {
color: var(--primary);
}
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
}
&:hover .handle {
opacity: 1;
}
}
&:not(.dragging-disabled) .handle {
cursor: grab;
}
}
}