improved my folders display on header
This commit is contained in:
parent
ce31859bb6
commit
ffc4a88094
|
@ -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 {
|
||||
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 span.mdi-plus-box,
|
||||
header[role="banner"] #user-flags li span.mdi-trash-can-outline {
|
||||
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: #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 {
|
||||
margin-right: 1em;
|
||||
padding-left: 1em;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,11 @@
|
|||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
|
@ -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"]{
|
|||
}
|
||||
}
|
||||
|
||||
&.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{
|
||||
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: #4e4d4d;
|
||||
color:#1a1a1a;
|
||||
}
|
||||
&.loading:before{
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -175,34 +175,42 @@ 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);
|
||||
return new Promise((resolve, reject) => {
|
||||
const params = {
|
||||
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 }) => {
|
||||
console.log("user MA createFlag data", data);
|
||||
if (data.status) {
|
||||
dispatch('getUserFlags');
|
||||
dispatch('getUserFlags').then(() => {
|
||||
resolve();
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn("Issue USER MA createFlag", error);
|
||||
Promise.reject(error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteFlag({ dispatch, commit, state }, flagid) {
|
||||
console.log("user deleteFlag", flagid);
|
||||
return new Promise((resolve, reject) => {
|
||||
const params = {
|
||||
flagid: flagid
|
||||
};
|
||||
return MA.post("materio_flag/delete_user_flagging_collection", params)
|
||||
MA.post("materio_flag/delete_user_flagging_collection", params)
|
||||
.then(({ data }) => {
|
||||
console.log("user MA deleteFlag data", data);
|
||||
dispatch('getUserFlags');
|
||||
dispatch('getUserFlags').then(() =>{
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn("Issue USER MA createFlag", error);
|
||||
Promise.reject(error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
userLogout({ commit, state }) {
|
||||
|
|
Loading…
Reference in New Issue