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

folders beta 1

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-01 20:40:37 +01:00
parent 93c4707c45
commit 564a1638fc
12 changed files with 234 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
config/sync/block.block.views_block__my_flag_list_items_block_1.yml Normal file
View File

@@ -0,0 +1,35 @@
uuid: b3a7a1d3-79a0-4874-abdd-4a49c48d0f5d
langcode: en
status: false
dependencies:
config:
- views.view.my_flag_list_items
module:
- context
- views
theme:
- materiotheme
id: views_block__my_flag_list_items_block_1
theme: materiotheme
region: content_left
weight: 0
provider: null
plugin: 'views_block:my_flag_list_items-block_1'
settings:
id: 'views_block:my_flag_list_items-block_1'
label: ''
provider: views
label_display: visible
views_label: ''
items_per_page: none
visibility:
view_inclusion:
id: view_inclusion
negate: null
view_inclusion: { }
context_mapping: { }
request_path_exclusion:
id: request_path_exclusion
pages: ''
negate: null
context_mapping: { }

4
config/sync/image.style.card_medium_half.yml
View File

@@ -3,13 +3,13 @@ langcode: en
status: true
dependencies: { }
name: card_medium_half
label: 'card-medium-half (205x100)'
label: 'minicard (170x100)'
effects:
34e936a0-1fee-4327-9553-b4f48bde14e6:
uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
id: image_scale_and_crop
weight: 1
data:
width: 205
width: 170
height: 100
anchor: center-center

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

@@ -1182,10 +1182,12 @@ main[role="main"] {
display: flex;
flex-direction: row-reverse; }
main[role="main"] > .scroller > .wrapper #content-left {
flex-basis: 218px;
flex-basis: 205px;
flex-shrink: 0; }
main[role="main"] > .scroller > .wrapper #content-left > * {
width: 100%; }
width: 100%;
box-sizing: border-box;
padding: 0.5em 13px; }
main[role="main"] > .scroller > .wrapper #content-center {
flex-basis: 110%; }
@@ -1303,10 +1305,11 @@ header[role="banner"] {
position: absolute;
right: 0;
top: 1.7em;
box-sizing: content-box; }
box-sizing: content-box;
z-index: 30; }
header[role="banner"] #user-flags:hover ul {
transition-delay: 0s;
max-height: 12em;
max-height: 50em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
header[role="banner"] #user-flags li {
@@ -1460,7 +1463,8 @@ aside.messages {
#content-left .flag-collection > header {
display: flex;
flex-direction: row;
justify-content: space-between; }
justify-content: space-between;
padding-bottom: 13px; }
#content-left .flag-collection > header .mdi-close {
cursor: pointer;
align-self: flex-end; }
@@ -1468,13 +1472,20 @@ aside.messages {
margin: 0 0 13px 0;
padding: 0; }
#content-left .flag-collection > ul > li article.card.minicard {
width: 100%; }
width: 170px;
height: 100px;
margin: auto; }
#content-left .flag-collection > ul > li article.card.minicard > header {
padding: 0.3em 0.3em 0.1em; }
#content-left .flag-collection > ul > li article.card.minicard > header h1 {
margin: 0; }
#content-left .flag-collection > ul > li article.card.minicard > nav.tools {
padding: 0 0.2em; }
top: auto;
bottom: 0;
padding: 0 0.2em;
background: transparent; }
#content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
cursor: pointer; }
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label {
font-size: 3.5em;
@@ -1681,10 +1692,12 @@ article.card {
top: 0;
right: 0;
z-index: 21;
width: 1em;
width: 15px;
background-color: #fff;
box-sizing: content-box;
padding: 0.3em 0.1em; }
padding: 0.3em 0.1em;
opacity: 0;
transition: opacity 0.2s ease-in-out; }
article.card nav.tools > * {
overflow: visible;
position: relative; }
@@ -1695,11 +1708,26 @@ article.card {
position: absolute;
top: 0px;
right: 100%;
width: 5em;
box-sizing: content-box;
width: 180px;
box-sizing: border-box;
padding: 0.3em;
background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2); }
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
transition: all 0.2s ease-in-out; }
article.card nav.tools > *:hover .tool-content {
transition: all 0.3s ease-in-out;
opacity: 1;
max-height: 195px;
max-width: 200px; }
article.card nav.tools .tool.flags .tool-content ul {
display: flex;
flex-flow: row wrap; }
article.card nav.tools .tool.flags .tool-content ul li {
padding: 0 0.5em 0 0; }
article.card nav.tools .tool.flags span.flag {
cursor: pointer;
font-size: 0.756em;
@@ -1707,6 +1735,8 @@ article.card {
transition: color 0.3s ease-in-out; }
article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
color: #1a1a1a; }
article.card:hover nav.tools {
opacity: 1; }
article.card section.images {
position: relative; }
article.card section.images, article.card section.images * {

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

File diff suppressed because one or more lines are too long

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

@@ -102,11 +102,13 @@ main[role="main"]{
display: flex;
flex-direction: row-reverse;
#content-left{
flex-basis: $column_width+$column_goutiere;
flex-basis: $column_width;
flex-shrink: 0;
// width:$column_width*2+$column_goutiere;
>*{
width:100%;
box-sizing: border-box;
padding:0.5em $column_goutiere;
}
}
#content-center{

3
web/themes/custom/materiotheme/assets/styles/base/_variables.scss
View File

@@ -9,3 +9,6 @@ $column_width: 205px;
$column_goutiere: 13px;
$card_height: 295px;
$minicard_width: 170px;
$minicard_height: 100px;

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

@@ -164,11 +164,12 @@ header[role="banner"]{
right:0;
top:1.7em;
box-sizing: content-box;
z-index: 30;
}
&:hover{
ul{
transition-delay: 0s;
max-height:12em;
max-height:50em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
@@ -415,6 +416,7 @@ aside.messages{
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: $column_goutiere;
h3{
// flex-basis: calc(100% - 1em);
}
@@ -430,8 +432,9 @@ aside.messages{
margin:0 0 $column_goutiere 0;
padding:0;
article.card.minicard{
width:100%;
width:$minicard_width;
height:$minicard_height;
margin:auto;
>header{
padding: 0.3em 0.3em 0.1em;
h1{
@@ -439,7 +442,13 @@ aside.messages{
}
}
>nav.tools{
top: auto;
bottom: 0;
padding:0 0.2em;
background:transparent;
.mdi.unflag{
cursor: pointer;
}
}
}
}
@@ -752,7 +761,8 @@ article.card{
top: 0;
right: 0;
z-index: 21;
width: 1em;
$toolbar_width: 15px;
width: $toolbar_width;
background-color: #fff;
box-sizing: content-box;
padding: 0.3em 0.1em;
@@ -767,14 +777,36 @@ article.card{
position: absolute;
top: 0px;
right: 100%;
width: 5em;
box-sizing: content-box;
// width: 5em;
width: $column_width - $toolbar_width - 10px;
box-sizing: border-box;
padding: 0.3em;
background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
max-height: 0; max-width:0;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
&:hover{
.tool-content{
transition: all 0.3s ease-in-out;
opacity: 1;
max-height: 195px;
max-width:200px;
}
}
}
.tool.flags{
.tool-content{
ul{
display: flex;
flex-flow: row wrap;
li{
padding:0 0.5em 0 0;
}
}
}
span.flag{
cursor: pointer;
font-size: 0.756em;
@@ -785,6 +817,13 @@ article.card{
}
}
}
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
&:hover{
nav.tools{
opacity:1;
}
}
section.images{
position: relative;

24
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@@ -14,7 +14,7 @@
<span
class="flag mdi"
:class="[
flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus'
flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
]"
:collid="coll.id"
@click.prevent="onFlagActionCard"
@@ -64,8 +64,7 @@ export default {
},
methods: {
...mapActions({
flag: 'User/flag',
unFlag: 'User/unFlag'
flagUnflag: 'User/flagUnflag'
}),
flagIsActive(collid) {
// console.log(this.item.uuid);
@@ -82,22 +81,15 @@ export default {
if (!this.loadingFlag) {
let collid = e.target.getAttribute('collid');
let isActive = this.flagIsActive(collid);
let action = isActive ? 'unflag' : 'flag';
// console.log('collid', collid);
// console.log("this.item", this.item);
this.loadingFlag = collid;
if (isActive) {
this.unFlag({uuid: this.item.uuid, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;
})
}else{
this.flag({uuid: this.item.uuid, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;
})
}
this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;
})
}
}
}

73
web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue
View File

@@ -6,7 +6,13 @@
</header>
<nav class="tools">
<section class="tool flags">
<span class="mdi mdi-folder-remove-outline"/>
<span
class="mdi unflag"
:class="[
itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove'
]"
@click.prevent="onUnFlagCard"
/>
</section>
</nav>
<section class="images" v-switcher>
@@ -32,57 +38,38 @@ import cardMixins from 'vuejs/components/cardMixins'
export default {
name: "MiniCard",
props: ['item'],
props: ['item', 'collid'],
mixins: [cardMixins],
data() {
return {
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
// loadingFlag: false
loadingItem: false
}
},
computed: {
// ...mapState({
// flagcolls: state => state.User.flagcolls
// })
},
methods: {
// ...mapActions({
// flag: 'User/flag',
// unFlag: 'User/unFlag'
// }),
// flagIsActive(collid) {
// // console.log(this.item.uuid);
// // console.log(this.flagcolls[collid].items_uuids);
// return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
// },
// flagIsLoading(collid) {
// // console.log(this.item.uuid);
// // console.log(this.flagcolls[collid].items_uuids);
// return collid === this.loadingFlag;
// },
// onFlagActionCard (e) {
// console.log("Card onFlagActionCard", e);
// if (!this.loadingFlag) {
// let collid = e.target.getAttribute('collid');
// let isActive = this.flagIsActive(collid);
// // console.log('collid', collid);
// // console.log("this.item", this.item);
// this.loadingFlag = collid;
// if (isActive) {
// this.unFlag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }else{
// this.flag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }
// }
// }
...mapActions({
flagUnflag: 'User/flagUnflag'
}),
itemIsLoading(id) {
return this.loadingItem
},
onUnFlagCard (e) {
console.log("Card onFlagActionCard", e);
if (!this.loadingItem) {
this.loadingItem = true;
this.flagUnflag({
action: 'unflag',
uuid: this.item.uuid,
collid: this.collid
})
.then(data => {
console.log("onUnFlagCard then", data);
this.loadingItem = false;
})
}
}
}
}

10
web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue
View File

@@ -13,8 +13,9 @@
v-for="item in loadedItems"
:key="item.id"
>
<MiniCard :item="item"/>
<MiniCard :item="item" :collid="collection.id"/>
</li>
<span v-if="loadedItems.length === 0">No items in your folder</span>
</ul>
<span v-else class="loading">Loading</span>
</section>
@@ -33,6 +34,7 @@ export default {
computed: {
...mapState({
flagcolls: state => state.User.flagcolls,
flagcollsLoadedItems: state => state.User.flagcollsLoadedItems,
openedCollid: state => state.User.openedCollid
})
},
@@ -45,11 +47,11 @@ export default {
// }
// },
created() {
if (typeof this.collection.loadedItems !== 'undefined') {
if (typeof this.flagcollsLoadedItems[this.openedCollid] !== 'undefined') {
// if loadedItems are alredy loaded,
// the mutation occurs before this subscription
// so we first check if they are already available
this.loadedItems = this.collection.loadedItems
this.loadedItems = this.flagcollsLoadedItems[this.openedCollid]
}
this.unsubscribe = this.$store.subscribe((mutation, state) => {
@@ -57,7 +59,7 @@ export default {
console.log("mutation setLoadedCollItems collid", this.openedCollid)
// mutation is triggered before the component update
// so this.collection.id is not good
this.loadedItems = state.User.flagcolls[this.openedCollid].loadedItems
this.loadedItems = state.User.flagcollsLoadedItems[this.openedCollid]
}
})

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

@@ -2,7 +2,7 @@
<div id="user-flags">
<h2
class="mdi mdi-folder-outline"
>My folders</h2>
>My folders ({{collsLength}})</h2>
<ul>
<li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
<h5
@@ -18,10 +18,11 @@
/>
</div>
</li>
<li class="create-flag">
<li v-if="collsLength<15" class="create-flag">
<input
placeholder="new folder"
v-model="new_folder_name"
@keyup.enter.prevent.stop="onCreateFlagColl"
/>
<span
class="add-btn mdi"
@@ -48,6 +49,9 @@ export default {
...mapState({
flagcolls: state => state.User.flagcolls
}),
collsLength() {
return Object.keys(this.flagcolls).length
},
addFlagBtnClassObj() {
return {
'mdi-plus-circle-outline': !this.is_creating_folder,

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

@@ -19,6 +19,7 @@ export default {
canSearch: false,
roles: [],
flagcolls: false,
flagcollsLoadedItems: {},
openedCollid: null
},
@@ -83,8 +84,9 @@ export default {
state.canSearch = false
},
setFlagColls (state, flagcolls) {
console.log('User setFlagColls', flagcolls)
console.log('User pre setFlagColls', state.flagcolls)
state.flagcolls = flagcolls
// console.log('User post setFlagColls', state.flagcolls)
},
openFlagColl (state, collid) {
state.openedCollid = collid
@@ -96,7 +98,7 @@ export default {
console.log('setLoadedCollItems', data)
// if no data, we are just calling the mutation to trigger the component update
if (data) {
state.flagcolls[data.collid].loadedItems = data.items
state.flagcollsLoadedItems[data.collid] = data.items
}
}
},
@@ -236,66 +238,65 @@ export default {
})
})
},
flag ({ dispatch, commit, state }, args) {
console.log('user flag', args.uuid, args.collid)
flagUnflag ({ dispatch, commit, state }, { action, uuid, collid }) {
console.log('user flagUnflag', action, uuid, collid)
return new Promise((resolve, reject) => {
const params = {
flagid: state.flagcolls[args.collid].flag_id,
uuid: args.uuid,
flagcollid: args.collid
flagid: state.flagcolls[collid].flag_id,
uuid: uuid,
flagcollid: collid
}
return MA.post('materio_flag/flag', params)
return MA.post(`materio_flag/${action}`, params)
.then(({ data }) => {
console.log('user MA flag', data)
// reload the fulllist of flagcolleciton
dispatch('getUserFlagColls').then(() => {
resolve()
if (state.flagcolls[collid].items_uuids.length) {
dispatch('loadMaterials', {
uuids: state.flagcolls[collid].items_uuids,
imgStyle: 'card_medium_half',
callBack: 'loadMaterialsCallBack',
callBackArgs: { collid: collid }
}).then( () => {
resolve()
})
}else{
commit('setLoadedCollItems', { collid: collid, items: [] })
resolve()
}
})
})
.catch(error => {
console.warn('Issue USER MA flag', error)
})
})
},
unFlag ({ dispatch, commit, state }, args) {
console.log('user unFlag', args.uuid, args.collid)
return new Promise((resolve, reject) => {
const params = {
flagid: state.flagcolls[args.collid].flag_id,
uuid: args.uuid,
flagcollid: args.collid
}
return MA.post('materio_flag/unflag', params)
.then(({ data }) => {
console.log('user MA unFlag', data)
dispatch('getUserFlagColls').then(() => {
resolve()
})
})
.catch(error => {
console.warn('Issue USER MA unFlag', error)
console.warn('Issue USER MA flagUnflag', error)
})
})
},
openFlagColl ({ commit, dispatch, state }, collid) {
console.log('user openFlagColl', collid)
commit('openFlagColl', collid)
if (typeof state.flagcolls[collid].loadedItems === 'undefined') {
// if no loadedItems, load them
// loadMaterials is on mixins
// https://github.com/huybuidac/vuex-extensions
dispatch('loadMaterials', {
uuids: state.flagcolls[collid].items_uuids,
imgStyle: 'card_medium_half',
callBack: 'loadMaterialsCallBack',
callBackArgs: { collid: collid }
})
} else {
// call the mutation without data to only trigger the FlagCollection component update
commit('setLoadedCollItems')
if (state.flagcolls[collid].items_uuids.length) {
if (typeof state.flagcollsLoadedItems[collid] === 'undefined') {
console.log('loading flagcoll items')
// if no loadedItems, load them
// loadMaterials is on mixins
// https://github.com/huybuidac/vuex-extensions
dispatch('loadMaterials', {
uuids: state.flagcolls[collid].items_uuids,
imgStyle: 'card_medium_half',
callBack: 'loadMaterialsCallBack',
callBackArgs: { collid: collid }
})
} else {
// call the mutation without data to only trigger the FlagCollection component update
console.log('committing setLoadedCollItems without args')
commit('setLoadedCollItems')
}
}else{
commit('setLoadedCollItems', { collid: collid, items: [] })
}
},
loadMaterialsCallBack ({ commit }, { items, callBackArgs }) {
console.log('user loadMaterialsCallBack', items)
console.log('user loadMaterialsCallBack', items, callBackArgs)
commit('setLoadedCollItems', { collid: callBackArgs.collid, items: items })
},
closeFlagColl ({ commit, dispatch }) {