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/dist/main.js

@@ -609,7 +609,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"userFlags\",\n  data: function data() {\n    return {\n      new_folder_name: \"\"\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    flags: function flags(state) {\n      return state.User.flags;\n    }\n  })),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    createFlag: 'User/createFlag',\n    deleteFlag: 'User/deleteFlag'\n  }), {\n    onCreateFlag: function onCreateFlag() {\n      var _this = this;\n\n      console.log(\"UserFlags onCreateFlag\", this.new_folder_name);\n      this.createFlag(this.new_folder_name).then(function (data) {\n        console.log(\"onCreateFlag then\", data);\n        _this.new_folder_name = \"\";\n      });\n    },\n    onDeleteFlag: function onDeleteFlag(e) {\n      var _this2 = this;\n\n      var flagid = e.target.getAttribute('flagid');\n      console.log(\"UserFlags onDeleteFlag\", flagid);\n      this.deleteFlag(flagid).then(function (data) {\n        console.log(\"onDeleteFlag then\", data);\n        _this2.new_folder_name = \"\";\n      });\n    }\n  })\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  name: \"userFlags\",\n  data: function data() {\n    return {\n      new_folder_name: \"\",\n      is_creating_folder: false\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    flags: function flags(state) {\n      return state.User.flags;\n    }\n  })),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    createFlag: 'User/createFlag',\n    deleteFlag: 'User/deleteFlag'\n  }), {\n    onCreateFlag: function onCreateFlag() {\n      var _this = this;\n\n      console.log(\"UserFlags onCreateFlag\", this.new_folder_name);\n      this.createFlag(this.new_folder_name).then(function (data) {\n        console.log(\"onCreateFlag then\", data);\n        _this.new_folder_name = \"\";\n      });\n    },\n    onDeleteFlag: function onDeleteFlag(e) {\n      var _this2 = this;\n\n      var flagid = e.target.getAttribute('flagid');\n      console.log(\"UserFlags onDeleteFlag\", flagid);\n      this.deleteFlag(flagid).then(function (data) {\n        console.log(\"onDeleteFlag then\", data);\n        _this2.new_folder_name = \"\";\n      });\n    }\n  })\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -691,17 +691,6 @@ eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./web/
 
 /***/ }),
 
-/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true&":
-/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true& ***!
-  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options");
-
-/***/ }),
-
 /***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=style&index=0&id=4e9a834e&lang=css&scoped=true&":
 /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=style&index=0&id=4e9a834e&lang=css&scoped=true& ***!
@@ -981,7 +970,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"user-flags\" } }, [\n    _c(\"h4\", { staticClass: \"mdi mdi-folder-outline\" }, [_vm._v(\"My folders\")]),\n    _vm._v(\" \"),\n    _c(\n      \"ul\",\n      [\n        _vm._l(_vm.flags, function(flag) {\n          return _vm.flags\n            ? _c(\"li\", { key: flag.id }, [\n                _c(\"h5\", [_vm._v(_vm._s(flag.name))]),\n                _vm._v(\" \"),\n                _c(\"span\", {\n                  staticClass: \"mdi mdi-trash-can-outline\",\n                  attrs: { flagid: flag.id },\n                  on: {\n                    click: function($event) {\n                      $event.preventDefault()\n                      return _vm.onDeleteFlag($event)\n                    }\n                  }\n                })\n              ])\n            : _vm._e()\n        }),\n        _vm._v(\" \"),\n        _c(\"li\", { ref: \"create-flag\" }, [\n          _c(\"span\", { staticClass: \"mdi mdi-folder-plus-outline\" }),\n          _vm._v(\" \"),\n          _c(\"input\", {\n            directives: [\n              {\n                name: \"model\",\n                rawName: \"v-model\",\n                value: _vm.new_folder_name,\n                expression: \"new_folder_name\"\n              }\n            ],\n            attrs: { placeholder: \"new folder\" },\n            domProps: { value: _vm.new_folder_name },\n            on: {\n              input: function($event) {\n                if ($event.target.composing) {\n                  return\n                }\n                _vm.new_folder_name = $event.target.value\n              }\n            }\n          }),\n          _vm._v(\" \"),\n          _vm.new_folder_name\n            ? _c(\"span\", {\n                staticClass: \"mdi mdi-plus-box\",\n                on: {\n                  click: function($event) {\n                    $event.preventDefault()\n                    return _vm.onCreateFlag($event)\n                  }\n                }\n              })\n            : _vm._e()\n        ])\n      ],\n      2\n    )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"user-flags\" } }, [\n    _c(\"h2\", { staticClass: \"mdi mdi-folder-outline\" }, [_vm._v(\"My folders\")]),\n    _vm._v(\" \"),\n    _c(\n      \"ul\",\n      [\n        _vm._l(_vm.flags, function(flag) {\n          return _vm.flags\n            ? _c(\"li\", { key: flag.id }, [\n                _c(\"h5\", [_vm._v(_vm._s(flag.name))]),\n                _vm._v(\" \"),\n                _c(\"div\", { staticClass: \"actions\" }, [\n                  _c(\"span\", {\n                    staticClass: \"mdi mdi-trash-can-outline\",\n                    attrs: { flagid: flag.id },\n                    on: {\n                      click: function($event) {\n                        $event.preventDefault()\n                        return _vm.onDeleteFlag($event)\n                      }\n                    }\n                  })\n                ])\n              ])\n            : _vm._e()\n        }),\n        _vm._v(\" \"),\n        _c(\"li\", { ref: \"create-flag\" }, [\n          _c(\"input\", {\n            directives: [\n              {\n                name: \"model\",\n                rawName: \"v-model\",\n                value: _vm.new_folder_name,\n                expression: \"new_folder_name\"\n              }\n            ],\n            attrs: { placeholder: \"new folder\" },\n            domProps: { value: _vm.new_folder_name },\n            on: {\n              input: function($event) {\n                if ($event.target.composing) {\n                  return\n                }\n                _vm.new_folder_name = $event.target.value\n              }\n            }\n          }),\n          _vm._v(\" \"),\n          _vm.new_folder_name && !_vm.is_creating_folder\n            ? _c(\"span\", {\n                staticClass: \"mdi mdi-plus-box\",\n                on: {\n                  click: function($event) {\n                    $event.preventDefault()\n                    return _vm.onCreateFlag($event)\n                  }\n                }\n              })\n            : _vm._e()\n        ])\n      ],\n      2\n    )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1806,7 +1795,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html& */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html&\");\n/* harmony import */ var _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./UserFlags.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  \"0e1971fa\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html& */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html&\");\n/* harmony import */ var _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./UserFlags.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n  _UserFlags_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _UserFlags_vue_vue_type_template_id_0e1971fa_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  \"0e1971fa\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?");
 
 /***/ }),
 
@@ -1822,18 +1811,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
-/***/ "./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true&":
-/*!**************************************************************************************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true& ***!
-  \**************************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=style&index=0&id=0e1971fa&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_UserFlags_vue_vue_type_style_index_0_id_0e1971fa_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?");
-
-/***/ }),
-
 /***/ "./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html&":
 /*!*********************************************************************************************************************************!*\
   !*** ./web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue?vue&type=template&id=0e1971fa&scoped=true&lang=html& ***!

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
+        <div class="actions">
-          class="mdi mdi-trash-can-outline"
+          <span
-          :flagid="flag.id"
+            class="mdi mdi-trash-can-outline"
-          @click.prevent="onDeleteFlag"
+            :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>