github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: hover effect on toolabr icons

pull/6595/head
sreehari jayaraj 1 year ago
parent
2c10a00e89
commit
96db9016a5
8 changed files with 28 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      packages/nc-gui/assets/nc-icons/fields.svg
  2. 2
      packages/nc-gui/assets/nc-icons/filter.svg
  3. 6
      packages/nc-gui/assets/nc-icons/group.svg
  4. 7
      packages/nc-gui/assets/nc-icons/super-admin.svg
  5. 7
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  6. 3
      packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
  7. 4
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
  8. 8
      packages/nc-gui/utils/iconUtils.ts

12
packages/nc-gui/assets/nc-icons/fields.svg
Unescape View File

@ -1,8 +1,8 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.3335 12H14.0002" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12H2.00667" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.3335 8H14.0002" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 8H2.00667" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.3335 4H14.0002" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 4H2.00667" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.3335 12H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.3335 8H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 8H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.3335 4H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 4H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 792 B

After

Width:  |  Height:  |  Size: 822 B

2
packages/nc-gui/assets/nc-icons/filter.svg
Unescape View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6668 2H1.3335L6.66683 8.30667V12.6667L9.3335 14V8.30667L14.6668 2Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.6668 2H1.3335L6.66683 8.30667V12.6667L9.3335 14V8.30667L14.6668 2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 273 B

After

Width:  |  Height:  |  Size: 278 B

6
packages/nc-gui/assets/nc-icons/group.svg
Unescape View File

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 5.33331V14H2V5.33331" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.6665 8H9.33317" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.3332 2H0.666504V5.33333H15.3332V2Z" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 5.33331V14H2V5.33331" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.6665 8H9.33317" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.3332 2H0.666504V5.33333H15.3332V2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 497 B

7
packages/nc-gui/assets/nc-icons/super-admin.svg
Unescape View File

@ -4,10 +4,15 @@
</mask>
<g mask="url(#mask0_1882_74955)">
<path d="M7.33333 7.99996C6.6 7.99996 5.97222 7.73885 5.45 7.21663C4.92778 6.6944 4.66667 6.06663 4.66667 5.33329C4.66667 4.59996 4.92778 3.97218 5.45 3.44996C5.97222 2.92774 6.6 2.66663 7.33333 2.66663C8.06667 2.66663 8.69444 2.92774 9.21667 3.44996C9.73889 3.97218 10 4.59996 10 5.33329C10 6.06663 9.73889 6.6944 9.21667 7.21663C8.69444 7.73885 8.06667 7.99996 7.33333 7.99996ZM2 12V11.4666C2 11.1 2.09444 10.7555 2.28333 10.4333C2.47222 10.1111 2.73333 9.86663 3.06667 9.69996C3.63333 9.41107 4.27222 9.16663 4.98333 8.96663C5.69444 8.76663 6.47778 8.66663 7.33333 8.66663H7.56667C7.63333 8.66663 7.7 8.67774 7.76667 8.69996C7.67778 8.89996 7.60278 9.10829 7.54167 9.32496C7.48056 9.54163 7.43333 9.76663 7.4 9.99996H7.33333C6.54444 9.99996 5.83611 10.1 5.20833 10.3C4.58056 10.5 4.06667 10.7 3.66667 10.9C3.56667 10.9555 3.48611 11.0333 3.425 11.1333C3.36389 11.2333 3.33333 11.3444 3.33333 11.4666V12H7.53333C7.6 12.2333 7.68889 12.4638 7.8 12.6916C7.91111 12.9194 8.03333 13.1333 8.16667 13.3333H3.33333C2.96667 13.3333 2.65278 13.2027 2.39167 12.9416C2.13056 12.6805 2 12.3666 2 12ZM7.33333 6.66663C7.7 6.66663 8.01389 6.53607 8.275 6.27496C8.53611 6.01385 8.66667 5.69996 8.66667 5.33329C8.66667 4.96663 8.53611 4.65274 8.275 4.39163C8.01389 4.13051 7.7 3.99996 7.33333 3.99996C6.96667 3.99996 6.65278 4.13051 6.39167 4.39163C6.13056 4.65274 6 4.96663 6 5.33329C6 5.69996 6.13056 6.01385 6.39167 6.27496C6.65278 6.53607 6.96667 6.66663 7.33333 6.66663Z" fill="currentColor" stroke="none"/>
<path d="M10.4828 13.8679L10.4824 13.8674L8.05657 11.0906L10.4828 13.8679ZM10.4828 13.8679C10.55 13.944 10.6295 14.0024 10.7207 14.0418C10.8102 14.0804 10.9036 14.1 11 14.1C11.0964 14.1 11.1898 14.0804 11.2793 14.0418C11.3705 14.0024 11.45 13.944 11.5172 13.8679L11.5176 13.8674M10.4828 13.8679L11.5176 13.8674M7.97336 10.3756L8.55759 9.25797L8.55927 9.25474L8.55933 9.25477C8.62026 9.14788 8.70377 9.06179 8.80875 8.99766C8.91566 8.93233 9.03434 8.9 9.16243 8.9H12.8376C12.9657 8.9 13.0843 8.93233 13.1913 8.99766C13.2962 9.06179 13.3797 9.14788 13.4407 9.25477L13.4425 9.25794L13.4424 9.25797L14.0266 10.3756C14.0538 10.4227 14.0731 10.4726 14.0843 10.5251C14.0947 10.5743 14.1 10.6235 14.1 10.6727L7.97336 10.3756ZM7.97336 10.3756C7.94624 10.4227 7.92688 10.4726 7.91574 10.5251L7.97336 10.3756ZM11.5176 13.8674L13.9434 11.0906M11.5176 13.8674L13.9434 11.0906M9.97116 9.55908L9.51524 10.4303H8.71344L9.16893 9.5599C9.16905 9.55983 9.16918 9.55974 9.16934 9.55965L9.97116 9.55908ZM9.97116 9.55908H9.17043C9.1702 9.55908 9.17026 9.55909 9.17043 9.55905C9.17046 9.55905 9.1705 9.55904 9.17053 9.55903C9.17064 9.559 9.17061 9.559 9.17043 9.55907C9.17024 9.55915 9.16989 9.55932 9.16934 9.55965L9.97116 9.55908ZM13.9434 11.0906C13.995 11.0317 14.0344 10.9664 14.0608 10.8949L13.9434 11.0906ZM7.9 10.6727C7.9 10.7497 7.91295 10.8239 7.93916 10.8949L7.91574 10.5252C7.9053 10.5743 7.9 10.6235 7.9 10.6727ZM7.93916 10.8949C7.96557 10.9663 8.005 11.0316 8.05652 11.0905L7.93916 10.8949ZM11.725 10.4303H10.275L10.731 9.55908H11.269L11.725 10.4303ZM8.95191 11.0894H10.6598V13.0534L8.95191 11.0894ZM11.3402 11.0894H13.0481L11.3402 13.0534V11.0894ZM12.0288 9.55908H12.8296C12.8298 9.55908 12.8297 9.55909 12.8296 9.55905C12.8295 9.55905 12.8295 9.55904 12.8295 9.55903C12.8294 9.559 12.8294 9.559 12.8296 9.55907C12.8298 9.55915 12.8301 9.55933 12.8307 9.55965C12.8308 9.55974 12.831 9.55983 12.8311 9.5599L13.2866 10.4303H12.4848L12.0288 9.55908ZM12.8303 9.55841L12.8303 9.55842L12.8303 9.55841Z" fill="currentColor" stroke="none"/>
<path d="M11 14C10.9117 14 10.826 13.9815 10.7429 13.9444C10.6597 13.9074 10.587 13.8543 10.5247 13.7852L8.14026 11.0741C8.09351 11.0198 8.05844 10.9605 8.03506 10.8963C8.01169 10.8321 8 10.7654 8 10.6963C8 10.6519 8.0039 10.6062 8.01169 10.5593C8.01948 10.5123 8.03636 10.4691 8.06234 10.4296L8.64675 9.32593C8.7039 9.22716 8.78052 9.14815 8.87662 9.08889C8.97273 9.02963 9.08052 9 9.2 9H12.8C12.9195 9 13.0273 9.02963 13.1234 9.08889C13.2195 9.14815 13.2961 9.22716 13.3532 9.32593L13.9377 10.4296C13.9636 10.4691 13.9805 10.5123 13.9883 10.5593C13.9961 10.6062 14 10.6519 14 10.6963C14 10.7654 13.9883 10.8321 13.9649 10.8963C13.9416 10.9605 13.9065 11.0198 13.8597 11.0741L11.4753 13.7852C11.413 13.8543 11.3403 13.9074 11.2571 13.9444C11.174 13.9815 11.0883 14 11 14ZM10.2597 10.4815H11.7403L11.2727 9.59259H10.7273L10.2597 10.4815ZM10.6883 13.0519V11.0741H8.95844L10.6883 13.0519ZM11.3117 13.0519L13.0416 11.0741H11.3117V13.0519ZM12.4338 10.4815H13.2597L12.7922 9.59259H11.9662L12.4338 10.4815ZM8.74026 10.4815H9.56623L10.0338 9.59259H9.20779L8.74026 10.4815Z" fill="currentColor" stroke="currentColor" stroke-width="0.3"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

7
packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
Unescape View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import type ColumnFilter from './ColumnFilter.vue'
import {
ActiveViewInj,
IsLockedInj,
@ -11,10 +10,9 @@ import {
useSmartsheetStoreOrThrow,
useViewFilters,
watch,
iconMap,
} from '#imports'
import FilterIcon from '~icons/nc-icons/filter'
const isLocked = inject(IsLockedInj, ref(false))
const activeView = inject(ActiveViewInj, ref())
@ -63,8 +61,7 @@ useMenuCloseOnEsc(open)
<div :class="{ 'nc-active-btn': filtersLength }">
<a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
<div class="flex items-center gap-2">
<FilterIcon class="h-4 w-4" />
<component :is="iconMap.filter" class="h-4 w-4" />
<!-- Filter -->
<span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.filter') }}</span>

3
packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
Unescape View File

@ -15,7 +15,6 @@ import {
useNuxtApp,
useSmartsheetStoreOrThrow,
} from '#imports'
import GroupIcon from '~icons/nc-icons/group'
const groupingUidt = [
UITypes.SingleSelect,
@ -220,7 +219,7 @@ onMounted(async () => {
<div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">
<a-button v-e="['c:group-by']" class="nc-group-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-2">
<GroupIcon class="h-4 w-4" />
<component :is="iconMap.group" class="h-4 w-4" />
<!-- Group By -->
<span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.groupBy') }}</span>

4
packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
Unescape View File

@ -17,8 +17,6 @@ import {
watch,
} from '#imports'
import SortIcon from '~icons/nc-icons/sort'
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
const isLocked = inject(IsLockedInj, ref(false))
@ -115,7 +113,7 @@ watch(open, () => {
<div :class="{ 'nc-active-btn': sorts?.length }">
<a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-2">
<SortIcon class="h-4 w-4" />
<component :is="iconMap.sort" class="h-4 w-4" />
<!-- Sort -->
<span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.sort') }}</span>

8
packages/nc-gui/utils/iconUtils.ts
Unescape View File

@ -99,7 +99,12 @@ import Editor from '~icons/nc-icons/editor'
import Commentor from '~icons/nc-icons/commentor'
import Viewer from '~icons/nc-icons/viewer'
import NoAccess from '~icons/nc-icons/no-access'
// toolbar
import Fields from '~icons/nc-icons/fields'
import Filter from '~icons/nc-icons/filter'
import Group from '~icons/nc-icons/group'
import Sort from '~icons/nc-icons/sort'
// keep it for reference
// todo: remove it after all icons are migrated
@ -249,6 +254,9 @@ import Fields from '~icons/nc-icons/fields'
} as const */
export const iconMap = {
sort: Sort,
group: Group,
filter: Filter,
fields: Fields,
mm: ManytoManyIcon,
hm: HasManyIcon,

Write Preview
Loading…
Cancel
Save