forked from vikunja/frontend
Compare commits
9 Commits
main
...
fix/new-bu
Author | SHA1 | Date |
---|---|---|
kolaente | 74af089571 | |
kolaente | 3d8b473080 | |
kolaente | 19a587a332 | |
kolaente | bfd7856ffc | |
kolaente | 64c2c551d8 | |
kolaente | 1a3fc822bb | |
kolaente | 4006822089 | |
kolaente | 9aeb9e7349 | |
kolaente | cde2f198d0 |
|
@ -72,7 +72,7 @@ describe('Namepaces', () => {
|
|||
cy.get('.namespace-container .menu.namespaces-lists')
|
||||
.should('contain', newNamespaceName)
|
||||
.should('not.contain', newNamespaces[0].title)
|
||||
cy.get('.content.namespaces-list')
|
||||
cy.get('[data-cy="namespaces-list"]')
|
||||
.should('contain', newNamespaceName)
|
||||
.should('not.contain', newNamespaces[0].title)
|
||||
})
|
||||
|
@ -116,30 +116,30 @@ describe('Namepaces', () => {
|
|||
|
||||
// Initial
|
||||
cy.visit('/namespaces')
|
||||
cy.get('.namespaces-list .namespace')
|
||||
cy.get('.namespace')
|
||||
.should('not.contain', 'Archived')
|
||||
|
||||
// Show archived
|
||||
cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span')
|
||||
cy.get('[data-cy="show-archived-check"] label.check span')
|
||||
.should('be.visible')
|
||||
.click()
|
||||
cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
|
||||
cy.get('[data-cy="show-archived-check"] input')
|
||||
.should('be.checked')
|
||||
cy.get('.namespaces-list .namespace')
|
||||
cy.get('.namespace')
|
||||
.should('contain', 'Archived')
|
||||
|
||||
// Don't show archived
|
||||
cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span')
|
||||
cy.get('[data-cy="show-archived-check"] label.check span')
|
||||
.should('be.visible')
|
||||
.click()
|
||||
cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
|
||||
cy.get('[data-cy="show-archived-check"] input')
|
||||
.should('not.be.checked')
|
||||
|
||||
// Second time visiting after unchecking
|
||||
cy.visit('/namespaces')
|
||||
cy.get('.namespaces-list .fancycheckbox.show-archived-check input')
|
||||
cy.get('[data-cy="show-archived-check"] input')
|
||||
.should('not.be.checked')
|
||||
cy.get('.namespaces-list .namespace')
|
||||
cy.get('.namespace')
|
||||
.should('not.contain', 'Archived')
|
||||
})
|
||||
})
|
||||
|
|
|
@ -555,4 +555,8 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.namespaces-list.loader-container.is-loading {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,5 +2,4 @@
|
|||
@import "labels";
|
||||
@import "list";
|
||||
@import "task";
|
||||
@import "tasks";
|
||||
@import "namespaces";
|
||||
@import "tasks";
|
|
@ -1,4 +0,0 @@
|
|||
// FIXME: used in navigation.vue and in ListNamespaces.vue
|
||||
.namespaces-list.loader-container.is-loading {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
|
||||
}
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
|
||||
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
|
||||
{{ $t('namespace.create.title') }}
|
||||
</x-button>
|
||||
<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
|
||||
{{ $t('filters.create.title') }}
|
||||
</x-button>
|
||||
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
||||
<div class="create-buttons">
|
||||
<fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
|
||||
{{ $t('namespace.showArchived') }}
|
||||
</fancycheckbox>
|
||||
|
||||
<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState">
|
||||
{{ $t('namespace.showArchived') }}
|
||||
</fancycheckbox>
|
||||
<x-button :to="{name: 'filters.create'}" class="new-namespace ml-auto" icon="filter">
|
||||
{{ $t('filters.create.title') }}
|
||||
</x-button>
|
||||
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
|
||||
{{ $t('namespace.create.title') }}
|
||||
</x-button>
|
||||
</div>
|
||||
|
||||
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
|
||||
{{ $t('namespace.noneAvailable') }}
|
||||
|
@ -103,47 +105,52 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.namespaces-list {
|
||||
.button.new-namespace {
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
.namespace {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show-archived-check {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.is-archived {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--grey-500);
|
||||
color: $grey !important;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: $vikunja-font;
|
||||
background: var(--white-translucent);
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.lists {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.create-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
.is-archived {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--grey-500);
|
||||
color: $grey !important;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: $vikunja-font;
|
||||
background: var(--white-translucent);
|
||||
margin-left: .5rem;
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.lists {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
}
|
||||
.new-namespace {
|
||||
margin-bottom: .5rem;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
margin-left: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue