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-20 10:39:19 +01:00
parent ce31859bb6
commit ffc4a88094
6 changed files with 172 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1179,6 +1179,14 @@ main[role="main"] {
main[role="main"] > .wrapper {
width: 100vw; }
@keyframes rotating {
from {
transform: rotate(0deg);
transform-origin: center; }
to {
transform: rotate(360deg);
transform-origin: center; } }
body {
font-size: 16px;
font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
@ -1271,23 +1279,26 @@ header[role="banner"] {
position: relative; }
header[role="banner"] #user-flags h2 {
cursor: pointer; }
header[role="banner"] #user-flags h2:before {
padding-right: 0.2em; }
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;
overflow: hidden;
width: 11em;
max-height: 1px;
transition: opacity,max-height 0.3s ease-in-out;
overflow: hidden; }
padding: 0.01em 1em;
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 {
opacity: 1;
max-height: 100px;
transition: opacity,max-height 0.2s ease-in-out; }
transition-delay: 0s;
max-height: 12em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
header[role="banner"] #user-flags li {
width: 100%;
display: flex;
@ -1302,17 +1313,32 @@ header[role="banner"] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
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 {
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"] #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-radius: 5px;
width: calc(100% - 2em);
font-size: 0.8em; }
header[role="banner"] #user-flags li.create-flag span.add-btn {
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;
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 {
margin-right: 1em;
padding-left: 1em;

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

File diff suppressed because one or more lines are too long

11
web/themes/custom/materiotheme/assets/styles/base/_animations.scss Normal file
View File

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

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

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

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

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

60
web/themes/custom/materiotheme/vuejs/store/modules/user.js
View File

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