From 1483972c7e81fee4f644c896cbeb611d81577e9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 23 Feb 2023 17:20:45 +0100
Subject: [PATCH] Implement changes based on UI/UX feedback

---
 .../src/components/PageBlocks/ChartBase.vue   |  6 +++-
 .../components/PageBlocks/RecordListBase.vue  | 28 ++++++++++++-------
 .../src/components/PageBlocks/Wrap/Card.vue   |  6 ++--
 .../src/components/PageBlocks/Wrap/Plain.vue  |  6 ++--
 .../components/Public/Page/Block/Modal.vue    |  2 +-
 .../src/themes/corteza-base/custom.scss       |  8 ++++++
 .../compose/types/page-block/record-list.ts   |  2 +-
 7 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/ChartBase.vue b/client/web/compose/src/components/PageBlocks/ChartBase.vue
index 4e66c152c..b0979e8f5 100644
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@@ -129,9 +129,11 @@ export default {
 
         this.$root.$emit(`drill-down-recordList:${recordListUniqueID}`, prefilter)
       } else {
+        const { title } = this.block
+
         // Open in modal
         const block = new compose.PageBlockRecordList({
-          title: `${dimensions} = '${name}'`,
+          title: title ? `${title} - "${name}"` : name,
           blockID: `drillDown-${chartID}`,
           options: {
             moduleID,
@@ -141,11 +143,13 @@ export default {
             hideRecordViewButton: false,
             hideConfigureFieldsButton: false,
             hideImportButton: true,
+            enableRecordPageNavigation: true,
             selectable: true,
             allowExport: true,
             perPage: 14,
             showTotalCount: true,
             magnifyOption: 'modal',
+            recordDisplayOption: 'modal',
           },
         })
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index ed4a8d396..b4c8f3b6e 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -381,12 +381,16 @@
                 class="text-right"
                 @click.stop
               >
-                <b-button-group v-if="inlineEditing">
+                <b-button-group
+                  v-if="inlineEditing"
+                  size="sm"
+                  class="ml-auto"
+                >
                   <b-button
                     v-if="showCloneRecordButton"
                     :title="$t('recordList.record.tooltip.clone')"
                     variant="outline-light"
-                    class="text-primary d-print-none border-0"
+                    class="d-flex align-items-center text-primary d-print-none border-0"
                     @click="handleCloneInline(item.r)"
                   >
                     <font-awesome-icon
@@ -398,7 +402,7 @@
                     v-if="item.r.deletedAt"
                     :title="$t('recordList.record.tooltip.undelete')"
                     variant="outline-light"
-                    class="border-0 text-dark d-print-none"
+                    class="d-flex align-items-center border-0 text-dark d-print-none"
                     @click.prevent="handleRestoreInline(item, index)"
                   >
                     <font-awesome-icon
@@ -410,7 +414,7 @@
                   <b-button
                     v-else-if="(item.r.canDeleteRecord || item.r.recordID === '0') && !item.r.deletedAt"
                     variant="outline-light"
-                    class="border-0 show-when-hovered text-danger d-print-none"
+                    class="d-flex align-items-center border-0 show-when-hovered text-danger d-print-none"
                     @click.prevent="handleDeleteInline(item, index)"
                   >
                     <font-awesome-icon
@@ -419,12 +423,16 @@
                   </b-button>
                 </b-button-group>
 
-                <b-button-group v-if="!inlineEditing">
+                <b-button-group
+                  v-if="!inlineEditing"
+                  size="sm"
+                  class="ml-auto"
+                >
                   <b-button
                     v-if="!options.hideRecordViewButton && item.r.canReadRecord && (options.rowViewUrl || recordPageID)"
                     :title="$t('recordList.record.tooltip.view')"
                     variant="outline-light"
-                    class="text-primary d-print-none border-0"
+                    class="d-flex align-items-center text-primary d-print-none border-0"
                     :to="{ name: options.rowViewUrl || 'page.record', params: { pageID: recordPageID, recordID: item.r.recordID }, query: null }"
                   >
                     <font-awesome-icon
@@ -437,7 +445,7 @@
                     :title="$t('recordList.record.tooltip.edit')"
                     :to="{ name: options.rowEditUrl || 'page.record.edit', params: { pageID: recordPageID, recordID: item.r.recordID }, query: null }"
                     variant="outline-light"
-                    class="text-primary d-print-none border-0"
+                    class="d-flex align-items-center text-primary d-print-none border-0"
                   >
                     <font-awesome-icon
                       :icon="['far', 'edit']"
@@ -449,7 +457,7 @@
                     :title="$t('recordList.record.tooltip.clone')"
                     variant="outline-light"
                     :to="{ name: options.rowCreateUrl || 'page.record.create', params: { pageID: recordPageID, values: item.r.values }, query: null }"
-                    class="text-primary d-print-none border-0"
+                    class="d-flex align-items-center text-primary d-print-none border-0"
                   >
                     <font-awesome-icon
                       :icon="['far', 'clone']"
@@ -460,7 +468,7 @@
                     v-if="!options.hideRecordReminderButton"
                     :title="$t('recordList.record.tooltip.reminder')"
                     variant="outline-light"
-                    class="text-primary d-print-none border-0"
+                    class="d-flex align-items-center text-primary d-print-none border-0"
                     @click.prevent="createReminder(item.r)"
                   >
                     <font-awesome-icon
@@ -475,7 +483,7 @@
                     :title="item.r.recordID"
                     :tooltip="$t('permissions:resources.compose.record.tooltip')"
                     button-variant="outline-light"
-                    class="text-dark d-print-none border-0"
+                    class="d-flex align-items-center text-dark d-print-none border-0"
                   />
                 </b-button-group>
               </b-td>
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
index a13b0a5d0..46a85a6c0 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
@@ -33,7 +33,7 @@
                 v-if="block.options.showRefresh"
                 :title="$t('general.label.refresh')"
                 variant="outline-light"
-                class="text-secondary d-print-none border-0"
+                class="d-flex align-items-center text-secondary d-print-none border-0"
                 @click="$emit('refreshBlock')"
               >
                 <font-awesome-icon :icon="['fa', 'sync']" />
@@ -41,9 +41,9 @@
 
               <b-button
                 v-if="block.options.magnifyOption"
-                :title="$t('general.label.magnify')"
+                :title="isBlockOpened ? '' : $t('general.label.magnify')"
                 variant="outline-light"
-                class="text-secondary d-print-none border-0"
+                class="d-flex align-items-center text-secondary d-print-none border-0"
                 @click="$root.$emit('magnify-page-block', isBlockOpened ? undefined : { blockID: block.blockID })"
               >
                 <font-awesome-icon :icon="['fas', isBlockOpened ? 'times' : 'search-plus']" />
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
index bbe8354ac..9bf6d2e3b 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
@@ -31,7 +31,7 @@
                 v-if="block.options.showRefresh"
                 :title="$t('general.label.refresh')"
                 variant="outline-light"
-                class="d-print-none border-0 text-primary"
+                class="d-flex align-items-center text-primary d-print-none border-0"
                 @click="$emit('refreshBlock')"
               >
                 <font-awesome-icon :icon="['fa', 'sync']" />
@@ -39,9 +39,9 @@
 
               <b-button
                 v-if="block.options.magnifyOption"
-                :title="$t('general.label.magnify')"
+                :title="isBlockOpened ? '' : $t('general.label.magnify')"
                 variant="outline-light"
-                class="d-print-none border-0 text-primary"
+                class="d-flex align-items-center text-primary d-print-none border-0"
                 @click="$root.$emit('magnify-page-block', isBlockOpened ? undefined : { blockID: block.blockID })"
               >
                 <font-awesome-icon :icon="['fas', isBlockOpened ? 'times' : 'search-plus']" />
diff --git a/client/web/compose/src/components/Public/Page/Block/Modal.vue b/client/web/compose/src/components/Public/Page/Block/Modal.vue
index d35b67c61..054efb190 100644
--- a/client/web/compose/src/components/Public/Page/Block/Modal.vue
+++ b/client/web/compose/src/components/Public/Page/Block/Modal.vue
@@ -68,7 +68,7 @@ export default {
     },
 
     contentClass () {
-      return `${this.block && this.block.options.magnifyOption === 'fullscreen' ? 'mh-100' : ''} position-initial`
+      return `${this.block && this.block.options.magnifyOption === 'fullscreen' ? 'mh-100 rounded-0' : 'card'} position-initial`
     },
   },
 
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index b35145332..d1e8301ac 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -270,6 +270,14 @@ input[type="search"]::-webkit-search-cancel-button {
   padding-top: 0;
 }
 
+.modal-content {
+  &.card {
+    background-color: #FFF;
+    background-clip: border-box;
+    border: 0 solid rgba(0, 0, 0, 0.125);
+    border-radius: 1rem;
+  }
+}
 // Supporting CSS to improve print-to-PDF option
 @media print {
   @page {
diff --git a/lib/js/src/compose/types/page-block/record-list.ts b/lib/js/src/compose/types/page-block/record-list.ts
index aba870c1b..c049fb43f 100644
--- a/lib/js/src/compose/types/page-block/record-list.ts
+++ b/lib/js/src/compose/types/page-block/record-list.ts
@@ -73,7 +73,7 @@ const defaults: Readonly<Options> = Object.freeze({
   hideRecordEditButton: false,
   hideRecordViewButton: true,
   hideRecordPermissionsButton: true,
-  enableRecordPageNavigation: true,
+  enableRecordPageNavigation: false,
   allowExport: false,
   perPage: 20,
   recordDisplayOption: 'sameTab',