Browse Source

fix(nc-gui): ring opacity

pull/3936/head
braks 2 years ago
parent
commit
84552d9956
  1. 10
      packages/nc-gui/assets/style.scss
  2. 2
      packages/nc-gui/components/cell/attachment/Carousel.vue
  3. 6
      packages/nc-gui/components/cell/attachment/Modal.vue
  4. 4
      packages/nc-gui/components/cell/attachment/index.vue
  5. 2
      packages/nc-gui/components/dashboard/TreeView.vue
  6. 2
      packages/nc-gui/components/general/MiniSidebar.vue
  7. 6
      packages/nc-gui/layouts/base.vue
  8. 20
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  9. 24
      packages/nc-gui/pages/forgot-password.vue
  10. 24
      packages/nc-gui/pages/index/index/[projectId].vue
  11. 22
      packages/nc-gui/pages/index/index/create.vue
  12. 4
      packages/nc-gui/pages/index/index/index.vue
  13. 8
      packages/nc-gui/pages/index/user/index.vue
  14. 24
      packages/nc-gui/pages/signin.vue
  15. 28
      packages/nc-gui/pages/signup/[[token]].vue
  16. 4
      packages/nc-gui/windi.config.ts

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

@ -87,7 +87,7 @@ a {
}
// for highlighting toolbar menu item
.nc-active-btn > .ant-btn{
.nc-active-btn > .ant-btn {
@apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20);
}
@ -205,10 +205,10 @@ a {
}
.scaling-btn {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white;
@apply z-1 relative color-transition rounded-md px-4 py-2 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@apply ring-opacity-100 ring-[2px] ring-slate-300 rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
content: '';
z-index: -1;
}
@ -255,7 +255,7 @@ a {
}
.ant-dropdown-menu-item, .ant-menu-item {
@apply !py-0 active:(ring ring-accent);
@apply !py-0 active:(ring ring-accent ring-opacity-100);
}
.ant-dropdown-menu-title-content,
@ -263,7 +263,7 @@ a {
@apply !py-0;
}
.ant-dropdown-menu-submenu-title{
.ant-dropdown-menu-submenu-title {
@apply !pr-2;
}

2
packages/nc-gui/components/cell/attachment/Carousel.vue

@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
</div>
<div
class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
class="select-none group hover:ring active:ring-accent ring-opactiy-100 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
@click.stop="downloadFile(selectedImage)"
>
<h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>

6
packages/nc-gui/components/cell/attachment/Modal.vue

@ -89,7 +89,7 @@ function onClick(item: Record<string, any>) {
<general-overlay
v-model="isOverDropZone"
inline
class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
class="text-white ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
<div class="text-white text-3xl">Drop here</div>
@ -161,7 +161,7 @@ function onClick(item: Record<string, any>) {
.nc-attach-file {
@apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
@apply hover:(bg-primary bg-opacity-10 text-primary ring);
@apply active:(ring-accent bg-primary bg-opacity-20);
@apply active:(ring-accent ring-opacity-100 bg-primary bg-opacity-20);
}
.nc-attachment-item {
@ -182,7 +182,7 @@ function onClick(item: Record<string, any>) {
}
&:active::after {
@apply ring ring-accent shadow transform scale-103;
@apply ring ring-accent ring-opacity-100 shadow transform scale-103;
}
}
}

4
packages/nc-gui/components/cell/attachment/index.vue

@ -135,7 +135,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
v-model="isOverDropZone"
inline
:target="currentCellRef"
class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
>
<MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
</general-overlay>
@ -217,7 +217,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
.nc-cell {
.nc-attachment-cell {
.nc-attachment {
@apply w-[50px] h-[50px] min-h-[50px] min-w-[50px];
@apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded;
}
.ghost,

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

@ -522,7 +522,7 @@ function openTableCreateDialog() {
}
:deep(.ant-dropdown-menu-item) {
@apply !py-0 active:(ring ring-accent);
@apply !py-0 active:(ring ring-accent ring-opacity-100);
}
:deep(.ant-dropdown-menu-title-content) {

2
packages/nc-gui/components/general/MiniSidebar.vue

@ -78,7 +78,7 @@ const logout = () => {
</span>
</template>
<a-menu-item class="active:(ring ring-accent)">
<a-menu-item class="active:(ring ring-accent ring-opacity-100)">
<div
v-e="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"

6
packages/nc-gui/layouts/base.vue

@ -134,7 +134,7 @@ hooks.hook('page:finish', () => {
<style lang="scss">
.nc-lang-btn {
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white ring-opacity-100 active:(ring ring-accent) hover:(ring ring-accent);
&::after {
@apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@ -143,11 +143,11 @@ hooks.hook('page:finish', () => {
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
@apply transform scale-110 ring ring-accent ring-opacity-100;
}
&:active::after {
@apply ring ring-accent;
@apply ring ring-accent ring-opacity-100;
}
}
</style>

20
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@ -121,7 +121,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</div>
<div class="text-center my-9">
<button type="submit" class="submit" @click="submitForm">
<button type="submit" class="scaling-btn bg-opacity-100" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
@ -162,23 +162,5 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
.nc-input {
@apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary;
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
}
}
</style>

24
packages/nc-gui/pages/forgot-password.vue

@ -55,7 +55,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
<div class="self-center flex flex-col justify-center items-center text-center gap-2">
<h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
@ -89,7 +89,7 @@ function resetError() {
</a-form-item>
<div class="self-center flex flex-col gap-4 items-center justify-center w-full">
<button class="submit" type="submit">
<button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2">
<MdiLogin />
{{ $t('activity.sendEmail') }}
@ -111,25 +111,7 @@ function resetError() {
.forgot-password {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
}
</style>

24
packages/nc-gui/pages/index/index/[projectId].vue

@ -19,7 +19,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
const route = useRoute()
const { project, loadProject, updateProject, isLoading } = useProject(route.params.projectId as string)
const { project, loadProject, updateProject, isLoading } = useProject()
await loadProject()
@ -94,7 +94,7 @@ onMounted(async () => {
</a-form-item>
<div class="text-center">
<button v-e="['a:project:edit:rename']" type="submit" class="submit">
<button v-e="['a:project:edit:rename']" type="submit" class="scaling-btn bg-opacity-100">
<span class="flex items-center gap-2">
<MaterialSymbolsRocketLaunchOutline />
{{ $t('general.edit') }}
@ -109,25 +109,7 @@ onMounted(async () => {
.update-project {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid rounded;
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
}
</style>

22
packages/nc-gui/pages/index/index/create.vue

@ -92,7 +92,7 @@ onMounted(async () => {
</a-form-item>
<div class="text-center">
<button class="submit" type="submit">
<button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2">
<MaterialSymbolsRocketLaunchOutline />
{{ $t('general.create') }}
@ -107,25 +107,7 @@ onMounted(async () => {
.create {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid rounded;
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
}
</style>

4
packages/nc-gui/pages/index/index/index.vue

@ -273,14 +273,14 @@ onBeforeMount(loadProjects)
<style scoped>
.nc-action-btn {
@apply text-gray-500 group-hover:text-accent active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
@apply text-gray-500 group-hover:text-accent active:(ring ring-accent ring-opacity-100) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
}
.nc-new-project-menu {
@apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
@apply ring-opacity-100 rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
content: '';
z-index: -1;
}

8
packages/nc-gui/pages/index/user/index.vue

@ -111,7 +111,7 @@ const resetError = () => {
</a-form-item>
<div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
<button class="submit" type="submit">
<button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2">
<MdiKeyChange />
{{ $t('activity.changePwd') }}
@ -130,7 +130,7 @@ const resetError = () => {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
.password {
@ -138,9 +138,5 @@ const resetError = () => {
@apply !border-none;
}
}
.submit {
@apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:(bg-primary bg-opacity-75);
}
}
</style>

24
packages/nc-gui/pages/signin.vue

@ -67,7 +67,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
@ -102,7 +102,7 @@ function resetError() {
</div>
<div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
<button class="submit group" type="submit">
<button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2">
<MdiLogin />
{{ $t('general.signIn') }}
@ -130,7 +130,7 @@ function resetError() {
.signin {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
.password {
@ -138,23 +138,5 @@ function resetError() {
@apply !border-none !m-0;
}
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
}
}
</style>

28
packages/nc-gui/pages/signup/[[token]].vue

@ -85,7 +85,7 @@ function resetError() {
<div
class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
<LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent) hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
<h1 class="prose-2xl font-bold self-center my-4">
{{ $t('general.signUp') }}
@ -122,7 +122,7 @@ function resetError() {
</a-form-item>
<div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4">
<button class="submit" type="submit">
<button class="scaling-btn bg-opacity-100" type="submit">
<span class="flex items-center gap-2">
<MaterialSymbolsRocketLaunchOutline />
@ -133,7 +133,7 @@ function resetError() {
<a
v-if="appInfo.googleAuthEnabled"
:href="`${api.instance.defaults.baseURL}/auth/google`"
class="submit after:(!bg-white) !text-primary border-1 border-primary !no-underline"
class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
>
<span class="flex items-center gap-2">
<LogosGoogleGmail />
@ -146,7 +146,7 @@ function resetError() {
<a-switch
v-model:checked="subscribe"
size="small"
class="my-1 hover:(ring ring-accent) focus:(!ring !ring-accent)"
class="my-1 hover:(ring ring-accent ring-opacity-100) focus:(!ring !ring-accent ring-opacity-100)"
/>
<div class="prose-xs text-gray-500">Subscribe to our weekly newsletter</div>
</div>
@ -172,7 +172,7 @@ function resetError() {
.signup {
.ant-input-affix-wrapper,
.ant-input {
@apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
}
.password {
@ -180,23 +180,5 @@ function resetError() {
@apply !border-none !m-0;
}
}
.submit {
@apply z-1 relative color-transition rounded p-3 text-white shadow;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-accent;
}
}
}
</style>

4
packages/nc-gui/windi.config.ts

@ -65,6 +65,10 @@ export default defineConfig({
primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
},
ringColor: {
primary: 'rgba(var(--color-primary), var(--tw-ring-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-ring-opacity))',
},
colors: {
...windiColors,
...themeColors,

Loading…
Cancel
Save