improved my folders display on header

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

@@ -1179,6 +1179,14 @@ main[role="main"] {
   main[role="main"] > .wrapper {
     width: 100vw; }
 
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+    transform-origin: center; }
+  to {
+    transform: rotate(360deg);
+    transform-origin: center; } }
+
 body {
   font-size: 16px;
   font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
@@ -1271,23 +1279,26 @@ header[role="banner"] {
     position: relative; }
     header[role="banner"] #user-flags h2 {
       cursor: pointer; }
+      header[role="banner"] #user-flags h2:before {
+        padding-right: 0.2em; }
     header[role="banner"] #user-flags ul {
-      position: absolute;
-      width: 8em;
-      left: 0;
       background-color: #fff;
-      border-radius: 3px;
+      overflow: hidden;
-      background-clip: padding-box;
+      width: 11em;
-      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;
+      padding: 0.01em 1em;
-      overflow: hidden; }
+      box-sizing: content-box;
+      transition: all 0.4s ease-in-out;
+      transition-delay: 2s;
+      position: absolute;
+      right: 0;
+      top: 1.7em;
+      box-sizing: content-box; }
     header[role="banner"] #user-flags:hover ul {
-      opacity: 1;
+      transition-delay: 0s;
-      max-height: 100px;
+      max-height: 12em;
-      transition: opacity,max-height 0.2s ease-in-out; }
+      padding: 1em 1em;
+      box-shadow: 0 0 10px #ccc; }
     header[role="banner"] #user-flags li {
       width: 100%;
       display: flex;
@@ -1302,17 +1313,32 @@ header[role="banner"] {
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
         padding-left: 0.5em; }
+        header[role="banner"] #user-flags li div.actions span.mdi {
+          cursor: pointer;
+          color: #4e4d4d; }
+        header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
+          animation: rotating 2s linear infinite; }
       header[role="banner"] #user-flags li:hover div.actions {
         opacity: 1; }
-      header[role="banner"] #user-flags li input {
+      header[role="banner"] #user-flags li.create-flag {
-        border: 1px solid #bbb;
+        margin-top: 0.2em; }
-        border-radius: 5px;
+        header[role="banner"] #user-flags li.create-flag input {
-        width: calc(100% - 2em);
+          align-self: flex-end;
-        font-size: 0.8em; }
+          border: 1px solid #bbb;
-      header[role="banner"] #user-flags li span.mdi-plus-box,
+          border-radius: 5px;
-      header[role="banner"] #user-flags li span.mdi-trash-can-outline {
+          width: calc(100% - 2em);
-        cursor: pointer;
+          font-size: 0.8em; }
-        color: #4e4d4d; }
+        header[role="banner"] #user-flags li.create-flag span.add-btn {
+          align-self: flex-end;
+          color: #bbb;
+          font-size: 1em;
+          padding: 0 0 0 .5em;
+          transition: all 0.2s ease-in-out; }
+          header[role="banner"] #user-flags li.create-flag span.add-btn.active {
+            cursor: pointer;
+            color: #1a1a1a; }
+          header[role="banner"] #user-flags li.create-flag span.add-btn.loading:before {
+            animation: rotating 2s linear infinite; }
   header[role="banner"] #block-header {
     margin-right: 1em;
     padding-left: 1em;

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

@@ -0,0 +1,11 @@
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+    transform-origin: center;
+  }
+  to {
+    transform: rotate(360deg);
+    transform-origin: center;
+  }
+}

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

@@ -11,8 +11,7 @@
 @import './base/colors';
 @import './base/grid';
 @import './base/layout';
-// $mdi-font-path: "./mdi/fonts";
+@import './base/animations';
-// @import './mdi/scss/materialdesignicons.scss';
 @import './base/fonts';
 
 
@@ -156,26 +155,30 @@ header[role="banner"]{
     h2{
       @extend %header-fs;
       cursor: pointer;
+      &:before{padding-right: 0.2em;}
     }
     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;
+      width:11em;
+      max-height:1px;
+      padding:0.01em 1em;
+      // margin:0 0 0 -1em;
+      box-sizing:content-box;
+      transition: all 0.4s ease-in-out;
+      // outline: 1px solid blue;
+      transition-delay: 2s;
+      position: absolute;
+      right:0;
+      top:1.7em;
+      box-sizing: content-box;
     }
     &:hover{
       ul{
-        opacity:1;
+        transition-delay: 0s;
-        max-height:100px;
+        max-height:12em;
-        transition: opacity,max-height 0.2s ease-in-out;
+        padding:1em 1em;
+        box-shadow: 0 0 10px #ccc;
       }
     }
     li{
@@ -196,6 +199,16 @@ header[role="banner"]{
         opacity:0;
         transition: opacity 0.3s ease-in-out;
         padding-left:0.5em;
+
+        span.mdi{
+          cursor: pointer;
+          color: #4e4d4d;
+        }
+        span.delete-btn{
+          &.loading:before{
+            animation: rotating 2s linear infinite;
+          }
+        }
       }
       &:hover{
         div.actions{
@@ -203,19 +216,29 @@ header[role="banner"]{
         }
       }
 
-      input{
+      &.create-flag{
+        margin-top: 0.2em;
+        input{
+          align-self: flex-end;
           border: 1px solid #bbb;
           border-radius:5px;
           width: calc(100% - 2em);
           font-size:0.8em;
-        // border: none;
+        }
-        // background-color:rgb(201, 201, 201);
+        span.add-btn{
-        // width:100%;
+          align-self: flex-end;
-      }
+          color: #bbb;
-      span.mdi-plus-box,
+          font-size: 1em;
-      span.mdi-trash-can-outline{
+          padding: 0 0 0 .5em;
-        cursor: pointer;
+          transition: all 0.2s ease-in-out;
-        color: #4e4d4d;
+          &.active{
+            cursor: pointer;
+            color:#1a1a1a;
+          }
+          &.loading:before{
+            animation: rotating 2s linear infinite;
+          }
+        }
       }
     }
   }

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

@@ -8,21 +8,21 @@
         <h5>{{ flag.name }}</h5>
         <div class="actions">
           <span
-            class="mdi mdi-trash-can-outline"
+            class="delete-btn mdi"
+            :class="flagDeletingClassObj"
             :flagid="flag.id"
             @click.prevent="onDeleteFlag"
           />
         </div>
       </li>
-      <li ref="create-flag">
+      <li class="create-flag">
         <input
           placeholder="new folder"
           v-model="new_folder_name"
         />
         <span
-
+          class="add-btn mdi"
-          class="mdi mdi-plus-box"
+          :class="addFlagBtnClassObj"
-          v-if="new_folder_name && !is_creating_folder"
           @click.prevent="onCreateFlag"
         />
       </li>
@@ -38,12 +38,28 @@ export default {
   name: "userFlags",
   data: () => ({
     new_folder_name: "",
-    is_creating_folder: false
+    is_creating_folder: false,
+    is_deleting_folder: false
   }),
   computed: {
     ...mapState({
       flags: state => state.User.flags
-    })
+    }),
+    addFlagBtnClassObj() {
+      return {
+        'mdi-plus-circle-outline': !this.is_creating_folder,
+        'mdi-loading': this.is_creating_folder,
+        active: this.new_folder_name.length > 4 && !this.is_creating_folder,
+        loading: this.is_creating_folder
+      }
+    },
+    flagDeletingClassObj() {
+      return {
+        'mdi-trash-can-outline': !this.is_deleting_folder,
+        'mdi-loading': this.is_deleting_folder,
+        'loading': this.is_deleting_folder
+      }
+    }
   },
   methods: {
     ...mapActions({
@@ -52,19 +68,22 @@ export default {
     }),
     onCreateFlag () {
       console.log("UserFlags onCreateFlag", this.new_folder_name)
+      this.is_creating_folder = true;
       this.createFlag(this.new_folder_name)
         .then(data => {
           console.log("onCreateFlag then", data);
           this.new_folder_name = "";
+          this.is_creating_folder = false;
         })
     },
     onDeleteFlag (e) {
       let flagid = e.target.getAttribute('flagid');
       console.log("UserFlags onDeleteFlag", flagid);
+      this.is_deleting_folder = flagid;
       this.deleteFlag(flagid)
-        .then(data => {
+        .then(() => {
-          console.log("onDeleteFlag then", data);
+          // console.log("onDeleteFlag then", data);
-          this.new_folder_name = "";
+          this.is_deleting_folder = false;
         })
     }
   }

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -175,35 +175,43 @@ export default {
     // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
     createFlag({ dispatch, commit, state }, new_flag_name) {
       console.log("user createFlag", new_flag_name);
-      const params = {
+      return new Promise((resolve, reject) => {
-        name: new_flag_name
+        const params = {
-      };
+          name: new_flag_name
-      return MA.post("materio_flag/create_user_flagging_collection", params)
+        };
-        .then(({ data }) => {
+        MA.post("materio_flag/create_user_flagging_collection", params)
-          console.log("user MA createFlag data", data);
+          .then(({ data }) => {
-          if (data.status) {
+            console.log("user MA createFlag data", data);
-            dispatch('getUserFlags');
+            if (data.status) {
-          }
+              dispatch('getUserFlags').then(() => {
-        })
+                resolve();
-        .catch(error => {
+              })
-          console.warn("Issue USER MA createFlag", error);
+            }
-          Promise.reject(error);
+          })
-        });
+          .catch(error => {
+            console.warn("Issue USER MA createFlag", error);
+            reject(error);
+          });
+      });
     },
     deleteFlag({ dispatch, commit, state }, flagid) {
       console.log("user deleteFlag", flagid);
-      const params = {
+      return new Promise((resolve, reject) => {
-        flagid: flagid
+        const params = {
-      };
+          flagid: flagid
-      return MA.post("materio_flag/delete_user_flagging_collection", params)
+        };
-        .then(({ data }) => {
+        MA.post("materio_flag/delete_user_flagging_collection", params)
-          console.log("user MA deleteFlag data", data);
+          .then(({ data }) => {
-          dispatch('getUserFlags');
+            console.log("user MA deleteFlag data", data);
-        })
+            dispatch('getUserFlags').then(() =>{
-        .catch(error => {
+              resolve();
-          console.warn("Issue USER MA createFlag", error);
+            });
-          Promise.reject(error);
+          })
-        });
+          .catch(error => {
+            console.warn("Issue USER MA createFlag", error);
+            reject(error);
+          });
+      });
     },
     userLogout({ commit, state }) {
       const credentials = qs.stringify({