local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: namespace new buttons on mobile (#1262)

Browse source 
Before:

![image](/attachments/7626e28d-8a13-4f92-b162-697676f765c7)

After:

![image](/attachments/5331af47-4887-4ba5-98d7-ee70311e20d7)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1262
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2022-01-05 12:46:33 +00:00 committed by Dominik Pschenitschni
parent 380af7fbf2
commit c618b7e0b6
7 changed files with 82 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/list/list.spec.js
View file

@ -31,7 +31,7 @@ describe('Lists', () => {
cy.url() cy.url()
.should('contain', '/namespaces/1/list') .should('contain', '/namespaces/1/list')
cy.get('.card-header-title') cy.get('.card-header-title')
.contains('Create a new list') .contains('New list')
cy.get('input.input') cy.get('input.input')
.type('New List') .type('New List')
cy.get('.button') cy.get('.button')

26
cypress/integration/list/namespaces.spec.js
View file

@ -15,7 +15,7 @@ describe('Namepaces', () => {
it('Should be all there', () => { it('Should be all there', () => {
cy.visit('/namespaces') cy.visit('/namespaces')
cy.get('.namespace h1 span') cy.get('[data-cy="namespace-title"]')
.should('contain', namespaces[0].title) .should('contain', namespaces[0].title)
}) })
@ -23,14 +23,14 @@ describe('Namepaces', () => {
const newNamespaceTitle = 'New Namespace' const newNamespaceTitle = 'New Namespace'
cy.visit('/namespaces') cy.visit('/namespaces')
cy.get('a.button') cy.get('[data-cy="new-namespace"]')
.contains('Create a new namespace') .should('contain', 'New namespace')
.click() .click()
cy.url() cy.url()
.should('contain', '/namespaces/new') .should('contain', '/namespaces/new')
cy.get('.card-header-title') cy.get('.card-header-title')
.should('contain', 'Create a new namespace') .should('contain', 'New namespace')
cy.get('input.input') cy.get('input.input')
.type(newNamespaceTitle) .type(newNamespaceTitle)
cy.get('.button') cy.get('.button')
@ -72,7 +72,7 @@ describe('Namepaces', () => {
cy.get('.namespace-container .menu.namespaces-lists') cy.get('.namespace-container .menu.namespaces-lists')
.should('contain', newNamespaceName) .should('contain', newNamespaceName)
.should('not.contain', newNamespaces[0].title) .should('not.contain', newNamespaces[0].title)
cy.get('.content.namespaces-list') cy.get('[data-cy="namespaces-list"]')
.should('contain', newNamespaceName) .should('contain', newNamespaceName)
.should('not.contain', newNamespaces[0].title) .should('not.contain', newNamespaces[0].title)
}) })
@ -116,30 +116,30 @@ describe('Namepaces', () => {
// Initial // Initial
cy.visit('/namespaces') cy.visit('/namespaces')
cy.get('.namespaces-list .namespace') cy.get('.namespace')
.should('not.contain', 'Archived') .should('not.contain', 'Archived')
// Show 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') .should('be.visible')
.click() .click()
cy.get('.namespaces-list .fancycheckbox.show-archived-check input') cy.get('[data-cy="show-archived-check"] input')
.should('be.checked') .should('be.checked')
cy.get('.namespaces-list .namespace') cy.get('.namespace')
.should('contain', 'Archived') .should('contain', 'Archived')
// Don't show 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') .should('be.visible')
.click() .click()
cy.get('.namespaces-list .fancycheckbox.show-archived-check input') cy.get('[data-cy="show-archived-check"] input')
.should('not.be.checked') .should('not.be.checked')
// Second time visiting after unchecking // Second time visiting after unchecking
cy.visit('/namespaces') cy.visit('/namespaces')
cy.get('.namespaces-list .fancycheckbox.show-archived-check input') cy.get('[data-cy="show-archived-check"] input')
.should('not.be.checked') .should('not.be.checked')
cy.get('.namespaces-list .namespace') cy.get('.namespace')
.should('not.contain', 'Archived') .should('not.contain', 'Archived')
}) })
}) })

4
src/components/home/navigation.vue
View file

@ -555,4 +555,8 @@ $vikunja-nav-selected-width: 0.4rem;
width: 32px; width: 32px;
flex-shrink: 0; flex-shrink: 0;
} }
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}
</style> </style>

8
src/i18n/lang/en.json
View file

@ -7,7 +7,7 @@
"lastViewed": "Last viewed", "lastViewed": "Last viewed",
"list": { "list": {
"newText": "You can create a new list for your new tasks:", "newText": "You can create a new list for your new tasks:",
"new": "Create a new list", "new": "New list",
"importText": "Or import your lists and tasks from other services into Vikunja:", "importText": "Or import your lists and tasks from other services into Vikunja:",
"import": "Import your data into Vikunja" "import": "Import your data into Vikunja"
} }
@ -157,7 +157,7 @@
"searchSelect": "Click or press enter to select this list", "searchSelect": "Click or press enter to select this list",
"shared": "Shared Lists", "shared": "Shared Lists",
"create": { "create": {
"header": "Create a new list", "header": "New list",
"titlePlaceholder": "The list's title goes here…", "titlePlaceholder": "The list's title goes here…",
"addTitleRequired": "Please specify a title.", "addTitleRequired": "Please specify a title.",
"createdSuccess": "The list was successfully created.", "createdSuccess": "The list was successfully created.",
@ -315,7 +315,7 @@
"namespaces": "Namespaces", "namespaces": "Namespaces",
"search": "Type to search for a namespace…", "search": "Type to search for a namespace…",
"create": { "create": {
"title": "Create a new namespace", "title": "New namespace",
"titleRequired": "Please specify a title.", "titleRequired": "Please specify a title.",
"explanation": "A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.", "explanation": "A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.",
"tooltip": "What's a namespace?", "tooltip": "What's a namespace?",
@ -383,7 +383,7 @@
"reminderRange": "Reminder Date Range" "reminderRange": "Reminder Date Range"
}, },
"create": { "create": {
"title": "Create A Saved Filter", "title": "New Saved Filter",
"description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.", "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
"action": "Create new saved filter" "action": "Create new saved filter"
}, },

3
src/styles/components/_index.scss
View file

@ -2,5 +2,4 @@
@import "labels"; @import "labels";
@import "list"; @import "list";
@import "task"; @import "task";
@import "tasks"; @import "tasks";
@import "namespaces";

4
src/styles/components/namespaces.scss
View file

@ -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});
}

108
src/views/namespaces/ListNamespaces.vue
View file

@ -1,15 +1,19 @@
<template> <template>
<div class="content namespaces-list loader-container" :class="{'is-loading': loading}"> <div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus"> <header class="namespace-header">
{{ $t('namespace.create.title') }} <fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
</x-button> {{ $t('namespace.showArchived') }}
<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter"> </fancycheckbox>
{{ $t('filters.create.title') }}
</x-button>
<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState"> <div class="action-buttons">
{{ $t('namespace.showArchived') }} <x-button :to="{name: 'filters.create'}" icon="filter">
</fancycheckbox> {{ $t('filters.create.title') }}
</x-button>
<x-button :to="{name: 'namespace.create'}" icon="plus" v-cy="'new-namespace'">
{{ $t('namespace.create.title') }}
</x-button>
</div>
</header>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0"> <p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
{{ $t('namespace.noneAvailable') }} {{ $t('namespace.noneAvailable') }}
@ -38,12 +42,12 @@
{{ $t('namespace.unarchive') }} {{ $t('namespace.unarchive') }}
</x-button> </x-button>
<h1> <h2 class="namespace-title">
<span>{{ getNamespaceTitle(n) }}</span> <span v-cy="'namespace-title'">{{ getNamespaceTitle(n) }}</span>
<span class="is-archived" v-if="n.isArchived"> <span class="is-archived" v-if="n.isArchived">
{{ $t('namespace.archived') }} {{ $t('namespace.archived') }}
</span> </span>
</h1> </h2>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0"> <p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
{{ $t('namespace.noLists') }} {{ $t('namespace.noLists') }}
@ -103,47 +107,53 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.namespaces-list { .namespace-header {
.button.new-namespace { display: flex;
float: right; justify-content: space-between;
margin-left: 1rem; align-items: center;
gap: 1rem;
@media screen and (max-width: $mobile) { @media screen and (max-width: $tablet) {
float: none; flex-direction: column;
width: 100%; }
margin-bottom: 1rem; }
}
}
.show-archived-check { .action-buttons {
margin-bottom: 1rem; display: flex;
} justify-content: space-between;
gap: 1rem;
.namespace { @media screen and (max-width: $tablet) {
&:not(:last-child) { width: 100%;
margin-bottom: 1rem; flex-direction: column;
} align-items: stretch;
}
}
h1 { .namespace {
display: flex; & + & {
align-items: center; margin-top: 1rem;
} }
}
.is-archived { .namespace-title {
font-size: 0.75rem; display: flex;
border: 1px solid var(--grey-500); align-items: center;
color: $grey !important; }
padding: 2px 4px;
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
}
.lists { .is-archived {
display: flex; font-size: 0.75rem;
flex-flow: row wrap; 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;
}
.lists {
display: flex;
flex-flow: row wrap;
} }
</style> </style>