improved my folders display on header

This commit is contained in:
Bachir Soussi Chiadmi 2020-11-20 10:39:19 +01:00
parent ce31859bb6
commit ffc4a88094
6 changed files with 172 additions and 85 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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