improved my folders display on header

web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php

@@ -94,10 +94,13 @@ class MaterioFlagController extends ControllerBase {
     $flagid = $post_data['flagid'];
 
     $flagcoll = $this->flaglists->getFlaggingCollectionById($flagid);
-    $result = $flagcoll->delete();
+    // dump($flagcoll);
+    $flagcoll->delete();
+    // TODO: warning, sometimes relatedFlag deos not exists
+    // $flag = $flagcoll->getRelatedFlag();
 
     $data = [
-      'result' => $result,
+      // 'result' => $flag,
       'id' => $flagid
     ];
     return new JsonResponse($data);

web/themes/custom/materiotheme/assets/dist/main.css

@@ -61,27 +61,6 @@ fieldset[data-v-340aa566] {
 }
 
 
-li[data-v-0e1971fa] {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  flex-wrap: nowrap;
-}
-li h5[data-v-0e1971fa] {
-    width: 100%;
-}
-li input[data-v-0e1971fa] {
-    border: none;
-}
-li span.mdi[data-v-0e1971fa] {
-    flex-basis: 1em;
-}
-li span.mdi-plus-box[data-v-0e1971fa],
-  li span.mdi-trash-can-outline[data-v-0e1971fa] {
-    cursor: pointer;
-}
-
 
 #user-tools[data-v-4e9a834e]{
   margin-right:0.5em;
@@ -92,6 +71,7 @@ h4[data-v-4e9a834e]{
   margin:0;
   display:inline-block;
   font-size:inherited;
+  vertical-align: top;
 }
 
 body {
@@ -1211,7 +1191,7 @@ aside.messages {
 
 header[role="banner"] {
   padding: 0.2em 0 0 0; }
-  header[role="banner"] #block-userlogin h2, header[role="banner"] #block-header ul.menu li a {
+  header[role="banner"] #block-userlogin h2, header[role="banner"] #user-tools h4, header[role="banner"] #user-flags h2, header[role="banner"] #user-flags li h5, header[role="banner"] #block-header ul.menu li a {
     font-size: 0.9em;
     font-weight: 400; }
   header[role="banner"] #block-sitebranding h1 {
@@ -1275,6 +1255,64 @@ header[role="banner"] {
     display: none; }
   header[role="banner"] #block-userblock a {
     margin-right: 1em; }
+  header[role="banner"] #user-tools {
+    padding-top: 0.06em; }
+    header[role="banner"] #user-tools h4 {
+      cursor: pointer; }
+    header[role="banner"] #user-tools .mdi-logout::before {
+      margin: -0.125em 0 0 0;
+      vertical-align: top; }
+  header[role="banner"] #user-flags {
+    border-left: 1px solid #000;
+    padding-left: 0.5em;
+    margin-left: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+    position: relative; }
+    header[role="banner"] #user-flags h2 {
+      cursor: pointer; }
+    header[role="banner"] #user-flags ul {
+      position: absolute;
+      width: 8em;
+      left: 0;
+      background-color: #fff;
+      border-radius: 3px;
+      background-clip: padding-box;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      padding: 0.3em 0.3em 0.5em;
+      opacity: 0;
+      max-height: 1px;
+      transition: opacity,max-height 0.3s ease-in-out;
+      overflow: hidden; }
+    header[role="banner"] #user-flags:hover ul {
+      opacity: 1;
+      max-height: 100px;
+      transition: opacity,max-height 0.2s ease-in-out; }
+    header[role="banner"] #user-flags li {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      flex-wrap: nowrap; }
+      header[role="banner"] #user-flags li h5 {
+        cursor: pointer; }
+      header[role="banner"] #user-flags li span.mdi {
+        font-size: 0.9em; }
+      header[role="banner"] #user-flags li div.actions {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        padding-left: 0.5em; }
+      header[role="banner"] #user-flags li:hover div.actions {
+        opacity: 1; }
+      header[role="banner"] #user-flags li input {
+        border: 1px solid #bbb;
+        border-radius: 5px;
+        width: calc(100% - 2em);
+        font-size: 0.8em; }
+      header[role="banner"] #user-flags li span.mdi-plus-box,
+      header[role="banner"] #user-flags li span.mdi-trash-can-outline {
+        cursor: pointer;
+        color: #4e4d4d; }
   header[role="banner"] #block-header {
     margin-right: 1em;
     padding-left: 1em;

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -74,7 +74,7 @@ header[role="banner"]{
       }
       &>*{
         display: inline-block;
-        vertical-align: top;
+        vertical-align:top;
         font-size: $base_font_size;
         text-align: left;
       }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -134,7 +134,90 @@ header[role="banner"]{
   }
   // vue userblock
   #user-tools{
+    padding-top: 0.06em;
+    h4{
+      @extend %header-fs;
+      cursor: pointer;
+    }
+    .mdi-logout::before {
+      margin: -0.125em 0 0 0;
+      vertical-align: top;
+    }
+  }
 
+  // vue flaglist
+  #user-flags{
+    border-left: 1px solid #000;
+    padding-left: 0.5em;
+    margin-left: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    h2{
+      @extend %header-fs;
+      cursor: pointer;
+    }
+    ul{
+      position: absolute;
+      width:8em;
+      left:0;
+      background-color: #fff;
+      border-radius: 3px;
+      background-clip: padding-box;
+      box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
+      padding:0.3em 0.3em 0.5em;
+      opacity:0;
+      max-height:1px;
+      transition: opacity,max-height 0.3s ease-in-out;
+      overflow: hidden;
+    }
+    &:hover{
+      ul{
+        opacity:1;
+        max-height:100px;
+        transition: opacity,max-height 0.2s ease-in-out;
+      }
+    }
+    li{
+      width:100%;
+      // cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      flex-wrap: nowrap;
+      h5{
+        @extend %header-fs;
+        cursor: pointer;
+      }
+      span.mdi{
+        font-size: 0.9em;
+      }
+      div.actions{
+        opacity:0;
+        transition: opacity 0.3s ease-in-out;
+        padding-left:0.5em;
+      }
+      &:hover{
+        div.actions{
+          opacity:1;
+        }
+      }
+
+      input{
+          border: 1px solid #bbb;
+          border-radius:5px;
+          width: calc(100% - 2em);
+          font-size:0.8em;
+        // border: none;
+        // background-color:rgb(201, 201, 201);
+        // width:100%;
+      }
+      span.mdi-plus-box,
+      span.mdi-trash-can-outline{
+        cursor: pointer;
+        color: #4e4d4d;
+      }
+    }
   }
 
   // menu

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -1,26 +1,28 @@
 <template lang="html">
   <div id="user-flags">
-    <h4
+    <h2
       class="mdi mdi-folder-outline"
-    >My folders</h4>
+    >My folders</h2>
     <ul>
       <li  v-if="flags" v-for="flag in flags" :key="flag.id">
         <h5>{{ flag.name }}</h5>
-        <span
-          class="mdi mdi-trash-can-outline"
-          :flagid="flag.id"
-          @click.prevent="onDeleteFlag"
-        />
+        <div class="actions">
+          <span
+            class="mdi mdi-trash-can-outline"
+            :flagid="flag.id"
+            @click.prevent="onDeleteFlag"
+          />
+        </div>
       </li>
       <li ref="create-flag">
-        <span class="mdi mdi-folder-plus-outline"/>
         <input
           placeholder="new folder"
           v-model="new_folder_name"
         />
         <span
+
           class="mdi mdi-plus-box"
-          v-if="new_folder_name"
+          v-if="new_folder_name && !is_creating_folder"
           @click.prevent="onCreateFlag"
         />
       </li>
@@ -35,7 +37,8 @@ import { mapState, mapActions } from 'vuex'
 export default {
   name: "userFlags",
   data: () => ({
-    new_folder_name: ""
+    new_folder_name: "",
+    is_creating_folder: false
   }),
   computed: {
     ...mapState({
@@ -69,26 +72,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  li{
-    width:100%;
-    // cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    flex-wrap: nowrap;
-    h5{
-      // flex-grow:10;
-      width:100%;
-    }
-    input{
-      border: none
-    }
-    span.mdi{
-      flex-basis:1em;
-    }
-    span.mdi-plus-box,
-    span.mdi-trash-can-outline{
-      cursor: pointer;
-    }
-  }
+
 </style>

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -60,5 +60,6 @@ h4{
   margin:0;
   display:inline-block;
   font-size:inherited;
+  vertical-align: top;
 }
 </style>