Browse Source

fix : fixed select-item padding

pull/7181/head
musharaf-nocodb 10 months ago
parent
commit
2c56024f56
  1. 13
      packages/nc-gui/assets/style.scss
  2. 2
      packages/nc-gui/components/nc/Select.vue
  3. 14
      packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
  4. 7
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

13
packages/nc-gui/assets/style.scss

@ -222,7 +222,7 @@ a {
}
// select dropdown border style
.ant-select-dropdown {
@apply border-1 border-gray-200
@apply border-1 border-gray-200;
}
// menu item styling
@ -425,9 +425,9 @@ a {
.ant-dropdown-menu-submenu {
@apply !py-0;
&.ant-dropdown-menu-submenu-popup{
@apply border-1 border-gray-200
&.ant-dropdown-menu-submenu-popup {
@apply border-1 border-gray-200;
}
.ant-dropdown-menu,
.ant-menu {
@ -504,15 +504,14 @@ a {
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
@apply bg-gray-300 bg-opacity-20;
}
/* Add this to your global or component-specific stylesheet */
/* Hide the element with id selected-item-icon inside NcSelect */
.ant-select-selection-item #selected-item-icon {
display: none;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
@apply bg-transparent
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
@apply bg-transparent;
}
.ant-select-selection-search-input:focus {

2
packages/nc-gui/components/nc/Select.vue

@ -62,7 +62,7 @@ const onChange = (value: string) => {
<style lang="scss">
.ant-select-item {
@apply !xs:h-13;
@apply !xs:h-13 !p-2;
}
.ant-select-item-option-content {
@apply !xs:mt-2.5;

14
packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue

@ -65,7 +65,7 @@ useMenuCloseOnEsc(open)
</div>
<template #overlay>
<div
class="w-full bg-white shadow-lg p-2 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
data-testid="nc-height-menu"
>
<div class="flex flex-col w-full text-sm" @click.stop>
@ -73,12 +73,12 @@ useMenuCloseOnEsc(open)
<div class="nc-row-height-option" @click="updateRowHeight(0)">
<GeneralIcon icon="heightShort" class="nc-row-height-icon" />
{{ $t('objects.heightClass.short') }}
<component v-if="!(view?.view as GridType).row_height" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
<component v-if="!(view?.view as GridType).row_height" class="text-primary w-5 h-5 " :is="iconMap.check" />
</div>
<div class="nc-row-height-option" @click="updateRowHeight(1)">
<GeneralIcon icon="heightMedium" class="nc-row-height-icon" />
{{ $t('objects.heightClass.medium') }}
<component v-if=" (view?.view as GridType).row_height === 1" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
<component v-if=" (view?.view as GridType).row_height === 1" class="text-primary w-5 h-5 " :is="iconMap.check" />
</div>
<div
class="nc-row-height-option"
@ -87,7 +87,7 @@ useMenuCloseOnEsc(open)
>
<GeneralIcon icon="heightTall" class="nc-row-height-icon" />
{{ $t('objects.heightClass.tall') }}
<component v-if=" (view?.view as GridType).row_height === 2" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
<component v-if=" (view?.view as GridType).row_height === 2" class="text-primary w-5 h-5 " :is="iconMap.check" />
</div>
<div
class="nc-row-height-option"
@ -96,7 +96,7 @@ useMenuCloseOnEsc(open)
>
<GeneralIcon icon="heightExtra" class="nc-row-height-icon" />
{{ $t('objects.heightClass.extra') }}
<component v-if=" (view?.view as GridType).row_height === 3" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
<component v-if=" (view?.view as GridType).row_height === 3" class="text-primary w-5 h-5 " :is="iconMap.check" />
</div>
</div>
</div>
@ -106,10 +106,10 @@ useMenuCloseOnEsc(open)
<style scoped>
.nc-row-height-option {
@apply flex items-center py-2 pl-1 pr-2 justify-start hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
@apply flex items-center gap-2 p-2 justify-start hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
}
.nc-row-height-icon {
@apply mx-2 text-base;
@apply text-base;
}
</style>

7
packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@ -144,13 +144,6 @@ watch(columns, () => {
</div>
</template>
<style lang="scss">
.nc-dropdown-toolbar-search-field-option {
.ant-select-item-option {
@apply p-2;
}
}
</style>
<style scoped>
:deep(input::placeholder) {

Loading…
Cancel
Save