From fbc692a8ed83b9612a63effb38c86bae83acc2fa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 23 Mar 2022 14:45:27 +0800
Subject: [PATCH 1/3] fix: icon overlap issue

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../editableCell/editableAttachmentCell.vue          | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
index 7f0bb706ff..477ec6243c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
@@ -18,7 +18,8 @@
     </div>
 
     <div class="d-flex align-center img-container">
-      <div
+      <div class="d-flex no-overflow">
+        <div
         v-for="(item,i) in (isPublicForm ? localFilesState : localState)"
         :key="item.url || item.title"
         class="thumbnail align-center justify-center d-flex"
@@ -60,8 +61,8 @@
           </template>
           <span>{{ item.title }}</span>
         </v-tooltip>
+        </div>
       </div>
-
       <div v-if="isForm || active && !isPublicGrid" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
         <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner">
           mdi-loading mdi-spin
@@ -90,7 +91,6 @@
       </v-icon>
       <input ref="file" type="file" multiple class="d-none" @change="onFileSelection">
     </div>
-
     <v-dialog
       v-if="dialog"
       v-model="dialog"
@@ -405,6 +405,10 @@ export default {
   margin: 0 -2px;
 }
 
+.no-overflow {
+  overflow: hidden;
+}
+
 .add {
   transition: .2s background-color;
   /*background-color: #666666ee;*/
@@ -436,6 +440,7 @@ export default {
 }
 
 .expand-icon {
+  margin-left: 8px;
   border-radius: 2px;
   /*opacity: 0;*/
   transition: .3s background-color;
@@ -552,6 +557,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *

From e85aaf431a3f64524753439789a8ed8cbc4cb492 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 23 Mar 2022 17:31:35 +0800
Subject: [PATCH 2/3] fix: gallery locked view

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../project/spreadsheet/components/editableCell.vue         | 1 +
 .../components/editableCell/editableAttachmentCell.vue      | 6 +++---
 .../project/spreadsheet/components/expandedForm.vue         | 4 +++-
 .../components/project/spreadsheet/rowsXcDataTable.vue      | 3 +++
 .../components/project/spreadsheet/views/galleryView.vue    | 6 ++++--
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index 001ae68863..48707212be 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -18,6 +18,7 @@
       :column="column"
       :is-public-grid="isPublic && !isForm"
       :is-public-form="isPublic && isForm"
+      :is-locked="isLocked"
       v-on="$listeners"
     />
 
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
index 477ec6243c..2b488f5a5d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
@@ -63,7 +63,7 @@
         </v-tooltip>
         </div>
       </div>
-      <div v-if="isForm || active && !isPublicGrid" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
+      <div v-if="isForm || active && !isPublicGrid && !isLocked" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
         <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner">
           mdi-loading mdi-spin
         </v-icon>
@@ -100,7 +100,7 @@
         <v-card-text class="h-100 backgroundColor">
           <div class="d-flex mx-2">
             <v-btn
-              v-if="(isForm || _isUIAllowed('tableAttachment')) && !isPublicGrid"
+              v-if="(isForm || _isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
               small
               class="my-4 "
               :loading="uploading"
@@ -127,7 +127,7 @@
                     style="position: relative"
                   >
                     <v-icon
-                      v-if="_isUIAllowed('tableAttachment') && !isPublicGrid"
+                      v-if="_isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
                       small
                       class="remove-icon"
                       @click="removeItem(i)"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
index ea54deb7a5..06a9cc73a2 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
@@ -151,6 +151,7 @@
                       :meta="meta"
                       :sql-ui="sqlUi"
                       :is-form="true"
+                      :is-locked="isLocked"
                       @focus="active = col._cn"
                       @blur="active = ''"
                       @input="$set(changedColumns,col._cn, true)"
@@ -305,7 +306,8 @@ export default {
     availableColumns: [Object, Array],
     queryParams: Object,
     meta: Object,
-    presetValues: Object
+    presetValues: Object,
+    isLocked: Boolean,
   },
   data: () => ({
     showborder: false,
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 0233fd07b3..22de323c49 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -340,6 +340,7 @@
               :sql-ui="sqlUi"
               :primary-value-column="primaryValueColumn"
               :cover-image-field="coverImageField"
+              :is-locked="isLocked"
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
@@ -606,6 +607,7 @@
         :query-params="queryParams"
         :show-next-prev="false"
         :preset-values="presetValues"
+        :is-locked="isLocked"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (kanban.selectedExpandRow && kanban.selectedExpandRow.rowMeta && delete kanban.selectedExpandRow.rowMeta.new) ; loadKanbanData(false)"
         @commented="reloadComments"
@@ -632,6 +634,7 @@
         :query-params="queryParams"
         :show-next-prev="true"
         :preset-values="presetValues"
+        :is-locked="isLocked"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (data[selectedExpandRowIndex] && data[selectedExpandRowIndex].rowMeta && delete data[selectedExpandRowIndex].rowMeta.new) ; loadTableData()"
         @commented="reloadComments"
diff --git a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue b/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
index bbf2136fad..e545d5e362 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
@@ -10,7 +10,7 @@
           <v-card
             class="h-100"
             :elevation="hover ? 4 : 1"
-            @click="$emit('expandForm', {row,rowIndex,rowMeta})"
+            @click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})"
           >
             <v-carousel
               v-if="attachmentColumn"
@@ -76,6 +76,7 @@
                       :value="row[col._cn]"
                       :column="col"
                       :sql-ui="sqlUi"
+                      :is-locked="isLocked"
                       class="xc-input body-2"
                       :meta="meta"
                     />
@@ -108,7 +109,8 @@ export default {
     'primaryValueColumn',
     'showSystemFields',
     'sqlUi',
-    'coverImageField'
+    'coverImageField',
+    'isLocked'
   ],
   computed: {
     attachmentColumn() {

From 6e8a6f71ebc32c539b54b19000feea351073e897 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 23 Mar 2022 18:45:14 +0800
Subject: [PATCH 3/3] fix: close img overlay after pressing escape key

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../components/editableCell/editableAttachmentCell.vue         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
index 2b488f5a5d..b7e405806d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
@@ -389,6 +389,9 @@ export default {
         // eslint-disable-next-line eqeqeq
       } else if (e.keyCode == '39') {
         this.carousel = ++this.carousel % this.localState.length
+        // eslint-disable-next-line eqeqeq
+      } else if (e.keyCode == '27') {
+        this.hideIfVisible()
       }
     },
     async onFileDrop(e) {