+
+
\ No newline at end of file
diff --git a/webroot/css/co-grouper-base.css b/webroot/css/co-grouper-base.css
index 8080b7f..d2e2e5b 100644
--- a/webroot/css/co-grouper-base.css
+++ b/webroot/css/co-grouper-base.css
@@ -1,28 +1,153 @@
:root {
- --red: #CC3333;
+ --red: #B32D2D;
--blue: #1D7AB4;
- --green: #22AA22;
+ --green: #1D871D;
+ --orange: #faa732;
--teal: #1c6070;
+ --darkteal: #003f59;
+ --link: #0076a5;
+ --link-hover: #003f59;
--danger: var(--red);
--success: var(--green);
--primary: var(--teal);
+ --warning: var(--orange);
+ --secondary: var(--darkteal)
+}
+
+.text-grouper {
+ color: var(--primary);
+}
+
+.text-sml {
+ font-size: 0.8rem;
+}
+
+#content .material-icons.lg {
+ font-size: 1.2rem;
+}
+
+.grouper .btn:not(.btn-link) {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+ max-width: 220px;
+}
+
+.grouper .btn:not([disabled]):hover {
+ text-decoration: none !important;
+ filter: brightness(1.1);
}
.grouper .btn.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
-.grouper .btn.btn-success.btn-grouper {
+.grouper .btn.btn-success {
background-color: var(--success);
border-color: var(--success);
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
-.grouper .btn.btn-danger.btn-grouper {
+.grouper .btn.btn-danger {
background-color: var(--danger);
border-color: var(--danger);
- color: white;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
-}
\ No newline at end of file
+}
+
+.grouper .btn.btn-secondary {
+ background-color: var(--secondary);
+ border-color: var(--secondary);
+}
+
+.grouper .btn.btn-link,
+.grouper a:not(.btn) {
+ color: var(--link);
+}
+
+.grouper .btn.btn-link:hover,
+.grouper a:not(.btn):hover {
+ color: var(--link-hover);
+}
+
+.btn-grouper {
+ min-width: fit-content;
+}
+
+#subscribers.loading .loader {
+ display: block;
+}
+
+#subscribers.loading .subs,
+#subscribers.error .subs {
+ display: none;
+}
+
+#subscribers.error .msg {
+ display: block;
+}
+
+#subscribers .loader,
+#subscribers .msg {
+ display: none;
+}
+
+.modal-open .ui-menu {
+ z-index: 2000;
+}
+
+#grouper-loader {
+ pointer-events: none;
+ width: 100px;
+ display: block;
+ margin: 0 auto;
+ overflow: visible;
+ padding: 15px;
+ max-width: 100%;
+}
+
+#grouper-loader circle {
+ transform-origin: center;
+ fill: var(--primary);
+ transition: ease;
+ animation-timing-function: ease-in-out !important;
+}
+
+#search {
+ background-color: #F6F6F6;
+}
+
+/* fade out half */
+
+#grouper-loader.fade-out-half circle:nth-child(1) {
+ animation: fadeInHalf 0.9s -2.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(2) {
+ animation: fadeInHalf 0.9s -1.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(3) {
+ animation: fadeInHalf 0.9s -0.3s infinite reverse;
+}
+
+.grouper_groups .person-item {
+ overflow-wrap: anywhere;
+}
+
+.popover {
+ max-width: 400px;
+}
+
+.ui-autocomplete {
+ max-height: 240px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-right: 20px;
+}
+
+@keyframes fadeInHalf {
+ from {
+ opacity: 0.5;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
diff --git a/webroot/css/co-grouper-plugin.css b/webroot/css/co-grouper-plugin.css
index 9b1cebf..6e8f27e 100644
--- a/webroot/css/co-grouper-plugin.css
+++ b/webroot/css/co-grouper-plugin.css
@@ -14,6 +14,10 @@
border-radius: .2rem;
}
+.btn-fit {
+ height: fit-content;
+}
+
a {
color: var(--primary);
}
@@ -335,4 +339,4 @@ a.list-group-item-action:hover .fa {
animation: 1.2s linear infinite both loading;
background-color: var(--teal);
display: inline-block;
-}
\ No newline at end of file
+}
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
index 368fec1..3baf2b4 100644
--- a/webroot/js/autocomplete.js
+++ b/webroot/js/autocomplete.js
@@ -10,9 +10,9 @@ export default {
type: String,
default: 'add'
},
- activeBtn: {
+ forceDisableBtn: {
type: Boolean,
- default: true
+ default: false
},
renderBtn: {
type: Boolean,
@@ -23,10 +23,11 @@ export default {
default: ''
}
},
- inject: ['txt', 'api'],
+ inject: ['txt', 'api', 'all'],
data() {
return {
search: '',
+ enableBtn: false,
val: '',
item: null,
limit: 15,
@@ -40,39 +41,42 @@ export default {
},
toKebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
- }
+ },
+ enableBtnFunc() {
+ // The minimum length that i start search is 3. So we only enable the button when
+ // the input text value has at least three characters
+ return this.enableBtn && !this.forceDisableBtn
+ },
},
computed: {
btnTxt() {
return eval(`this.txt.${this.action}`) ?? eval(`this.txt.${this.icon}`)
},
- isBtnDisabled() {
- // The minimum length that i start search is 3. So we only enable the button when
- // the input text value has at least three characters
- return this.activeBtn || (this.search.length < 3)
+ autcompleteId() {
+ return `autocomplete-search-container-${this.action}`
}
},
mounted(el) {
const input = $(this.$el).find(`#${this.toKebabCase(this.action)}-input`);
+ const action = this.action
this.url = `${this.api.find}?co=${this.api.co}&mode=${this.api.mode}&page=${this.page}&limit=${this.limit}`
input.autocomplete({
source: ( request, response ) => {
- $("#grouper-search-container .co-loading-mini").show();
+ $(`#autocomplete-search-container-${this.action} .co-loading-mini`).show();
$.ajax({
url: this.url,
type: 'GET',
dataType: "json",
data: {
- // XXX Change the term key to any other query key that fits your needs.
+ // XXX Change the term key to any other query key that fit your needs.
term: request.term
},
success: function (data) {
- $("#grouper-search-container .co-loading-mini").hide();
- // If i have more data from before append at the end
+ $(`#autocomplete-search-container-${action} .co-loading-mini`).hide();
response( data );
},
error: function(data) {
- $("#grouper-search-container .co-loading-mini").hide();
+ $(`#autocomplete-search-container-${action} .co-loading-mini`).hide();
console.log('Autocomplete ajax error:', data)
generateFlash('Find action failed', 'error');
}
@@ -91,16 +95,17 @@ export default {
this.item = ui.item;
this.search = `${ui.item.label} (${ui.item.value})`;
if(this.renderBtn) {
- $(`#${this.toKebabCase(this.action)}-btn`).prop('disabled', false).focus();
+ this.enableBtn = true;
+ $(`#${this.toKebabCase(this.action)}-btn`).focus();
} else {
- // Since we are not rendering any button we will trigger the search
+ // Since we are not rendering any button, we will trigger the search
this.performAction()
}
},
})
},
template: /*html*/`
-