From 8e95e904904884834f1283bc0d3c12aa93a32b1d Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Mon, 20 May 2024 14:37:07 -0400 Subject: [PATCH 01/13] Change style for status, case title and links on tasks listing --- .../js/components/shared/FilterTable.vue | 32 +++++++++++++------ resources/js/tasks/components/TasksList.vue | 19 ++++++++--- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index 3889be6e99..c76569e947 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -325,8 +325,13 @@ export default { color: #1572C2; } .pm-table-filter tbody tr:hover { - background-color: #FAFBFC; - color: #1572C2; + background-color: #EFF5FB; +} +.pm-table-filter tbody tr a { + color: #566877; +} +.pm-table-filter tbody tr a:hover { + color: #1990FF; } .pm-table-filter thead { position: sticky; @@ -402,25 +407,34 @@ export default { background-color: #F2F8FE !important; } .pm-table-unread-row { - font-weight: bold; + background-color: #FFFDEA; } .status-success { - background-color: rgba(78, 160, 117, 0.2); - color: rgba(78, 160, 117, 1); + background-color: rgba(200, 240, 207, 1); + color: rgba(0, 0, 0, 0.75); width: 100px; border-radius: 5px; + padding: 7px; } .status-danger { - background-color:rgba(237, 72, 88, 0.2); - color: rgba(237, 72, 88, 1); + background-color:rgba(255, 199, 199, 1); + color: rgba(0, 0, 0, 0.75); width: 100px; border-radius: 5px; + padding: 7px; } .status-primary { - background: rgba(21, 114, 194, 0.2); - color: rgba(21, 114, 194, 1); + background: rgba(184, 220, 247, 1); + color: rgba(0, 0, 0, 0.75); width: 100px; border-radius: 5px; + padding: 7px; +} +.status-warning { + background: rgba(249, 232, 195, 1); + color: rgba(0, 0, 0, 0.75); + border-radius: 5px; + padding: 7px; } @-moz-document url-prefix() { .pm-table-truncate { diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue index b27f874437..78508a776a 100644 --- a/resources/js/tasks/components/TasksList.vue +++ b/resources/js/tasks/components/TasksList.vue @@ -435,7 +435,14 @@ export default { `; }, formatCaseTitle(processRequest, record) { + let draftBadge = ""; + if (record.draft) { + draftBadge = ` + ${this.$t("Draft")} + `; + } return ` + ${draftBadge} ${ @@ -788,15 +795,17 @@ export default { } .due-danger { background-color: rgba(237, 72, 88, 0.2); - color: rgba(237, 72, 88, 1); - font-weight: 600; + color: rgba(0, 0, 0, 0.75); + font-weight: 700; border-radius: 5px; + padding: 7px; } .due-primary { - background: rgba(205, 221, 238, 1); - color: rgba(86, 104, 119, 1); - font-weight: 600; + background: rgba(224, 229, 233, 1); + color: rgba(0, 0, 0, 0.75); + font-weight: 700; border-radius: 5px; + padding: 7px; } .btn-this-data { background-color: #1572c2; From 8b0140ccd38586930594181afcd164aab59c8f14 Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Wed, 22 May 2024 15:43:51 -0400 Subject: [PATCH 02/13] adjust the size of the priority column --- resources/js/components/shared/FilterTable.vue | 9 +++++++-- resources/js/tasks/components/TasksList.vue | 13 ++++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index c76569e947..a92309bd5b 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -22,6 +22,7 @@ :key="index" class="pm-table-ellipsis-column" :class="{ 'pm-table-filter-applied': column.filterApplied }" + :style="{ width: column.fixed_width + 'px' }" >
# ${processRequest.case_number || record.case_number} `; @@ -443,7 +443,7 @@ export default { } return ` ${draftBadge} - ${ processRequest.case_title_formatted || @@ -503,7 +503,8 @@ export default { field: "is_priority", sortable: false, default: true, - width: 40, + fixed_width: 20, + resizable: false, }, { label: "Process", @@ -723,9 +724,15 @@ export default { } this.isTooltipVisible = false; }, + removeBadgeSpan(html) { + const badgeSpanRegex = /([^<]+)<\/span>/g; + console.log(html.replace(badgeSpanRegex, "")); + return html.replace(badgeSpanRegex, ""); + }, sanitizeTooltip(html) { let cleanHtml = html.replace(/[\s\S]*?<\/script>/gi, ""); cleanHtml = cleanHtml.replace(/[\s\S]*?<\/style>/gi, ""); + cleanHtml = this.removeBadgeSpan(cleanHtml); cleanHtml = cleanHtml.replace( /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi, "" From 3f417eb83570f9674c8a8edcf8a1406f77eed583 Mon Sep 17 00:00:00 2001 From: Gustavo Date: Thu, 23 May 2024 11:26:02 -0400 Subject: [PATCH 03/13] changed task list hoover options style --- resources/img/smartinbox-images/open-case.svg | 3 + resources/js/tasks/components/TasksList.vue | 56 ++++++++++++++++--- 2 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 resources/img/smartinbox-images/open-case.svg diff --git a/resources/img/smartinbox-images/open-case.svg b/resources/img/smartinbox-images/open-case.svg new file mode 100644 index 0000000000..463e6a30fe --- /dev/null +++ b/resources/img/smartinbox-images/open-case.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue index 5c4dd78cff..a69c1caaa1 100644 --- a/resources/js/tasks/components/TasksList.vue +++ b/resources/js/tasks/components/TasksList.vue @@ -169,13 +169,32 @@ - + + + + + + + + + + + +
@@ -564,6 +583,12 @@ export default { width: 140, }); } + columns.push({ + label: "", + field: "", + sortable: false, + width: 140, + }); return columns; }, onAction(action, rowData, index) { @@ -726,7 +751,6 @@ export default { }, removeBadgeSpan(html) { const badgeSpanRegex = /([^<]+)<\/span>/g; - console.log(html.replace(badgeSpanRegex, "")); return html.replace(badgeSpanRegex, ""); }, sanitizeTooltip(html) { @@ -791,7 +815,13 @@ export default { }, onWatchShowPreview(value) { this.$emit('onWatchShowPreview', value); - } + }, + redirectToTask(task) { + window.location.href = this.openTask(task); + }, + redirectToRequest(processRequest) { + window.location.href = this.openRequest(processRequest); + }, }, }; @@ -825,6 +855,14 @@ export default { width: 32px; height: 32px; } +.vertical-separator { + display: inline-block; + width: 1px; + height: 24px; + background-color: #ccc; /* Color del separador */ + margin: 0 8px; /* Espaciado alrededor del separador */ + vertical-align: middle; /* Alinear verticalmente con los botones */ +}