From fb7acbe3ed91d2f4fe4eca43ed09a80f93b80cdd Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 19 Nov 2020 21:43:56 +0100 Subject: [PATCH] improved my folders display on header --- .../src/Controller/MaterioFlagController.php | 7 +- .../custom/materiotheme/assets/dist/main.css | 82 +++++++++++++----- .../custom/materiotheme/assets/dist/main.js | 29 +------ .../assets/styles/base/_layout.scss | 2 +- .../materiotheme/assets/styles/main.scss | 83 +++++++++++++++++++ .../vuejs/components/User/UserFlags.vue | 46 ++++------ .../vuejs/components/User/UserTools.vue | 1 + 7 files changed, 167 insertions(+), 83 deletions(-) diff --git a/web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php b/web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php index 49d3df72..2de286ea 100644 --- a/web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php +++ b/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); diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index ff95c049..b94a906e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/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; diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 8b652854..94558a7b 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/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& ***! diff --git a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss index 137cd442..cc45121d 100644 --- a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss +++ b/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; } diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 1bbd8792..e796b436 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/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 diff --git a/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue b/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue index b070522f..638010d0 100644 --- a/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue +++ b/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue @@ -1,26 +1,28 @@