better flagcolls list display

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-11 19:14:20 +01:00
parent df71378e5f
commit 88445b4397
4 changed files with 10 additions and 3 deletions

View File

@ -1370,7 +1370,10 @@ header[role="banner"] {
align-items: baseline; align-items: baseline;
flex-wrap: nowrap; } flex-wrap: nowrap; }
header[role="banner"] #user-flags li h5 { header[role="banner"] #user-flags li h5 {
cursor: pointer; } cursor: pointer;
font-weight: 700; }
header[role="banner"] #user-flags li h5 span.length {
font-weight: 300; }
header[role="banner"] #user-flags li span.mdi { header[role="banner"] #user-flags li span.mdi {
font-size: 0.9em; } font-size: 0.9em; }
header[role="banner"] #user-flags li div.actions { header[role="banner"] #user-flags li div.actions {

View File

@ -3740,7 +3740,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict"; "use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { attrs: { id: \"user-flags\" } },\n [\n _c(\"h2\", { staticClass: \"mdi mdi-folder-outline\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.My folders\")) +\n \" (\" +\n _vm._s(_vm.collsLength) +\n \")\"\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n [\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"h5\",\n {\n attrs: { flagcollid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onOpenFlagColl($event)\n }\n }\n },\n [\n _vm._v(\n _vm._s(coll.name) +\n \" (\" +\n _vm._s(coll.items.length) +\n \")\"\n )\n ]\n ),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"actions\" }, [\n _c(\"span\", {\n staticClass: \"delete-btn mdi\",\n class: _vm.flagDeletingClassObj,\n attrs: { flagcollid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onDeleteFlagColl($event)\n }\n }\n })\n ])\n ])\n : _vm._e()\n }),\n _vm._v(\" \"),\n _vm.collsLength < 15\n ? _c(\"li\", { staticClass: \"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 keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n },\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 _c(\"span\", {\n staticClass: \"add-btn mdi\",\n class: _vm.addFlagBtnClassObj,\n on: {\n click: function($event) {\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n }\n }\n })\n ])\n : _vm._e()\n ],\n 2\n ),\n _vm._v(\" \"),\n _c(\"v-dialog\")\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./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/index.js??vue-loader-options"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { attrs: { id: \"user-flags\" } },\n [\n _c(\"h2\", { staticClass: \"mdi mdi-folder-outline\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.My folders\")) +\n \" (\" +\n _vm._s(_vm.collsLength) +\n \")\"\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n [\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"h5\",\n {\n attrs: { flagcollid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onOpenFlagColl($event)\n }\n }\n },\n [\n _vm._v(_vm._s(coll.name) + \" \"),\n _c(\"span\", { staticClass: \"length\" }, [\n _vm._v(\"(\" + _vm._s(coll.items.length) + \")\")\n ])\n ]\n ),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"actions\" }, [\n _c(\"span\", {\n staticClass: \"delete-btn mdi\",\n class: _vm.flagDeletingClassObj,\n attrs: { flagcollid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onDeleteFlagColl($event)\n }\n }\n })\n ])\n ])\n : _vm._e()\n }),\n _vm._v(\" \"),\n _vm.collsLength < 15\n ? _c(\"li\", { staticClass: \"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 keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n },\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 _c(\"span\", {\n staticClass: \"add-btn mdi\",\n class: _vm.addFlagBtnClassObj,\n on: {\n click: function($event) {\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n }\n }\n })\n ])\n : _vm._e()\n ],\n 2\n ),\n _vm._v(\" \"),\n _c(\"v-dialog\")\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./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/index.js??vue-loader-options");
/***/ }), /***/ }),

View File

@ -204,6 +204,10 @@ header[role="banner"]{
h5{ h5{
@extend %header-fs; @extend %header-fs;
cursor: pointer; cursor: pointer;
font-weight: 700;
span.length{
font-weight: 300;
}
} }
span.mdi{ span.mdi{
font-size: 0.9em; font-size: 0.9em;

View File

@ -8,7 +8,7 @@
<h5 <h5
:flagcollid="coll.id" :flagcollid="coll.id"
@click.prevent="onOpenFlagColl" @click.prevent="onOpenFlagColl"
>{{ coll.name }} ({{ coll.items.length }})</h5> >{{ coll.name }} <span class="length">({{ coll.items.length }})</span></h5>
<div class="actions"> <div class="actions">
<span <span
class="delete-btn mdi" class="delete-btn mdi"