Nc fix(nc-gui): Reduce gap between icons in rating field to fit 10 ic…

…ons in default width of column (#7986) * fix(nc-gui): reduce rating field gap between icons to fit 10 icons in column default width * fix(nc-gui): keep rating field cell content left align
nocodb · Mar 28, 2024 · 575178c · 575178c
1 parent 935085b
commit 575178c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
@@ -77,7 +77,7 @@ watch(rateDomRef, () => {
     :disabled="readOnly"
     :count="ratingMeta.max"
     :class="readOnly ? 'pointer-events-none' : ''"
-    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
+    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 2px'};`"
     :key="ratingMeta.icon.full"
     @keydown="onKeyPress"
   >
@@ -90,3 +90,9 @@ watch(rateDomRef, () => {
     </template>
   </a-rate>
 </template>
+
+<style scoped lang="scss">
+:deep(li:not(:last-child)) {
+  @apply mr-[1.5px];
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -195,7 +195,7 @@ onUnmounted(() => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       {
         'text-brand-500': isPrimary(column) && !props.virtual && !isForm && !isCalendar,
-        'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
+        'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen && !isRating(column),
         'h-10': !isEditColumnMenu && isForm && !isAttachment(column) && !isTextArea(column) && !isJSON(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
         '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),

diff --git a/packages/nc-gui/components/smartsheet/column/RatingOptions.vue b/packages/nc-gui/components/smartsheet/column/RatingOptions.vue
@@ -78,7 +78,7 @@ watch(
               <div class="flex-1">
                 <component
                   :is="getMdiIcon(icon.full)"
-                  class="mx-1"
+                  class="mr-[2px]"
                   :style="{
                     color: vModel.meta.color,
                   }"