bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved my folders display on header

This commit is contained in:
Bachir Soussi Chiadmi 2020-11-19 21:43:56 +01:00
parent a8645a4b2a
commit fb7acbe3ed
7 changed files with 167 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php
View File

@ -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);

82
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -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;

29
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

@ -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& ***!

2
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

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

83
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -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

36
web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue
View File

@ -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>
<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>

1
web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue
View File

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