feat: review changes

cypress/integration/list/list.spec.js

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

cypress/integration/list/namespaces.spec.js

@@ -15,7 +15,7 @@ describe('Namepaces', () => {
 
 	it('Should be all there', () => {
 		cy.visit('/namespaces')
-		cy.get('.namespace h1 span')
+		cy.get('[data-cy="namespace-title"]')
 			.should('contain', namespaces[0].title)
 	})
 
@@ -23,14 +23,14 @@ describe('Namepaces', () => {
 		const newNamespaceTitle = 'New Namespace'
 
 		cy.visit('/namespaces')
-		cy.get('a.button')
+		cy.get('[data-cy="new-namespace"]')
-			.contains('Create a new namespace')
+			.should('contain', 'New namespace')
 			.click()
 
 		cy.url()
 			.should('contain', '/namespaces/new')
 		cy.get('.card-header-title')
-			.should('contain', 'Create a new namespace')
+			.should('contain', 'New namespace')
 		cy.get('input.input')
 			.type(newNamespaceTitle)
 		cy.get('.button')
@@ -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')
 	})
 })

src/components/home/navigation.vue

@@ -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>

src/i18n/lang/en.json

@@ -7,7 +7,7 @@
     "lastViewed": "Last viewed",
     "list": {
       "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:",
       "import": "Import your data into Vikunja"
     }
@@ -157,7 +157,7 @@
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
     "create": {
-      "header": "Create a new list",
+      "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
       "addTitleRequired": "Please specify a title.",
       "createdSuccess": "The list was successfully created.",
@@ -315,7 +315,7 @@
     "namespaces": "Namespaces",
     "search": "Type to search for a namespace…",
     "create": {
-      "title": "Create a new namespace",
+      "title": "New namespace",
       "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.",
       "tooltip": "What's a namespace?",
@@ -383,7 +383,7 @@
       "reminderRange": "Reminder Date Range"
     },
     "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.",
       "action": "Create new saved filter"
     },

src/styles/components/_index.scss

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

src/styles/components/namespaces.scss

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

src/views/namespaces/ListNamespaces.vue

@@ -1,15 +1,19 @@
 <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">
 			{{ $t('namespace.noneAvailable') }}
@@ -38,12 +42,12 @@
 				{{ $t('namespace.unarchive') }}
 			</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">
 					{{ $t('namespace.archived') }}
 				</span>
-			</h1>
+			</h2>
 
 			<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
 				{{ $t('namespace.noLists') }}
@@ -103,47 +107,53 @@ export default {
 </script>
 
 <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>