@@ -95,11 +95,14 @@
border-radius: 20px;
text-align: center;
padding: 12px;
- opacity: 0.3;
+ opacity: 0.4;
transition: ease all 0.3s;
cursor: pointer;
margin: 0px;
}
+ .fill-on-active .bubble {
+ opacity: 0.6;
+ }
.bubble .body {
display: flex;
justify-content: center;
@@ -109,9 +112,7 @@
.bubble.text-left .body {
padding-left: 30px;
}
- .bubble:hover, .bubble.active {
- opacity: 1;
- }
+
.bubble .v-icon {
font-size: 45px !important;
line-height: 45px;
@@ -138,7 +139,7 @@
}
//------------------------Theme Colors
- @import '../../scss/_vars.scss';
+ @import "resources/js/Global/scss/_vars.scss";
@each $Color,
$Value in $colors {
.bubble.theme-#{$Color} {
@@ -149,6 +150,13 @@
.bubble.theme-#{$Color} .v-icon {
color: $Value;
}
+ .fill-on-active .bubble.theme-#{$Color}:hover, .fill-on-active .bubble.theme-#{$Color}.active {
+ background-color: $Value;
+ color: #fff;
+ }
+ .fill-on-active .bubble.theme-#{$Color}:hover .v-icon, .fill-on-active .bubble.theme-#{$Color}.active .v-icon {
+ color: #fff;
+ }
}
@each $Color,
$Value in $backgrounds {
@@ -157,6 +165,10 @@
}
}
+ .bubble:hover, .bubble.active {
+ opacity: 1;
+ }
+
.bubble .En {
letter-spacing: 5px;
font-size: 10px;
@@ -189,6 +201,10 @@
line-height: 20px;
margin-left: 5px;
}
+ .bubble.fa-only.icon-large .v-icon {
+ font-size: 25px !important;
+ line-height: 20px;
+ }
.bubble.fa-only .Fa {
font-size: 14px !important;
}
diff --git a/resources/js/Global/components/Modals/BasicModal.vue b/resources/js/Global/components/Modals/BasicModal.vue
index 8066561..df1e237 100644
--- a/resources/js/Global/components/Modals/BasicModal.vue
+++ b/resources/js/Global/components/Modals/BasicModal.vue
@@ -1,6 +1,6 @@
-
-
+
+
@@ -10,21 +10,21 @@
export default {
props: {
- width:{default: '60%'},
- name:{default: ''},
- transition:{default: 'slide-x-transition'},
+ width: {default: null},
+ maxWidth: {default: null},
+ name: {default: null},
+ transition: {default: 'slide-x-transition'},
},
- data:() => ({
+ data: () => ({
+ isOpenModal: false,
}),
- components:{
- 'modal_task_list': () => '@Common/components/Task/Timeline/Modal-Layout.vue',
- 'modal_task_add': () => '@Common/components/Task/AddEdit/Modal-Add.vue'
- },
computed: {
- ...mapGetters("modal", ["isModal"]),
+ ...mapGetters("modal", ["isModal", "getModal"]),
modal: {
get() {
- return this.isModal(this.name);
+ const isOpen = this.isModal(this.modalName);
+ this.emitModal(isOpen);
+ return isOpen;
},
set(value) {
if (!value) {
@@ -32,7 +32,27 @@
}
}
},
+ modalName() {
+ return this.name ? this.name : this.$parent.$options.name;
+ },
+ data() {
+ return this.getModal(this.modalName);
+ }
},
-
+ methods: {
+ emitModal(isOpen) {
+ if (this.isOpenModal && !isOpen) {
+ this.isOpenModal = false;
+ this.$emit('close');
+ } else if (!this.isOpenModal && isOpen) {
+ this.isOpenModal = true;
+ this.$emit('open', this.data);
+ this.$parent.modalData = this.data;
+ }
+ }
+ },
+ beforeDestroy() {
+ this.emitModal(false);
+ }
}
diff --git a/resources/js/Global/components/Modals/Dialog.vue b/resources/js/Global/components/Modals/Dialog.vue
index d81e1f1..a37416a 100644
--- a/resources/js/Global/components/Modals/Dialog.vue
+++ b/resources/js/Global/components/Modals/Dialog.vue
@@ -1,5 +1,5 @@
-
+
-
+