Move list edit/namespace to separate pages and in a menu (#397)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/397
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/styles/theme/content.scss

@@ -64,3 +64,17 @@
 .underline-none {
   text-decoration: none !important;
 }
+
+.table.has-actions {
+  border-top: 1px solid $grey-100;
+  border-radius: 4px;
+  overflow: hidden;
+
+  td {
+    vertical-align: middle;
+  }
+
+  td.actions {
+    text-align: right;
+  }
+}

src/styles/theme/form.scss

@@ -36,6 +36,11 @@
 
 .field.has-addons .button {
   height: 2.5rem;
+  margin-left: 0 !important;
+}
+
+.field.has-addons .select select {
+  margin-right: 0;
 }
 
 .input,

src/styles/theme/navigation.scss

@@ -179,13 +179,14 @@
           }
         }
 
-        .actions {
-          flex: 0 0 auto;
+        a:not(.dropdown-item) {
+          color: $vikunja-nav-color;
+          padding: 0 .25rem;
+        }
 
-          a {
-            color: $vikunja-nav-color;
-            padding: 0 .25rem;
-          }
+        .dropdown-trigger {
+          padding: .5rem;
+          cursor: pointer;
         }
       }
 
@@ -223,15 +224,36 @@
         &.can-be-hidden {
           transition: all $transition;
           height: 0;
-          overflow: hidden;
+          //overflow: hidden;
           opacity: 0;
         }
 
         li {
           height: 44px;
+          display: flex;
+          align-items: center;
+
+          .dropdown-trigger {
+            opacity: 0;
+            padding: .5rem;
+            cursor: pointer;
+            transition: $transition;
+          }
+
+          &:hover {
+            background: $white;
+
+            .dropdown-trigger {
+              opacity: 1;
+            }
+          }
         }
 
-        span.list-menu-link, a {
+        a:hover {
+          background: transparent;
+        }
+
+        span.list-menu-link, li > a {
           padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
@@ -261,10 +283,8 @@
           }
 
           &:hover {
-            background: $white;
             border-left: $vikunja-nav-selected-width solid $primary;
           }
-
         }
       }
 
@@ -302,7 +322,7 @@
           font-family: $vikunja-font;
         }
 
-        span.list-menu-link, a {
+        span.list-menu-link, li > a {
           padding-left: 2rem;
           display: inline-block;
         }
@@ -342,12 +362,6 @@
       box-shadow: none !important;
     }
   }
-
-  .dropdown-menu {
-    .dropdown-content {
-      box-shadow: $shadow-md;
-    }
-  }
 }
 
 .menu-hide-button, .menu-show-button {

src/styles/theme/theme.scss

@@ -72,11 +72,26 @@ button.table {
   margin-bottom: 0 !important;
 }
 
-.dropdown-item.is-disabled {
-  cursor: not-allowed;
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: left !important;
 
-  &:hover {
-    background-color: transparent;
+  .icon {
+    padding-right: .5rem;
+    color: $grey-300 !important;
+  }
+
+  &.has-text-danger .icon {
+    color: $danger !important;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 }
 
@@ -120,3 +135,9 @@ button.table {
   border-radius: 100%;
   margin-right: 4px;
 }
+
+.dropdown-menu {
+  .dropdown-content {
+    box-shadow: $shadow-md;
+  }
+}

src/styles/theme/variables/colors.scss

@@ -1,3 +1,4 @@
+$grey-50: #F9FAFB;
 $grey-100: #f3f4f6;
 $grey-200: #E5E7EB;
 $grey-300: #D1D5DB;