@ -134,6 +134,10 @@ const enableEditMode = () => {
}
const updateProjectTitle = async ( ) => {
if ( tempTitle . value ) {
tempTitle . value = tempTitle . value . trim ( )
}
if ( ! tempTitle . value ) return
try {
@ -431,22 +435,8 @@ 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"
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 "
>
< NcButton
v - e = "['c:base:expand']"
type = "text"
size = "xxsmall"
class = "nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible"
@ click = "onProjectClick(base, true, true)"
>
< GeneralIcon
icon = "triangleFill"
class = "group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !xs:visible"
: class = "{ '!rotate-180': base.isExpanded, '!visible': isOptionsOpen }"
/ >
< / NcButton >
< div class = "flex items-center mr-1" @click ="onProjectClick(base)" >
< div class = "flex items-center select-none w-6 h-full" >
< a -spin v -if = " base.isLoading " class = "!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator ="indicator" / >
@ -469,7 +459,7 @@ const onTableIdCopy = async () => {
v - if = "editMode"
ref = "input"
v - model = "tempTitle"
class = "flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent w-4/5 "
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 }"
@ click . stop
@ keyup . enter = "updateProjectTitle"
@ -478,23 +468,24 @@ const onTableIdCopy = async () => {
/ >
< NcTooltip
v - else
class = "nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
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 }"
show - on - truncate - only
@ click = "onProjectClick(base)"
>
< template # title > { { base . title } } < / template >
< span @click ="onProjectClick(base)" >
< span >
{ { base . title } }
< / span >
< / NcTooltip >
< div : class = "{ 'flex flex-grow h-full': !editMode }" @click ="onProjectClick(base)" > < / div >
< template v-if ="!editMode" >
< NcDropdown v-if ="!isSharedBase" v-model:visible="isOptionsOpen" :trigger="['click']" >
< NcButton
v - e = "['c:base:options']"
class = "nc-sidebar-node-btn"
: class = "{ '!text-black !opacity-100': isOptionsOpen }"
: class = "{ '!text-black !opacity-100 !inline-block ': isOptionsOpen }"
data - testid = "nc-sidebar-context-menu"
type = "text"
size = "xxsmall"
@ -620,12 +611,33 @@ const onTableIdCopy = async () => {
size = "xxsmall"
type = "text"
data - testid = "nc-sidebar-add-base-entity"
: class = "{ '!text-black !visible': isAddNewProjectChildEntityLoading, '!visible': isOptionsOpen }"
: class = " {
'!text-black !inline-block !opacity-100' : isAddNewProjectChildEntityLoading ,
'!inline-block !opacity-100' : isOptionsOpen ,
} "
: loading = "isAddNewProjectChildEntityLoading"
@ click . stop = "addNewProjectChildEntity"
>
< GeneralIcon icon = "plus" class = "text-xl leading-5" style = "-webkit-text-stroke: 0.15px" / >
< / NcButton >
< NcButton
v - e = "['c:base:expand']"
type = "text"
size = "xxsmall"
class = "nc-sidebar-node-btn nc-sidebar-expand !xs:opacity-100"
: class = " {
'!opacity-100' : isOptionsOpen ,
} "
@ click = "onProjectClick(base, true, true)"
>
< GeneralIcon
icon = "chevronDown"
class = "group-hover:visible cursor-pointer transform transition-transform duration-500 rotate-270"
: class = "{ '!rotate-180': base.isExpanded }"
/ >
< / NcButton >
< / template >
< / div >
< / div >
@ -658,25 +670,29 @@ const onTableIdCopy = async () => {
ghost
>
< template # expandIcon = "{ isActive }" >
< div
class = "nc-sidebar-expand nc-sidebar-node-btn flex flex-row items-center -mt-2 xs:(mt-3 border-1 border-gray-200 px-2.25 py-0.5 rounded-md !mr-0.25)"
< NcButton
v - e = "['c:external:base:expand']"
type = "text"
size = "xxsmall"
class = "nc-sidebar-node-btn nc-sidebar-expand !xs:opacity-100"
: class = "{ '!opacity-100 !inline-block': isBasesOptionsOpen[source!.id!] }"
>
< GeneralIcon
icon = "triangleFill"
class = "nc-sidebar-source-node-btns -mt-0.75 invisible xs:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 text-gray-500 rotate-90"
icon = "chevronDown "
class = "flex-none cursor-pointer transform transition-transform duration-500 rotate-27 0"
: class = "{ '!rotate-180': isActive }"
/ >
< / div >
< / NcButton >
< / template >
< a -collapse -panel :key ="`collapse-${source.id}`" >
< template # header >
< div class = "nc-sidebar-node min-w-20 w-full flex flex-row group py-0.25" >
< 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
v - if = "sourceIndex === 0"
class = "source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title"
@ contextmenu = "setMenuContext('source', source)"
>
< GeneralBaseLogo class = "min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" / >
< GeneralBaseLogo class = "flex-none min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" / >
{ { $t ( 'general.default' ) } }
< / div >
< div
@ -684,22 +700,29 @@ const onTableIdCopy = async () => {
class = "source-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full"
@ contextmenu = "setMenuContext('source', source)"
>
< GeneralBaseLogo class = "min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" / >
< div
: data - testid = "`nc-sidebar-base-${source.alias}`"
class = "nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none"
< GeneralBaseLogo
class = "flex-none min-w-4 !xs:(min-w-4.25 w-4.25 text-sm) !text-gray-600 !group-hover:text-gray-800"
/ >
< NcTooltip
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 ,
} "
show - on - truncate - only
>
< template # title > { { source . alias || '' } } < / template >
< span :data-testid ="`nc-sidebar-base-${source.alias}`" >
{ { source . alias || '' } }
< / div >
< a -tooltip class = "xs:(hidden)" >
< / span >
< / NcTooltip >
< NcTooltip class = "xs:(hidden) flex items-center mr-1" >
< template # title > { { $t ( 'objects.externalDb' ) } } < / template >
< div >
< GeneralIcon icon = "info" class = "text-gray-400 -mt-0.5 hover:text-gray-700 mr-1" / >
< / div >
< / a - t o o l t i p >
< GeneralIcon icon = "info" class = "flex-none text-gray-400 hover:text-gray-700 mr-1" / >
< / NcTooltip >
< / div >
< div class = "flex flex-row items-center gap-x-0.25 w-12.25 " >
< div class = "flex flex-row items-center gap-x-0.25" >
< NcDropdown
: visible = "isBasesOptionsOpen[source!.id!]"
: trigger = "['click']"
@ -708,7 +731,7 @@ const onTableIdCopy = async () => {
< NcButton
v - e = "['c:source:options']"
class = "nc-sidebar-node-btn"
: class = "{ '!text-black !opacity-100': isBasesOptionsOpen[source!.id!] }"
: class = "{ '!text-black !opacity-100 !inline-block ': isBasesOptionsOpen[source!.id!] }"
type = "text"
size = "xxsmall"
@ click . stop = "isBasesOptionsOpen[source!.id!] = !isBasesOptionsOpen[source!.id!]"
@ -743,6 +766,7 @@ const onTableIdCopy = async () => {
type = "text"
size = "xxsmall"
class = "nc-sidebar-node-btn"
: class = "{ '!opacity-100 !inline-block': isBasesOptionsOpen[source!.id!] }"
@ click . stop = "openTableCreateDialog(sourceIndex)"
>
< GeneralIcon icon = "plus" class = "text-xl leading-5" style = "-webkit-text-stroke: 0.15px" / >
@ -770,7 +794,7 @@ const onTableIdCopy = async () => {
< NcMenu
class = "!py-0 rounded text-sm"
: class = " {
'!min-w-70 ' : contextMenuTarget . type === 'table' ,
'!min-w-62.5 ' : contextMenuTarget . type === 'table' ,
} "
>
< template v-if ="contextMenuTarget.type === 'base' && base.type === 'database'" > < / template >
@ -845,7 +869,11 @@ const onTableIdCopy = async () => {
< style lang = "scss" scoped >
: deep ( . ant - collapse - header ) {
@ apply ! mx - 0 ! pl - 8.75 ! xs : ( pl - 8 ) ! pr - 0.5 ! py - 0.5 hover : bg - gray - 200 xs : ( hover : bg - gray - 50 ) ! rounded - md ;
@ apply ! mx - 0 ! pl - 8.75 h - 7.1 ! xs : ( pl - 7 h - [ 3 rem ] ) ! 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 ) ;
}
}
: deep ( . ant - collapse - item ) {
@ -856,7 +884,13 @@ const onTableIdCopy = async () => {
@ apply ! px - 0 ! pb - 0 ! pt - 0.25 ;
}
: deep ( . ant - collapse - header : hover . nc - sidebar - source - node - btns ) {
@ apply visible ;
: deep ( . ant - collapse - header : hover ) {
. nc - sidebar - node - btn {
@ apply ! opacity - 100 ! inline - block ;
& : not ( . nc - sidebar - expand ) {
@ apply ! xs : hidden ;
}
}
}
< / style >
Ramesh Mane
7 months ago
committed by
GitHub
