Nc fix: Misc Design Fixes II (#8461)

* fix(nc-gui): team & settings tab ui fixes

* fix(nc-gui): update sidebar base text color on hover and selected state

* fix(nc-gui): sidebar base, table menu height issue

* fix(nc-gui): sidebar view menu alignment issue

* fix(nc-gui): sidebar view menu height and active state color

* fix(nc-gui): update global search ui

* fix(nc-gui): grid row hover style update

* fix(nc-gui): topbar font weight issue

* fix(nc-gui): team & setting tab user list margin top issue

* fix(nc-gui): workspace icon color issue

* fix(test): update global search test cases
This commit is contained in:
Ramesh Mane
2024-05-11 20:06:11 +05:30
committed by GitHub
parent fd3e5b21ac
commit d372228080
11 changed files with 310 additions and 235 deletions

View File

@@ -454,7 +454,7 @@ const onTableIdCopy = async () => {
:data-testid="`nc-sidebar-base-${base.title}`"
:data-base-id="base.id"
>
<div class="flex items-center gap-0.75 py-0.25 cursor-pointer" @contextmenu="setMenuContext('base', base)">
<div class="flex items-center gap-0.75 py-0.5 cursor-pointer" @contextmenu="setMenuContext('base', base)">
<div
ref="baseNodeRefs"
:class="{
@@ -462,7 +462,7 @@ const onTableIdCopy = async () => {
'hover:bg-gray-200': !(activeProjectId === base.id && baseViewOpen),
}"
:data-testid="`nc-sidebar-base-title-${base.title}`"
class="nc-sidebar-node base-title-node h-7.25 flex-grow rounded-md group flex items-center w-full pr-1 pl-1.5"
class="nc-sidebar-node base-title-node h-7 flex-grow rounded-md group flex items-center w-full pr-1 pl-1.5"
>
<div class="flex items-center mr-1" @click="onProjectClick(base)">
<div class="flex items-center select-none w-6 h-full">
@@ -487,7 +487,7 @@ const onTableIdCopy = async () => {
ref="input"
v-model="tempTitle"
class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent flex-1 mr-4"
:class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen && !isMobileMode }"
:class="activeProjectId === base.id && baseViewOpen ? '!text-brand-600 !font-semibold' : '!text-gray-700'"
@click.stop
@keyup.enter="updateProjectTitle"
@keyup.esc="updateProjectTitle"
@@ -497,7 +497,7 @@ const onTableIdCopy = async () => {
v-else
class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none flex-1"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
:class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
:class="activeProjectId === base.id && baseViewOpen ? 'text-brand-600 font-semibold' : 'text-gray-700'"
show-on-truncate-only
@click="onProjectClick(base)"
>
@@ -713,7 +713,7 @@ const onTableIdCopy = async () => {
</template>
<a-collapse-panel :key="`collapse-${source.id}`">
<template #header>
<div class="nc-sidebar-node min-w-20 w-full h-full flex flex-row group py-0.25 pr-6.5 !mr-0">
<div class="nc-sidebar-node min-w-20 w-full h-full flex flex-row group py-0.5 pr-6.5 !mr-0">
<div
v-if="sourceIndex === 0"
class="source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title"
@@ -735,6 +735,9 @@ const onTableIdCopy = async () => {
ref="input"
v-model="sourceRenameHelpers[source.id].tempTitle"
class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent flex-1 mr-4"
:class="
activeProjectId === base.id && baseViewOpen ? '!text-brand-600 !font-semibold' : '!text-gray-700'
"
:data-source-rename-input-id="source.id"
@click.stop
@keydown.enter.stop.prevent
@@ -746,9 +749,11 @@ const onTableIdCopy = async () => {
v-else
class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
:class="{
'text-black font-semibold': activeProjectId === base.id && baseViewOpen && !isMobileMode,
}"
:class="
activeProjectId === base.id && baseViewOpen && !isMobileMode
? 'text-brand-600 font-semibold'
: 'text-gray-700'
"
show-on-truncate-only
>
<template #title> {{ source.alias || '' }}</template>
@@ -926,7 +931,7 @@ const onTableIdCopy = async () => {
<style lang="scss" scoped>
:deep(.ant-collapse-header) {
@apply !mx-0 !pl-8.75 h-7.1 !xs:(pl-7 h-[3rem]) !pr-0.5 !py-0 hover:bg-gray-200 xs:(hover:bg-gray-50) !rounded-md;
@apply !mx-0 !pl-8.75 h-7 !xs:(pl-7 h-[3rem]) !pr-0.5 !py-0 hover:bg-gray-200 xs:(hover:bg-gray-50) !rounded-md;
.ant-collapse-arrow {
@apply !right-1 !xs:(flex-none border-1 border-gray-200 w-6.5 h-6.5 mr-1);