Browse Source

chore(gui-v2): remove duplicate color transitions

pull/2721/head
braks 2 years ago
parent
commit
2c4d8ee8e2
  1. 4
      packages/nc-gui-v2/app.vue
  2. 2
      packages/nc-gui-v2/components/general/Share.vue
  3. 2
      packages/nc-gui-v2/components/general/Social.vue
  4. 3
      packages/nc-gui-v2/nuxt.config.ts
  5. 4
      packages/nc-gui-v2/pages/projects/index.vue
  6. 2
      packages/nc-gui-v2/pages/projects/index/list.vue
  7. 25
      packages/nc-gui-v2/pages/signin.vue
  8. 11
      packages/nc-gui-v2/pages/signup.vue
  9. 4
      packages/nc-gui-v2/windi.config.ts

4
packages/nc-gui-v2/app.vue

@ -66,7 +66,7 @@ const signOut = () => {
class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
to="/user/settings"
>
<MdiAt class="mt-1 color-transition group-hover:text-success" />&nbsp;
<MdiAt class="mt-1 group-hover:text-success" />&nbsp;
<span class="prose">{{ email }}</span>
</nuxt-link>
@ -77,7 +77,7 @@ const signOut = () => {
class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2"
@click="signOut"
>
<MdiLogout class="color-transition dark:text-white group-hover:(!text-red-500)" />&nbsp;
<MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
<span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
</div>
</v-list>

2
packages/nc-gui-v2/components/general/Share.vue

@ -292,6 +292,6 @@ const openUrl = (url: string) => {
}
a {
@apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
@apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200);
}
</style>

2
packages/nc-gui-v2/components/general/Social.vue

@ -46,7 +46,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
<style scoped>
.icon {
@apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
@apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200);
}
.discourse {

3
packages/nc-gui-v2/nuxt.config.ts

@ -19,7 +19,7 @@ export default defineNuxtConfig({
'~/assets/css/global.css',
'~/assets/style/style.css',
'~/assets/style.css',
'~/assets/style-v2.css',
'~/assets/style-v2.scss',
],
meta: {
@ -53,6 +53,7 @@ export default defineNuxtConfig({
Icons({
autoInstall: true,
compiler: 'vue3',
defaultClass: 'nc-icon',
}),
Components({
resolvers: [AntDesignVueResolver()],

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

@ -114,12 +114,12 @@ const activePage = $ref(navDrawerOptions[0].title)
<div class="self-end flex text-4xl mb-1">
<MaterialSymbolsGridView
:class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
@click="navigateTo('/projects')"
/>
<MaterialSymbolsFormatListBulletedRounded
:class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
@click="navigateTo('/projects/list')"
/>
</div>

2
packages/nc-gui-v2/pages/projects/index/list.vue

@ -28,7 +28,7 @@ const openProject = async (project: ProjectType) => {
<template v-for="project of projects" :key="project.id">
<div
class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 color-transition"
class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2"
@click="openProject(project)"
>
<div class="font-semibold">{{ project.title || 'Untitled' }}</div>

25
packages/nc-gui-v2/pages/signin.vue

@ -81,12 +81,7 @@ const resetError = () => {
<div
class="bg-white dark:(!bg-gray-900 !text-white) md: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)"
>
<div
style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
>
<img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
</div>
<general-noco-icon />
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
@ -132,9 +127,9 @@ const resetError = () => {
:class="[
!valid
? '!opacity-50 !cursor-default'
: 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
: 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
]"
class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
type="submit"
>
<span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
@ -144,8 +139,8 @@ const resetError = () => {
<nuxt-link to="/signup">{{ $t('general.signUp') }}</nuxt-link>
</div>
<div class="prose-sm md:hidden">
<nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/reset-password">
<div class="md:hidden">
<nuxt-link class="prose-sm" to="/reset-password">
{{ $t('msg.info.signUp.forgotPassword') }}
</nuxt-link>
</div>
@ -155,13 +150,3 @@ const resetError = () => {
</v-form>
</NuxtLayout>
</template>
<style lang="scss">
.v-field__field {
@apply bg-white dark:(!bg-gray-900 text-white);
input {
@apply bg-white dark:(!bg-gray-700) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
}
}
</style>

11
packages/nc-gui-v2/pages/signup.vue

@ -71,12 +71,7 @@ const resetError = () => {
<div
class="bg-white dark:(!bg-gray-900 !text-white) md: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)"
>
<div
style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
>
<img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
</div>
<general-noco-icon />
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signUp') }}</h1>
@ -128,9 +123,9 @@ const resetError = () => {
:class="[
!valid
? '!opacity-50 !cursor-default'
: 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
: 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
]"
class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
type="submit"
>
<span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>

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

@ -15,12 +15,10 @@ import colors, { themeColors } from './utils/colorsUtils'
export default defineConfig({
extract: {
include: ['**/*.{vue,html,jsx,tsx}'],
include: ['**/*.{vue,html,jsx,tsx,css}'],
exclude: ['node_modules', '.git'],
},
attributify: true,
darkMode: 'class',
plugins: [

Loading…
Cancel
Save