Browse Source

refactor(gui-v2): expanded form ui corrections

- space between label and cell
- comment section take full height

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3139/head
Pranav C 2 years ago
parent
commit
8c5bd64990
  1. 2
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

2
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -29,8 +29,6 @@ const tablesById = $computed<Record<string, TableType>>(() =>
}, {}), }, {}),
) )
const showTableList = ref(true)
const tableCreateDlg = ref(false) const tableCreateDlg = ref(false)
let key = $ref(0) let key = $ref(0)

2
packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@ -54,7 +54,7 @@ const iconColor = '#1890ff'
v-if="isUIAllowed('rowComments')" v-if="isUIAllowed('rowComments')"
class="cursor-pointer select-none" class="cursor-pointer select-none"
@click="commentsDrawer = !commentsDrawer" @click="commentsDrawer = !commentsDrawer"
/>> />
<a-button class="!text" @click="emit('cancel')"> <a-button class="!text" @click="emit('cancel')">
<!-- Cancel --> <!-- Cancel -->
{{ $t('general.cancel') }} {{ $t('general.cancel') }}

6
packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@ -82,15 +82,15 @@ const isExpanded = useVModel(props, 'modelValue', emits)
<template> <template>
<a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false"> <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
<Header @cancel="isExpanded = false" /> <Header @cancel="isExpanded = false" />
<a-card class="!bg-gray-100 min-h-[70vh]"> <a-card class="!bg-gray-100">
<div class="flex h-full nc-form-wrapper items-stretch"> <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
<div class="flex-grow overflow-auto scrollbar-thin-primary"> <div class="flex-grow overflow-auto scrollbar-thin-primary">
<div class="w-[500px] mx-auto"> <div class="w-[500px] mx-auto">
<div v-for="col in fields" :key="col.title" class="mt-2 py-2"> <div v-for="col in fields" :key="col.title" class="mt-2 py-2">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" /> <SmartsheetHeaderCell v-else :column="col" />
<div class="!bg-white rounded px-1 min-h-[35px] flex align-center"> <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
<SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" /> <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
<SmartsheetCell <SmartsheetCell
v-else v-else

Loading…
Cancel
Save