feat: added animations

0xJacky · Apr 8, 2023 · 69cdef4 · 69cdef4
1 parent dab2915
commit 69cdef4
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 77 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "@ant-design/icons-vue": "^6.1.0",
+        "@formkit/auto-animate": "^1.0.0-beta.6",
         "@types/lodash": "^4.14.188",
         "@types/marked": "^4.0.8",
         "@types/nprogress": "^0.2.0",

diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue
@@ -71,7 +71,11 @@ const lang = computed(() => {
                 <a-layout-content>
                     <page-header/>
                     <div class="router-view">
-                        <router-view/>
+                        <router-view v-slot="{ Component, route }">
+                            <transition name="slide-fade">
+                                <component :is="Component" :key="route.path"/>
+                            </transition>
+                        </router-view>
                     </div>
                 </a-layout-content>
 
@@ -122,6 +126,20 @@ const lang = computed(() => {
 </style>
 
 <style lang="less">
+.slide-fade-enter-active {
+    transition: all .3s ease-in-out;
+}
+
+.slide-fade-leave-active {
+    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.slide-fade-enter-from, .slide-fade-enter-to, .slide-fade-leave-to
+    /* .slide-fade-leave-active for below version 2.1.8 */ {
+    transform: translateX(10px);
+    opacity: 0;
+}
+
 body {
     overflow: unset !important;
 }

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -6,6 +6,7 @@ import router from './routes'
 //import 'ant-design-vue/dist/antd.less'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import {useSettingsStore} from '@/pinia'
+import {autoAnimatePlugin} from '@formkit/auto-animate/vue'
 
 
 const pinia = createPinia()
@@ -19,6 +20,6 @@ app.use(gettext)
 const settings = useSettingsStore()
 gettext.current = settings.language || 'en'
 
-app.use(router).mount('#app')
+app.use(router).use(autoAnimatePlugin).mount('#app')
 
 export default app
diff --git a/frontend/src/views/config/Config.vue b/frontend/src/views/config/Config.vue
@@ -44,9 +44,8 @@ watch(route, () => {
 </script>
 
 <template>
-    <inspect-config ref="inspect_config"/>
-
     <a-card :title="$gettext('Configurations')">
+        <inspect-config ref="inspect_config"/>
         <std-table
             :key="update"
             ref="table"

diff --git a/frontend/src/views/config/ConfigEdit.vue b/frontend/src/views/config/ConfigEdit.vue
@@ -72,10 +72,10 @@ const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 2
 
 
 <template>
-    <inspect-config ref="inspect_config"/>
     <a-row :gutter="16">
         <a-col :xs="24" :sm="24" :md="editor_md">
             <a-card :title="$gettext('Edit Configuration')">
+                <inspect-config ref="inspect_config"/>
                 <code-editor v-model:content="configText"/>
                 <footer-tool-bar>
                     <a-space>

diff --git a/frontend/src/views/config/InspectConfig.vue b/frontend/src/views/config/InspectConfig.vue
@@ -26,7 +26,7 @@ defineExpose({
 </script>
 
 <template>
-    <a-card class="inspect-container" :title="$gettext('Inspect Configurations')">
+    <div class="inspect-container">
         <a-alert :message="$gettext('Configuration file is test successful')" type="success"
                  show-icon v-if="data?.level<logLevel.Debug"/>
         <a-alert
@@ -50,7 +50,7 @@ defineExpose({
                 {{ data.message }}
             </template>
         </a-alert>
-    </a-card>
+    </div>
 </template>
 
 <style lang="less" scoped>

diff --git a/frontend/src/views/domain/DomainEdit.vue b/frontend/src/views/domain/DomainEdit.vue
@@ -280,14 +280,14 @@ const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 2
 }
 
 .slide-fade-enter-active {
-    transition: all .5s ease-in-out;
+    transition: all .3s ease-in-out;
 }
 
 .slide-fade-leave-active {
-    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
 
-.slide-fade-enter, .slide-fade-leave-to
+.slide-fade-enter-from, .slide-fade-enter-to, .slide-fade-leave-to
     /* .slide-fade-leave-active for below version 2.1.8 */ {
     transform: translateX(10px);
     opacity: 0;

diff --git a/frontend/src/views/domain/DomainList.vue b/frontend/src/views/domain/DomainList.vue
@@ -131,8 +131,8 @@ function handle_click_duplicate(name: string) {
                 </a-popconfirm>
             </template>
         </std-table>
+        <site-duplicate v-model:visible="show_duplicator" :name="target" @duplicated="table.get_list()"/>
     </a-card>
-    <site-duplicate v-model:visible="show_duplicator" :name="target" @duplicated="table.get_list()"/>
 </template>
 
 <style scoped>

diff --git a/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue b/frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue
@@ -198,7 +198,7 @@ function add_server() {
                 </div>
 
             </a-tab-pane>
-            
+
             <template #rightExtra>
                 <a-button @click="add_server" type="link" size="small">
                     <PlusOutlined/>

diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -31,18 +31,20 @@ function onSave(idx: number) {
         class="list-group"
         ghost-class="ghost"
         handle=".anticon-holder"
+        v-auto-animate
     >
         <template #item="{ element: directive, index }">
             <directive-editor-item @click="current_idx=index"
                                    :directive="directive"
                                    :current_idx="current_idx" :index="index"
                                    :ngx_directives="ngx_directives"
                                    :readonly="readonly"
+                                   v-auto-animate
             />
         </template>
     </draggable>
 
-    <directive-add v-if="!readonly" :ngx_directives="ngx_directives"/>
+    <directive-add v-if="!readonly" :ngx_directives="ngx_directives" v-auto-animate/>
 </template>
 
 <style lang="less" scoped>

diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
@@ -68,24 +68,22 @@ function save() {
                 </a-button>
             </a-popconfirm>
         </div>
-        <transition name="slide">
-            <div v-if="current_idx===index" class="directive-editor-extra">
-                <div class="extra-content">
-                    <a-form layout="vertical">
-                        <a-form-item :label="$gettext('Comments')">
-                            <a-textarea v-model:value="directive.comments"/>
-                        </a-form-item>
-                        <a-form-item :label="$gettext('Content')" v-if="directive.directive==='include'">
-                            <code-editor v-model:content="content"
-                                         defaultHeight="200px" style="width: 100%;"/>
-                            <div class="save-btn">
-                                <a-button @click="save">{{ $gettext('Save') }}</a-button>
-                            </div>
-                        </a-form-item>
-                    </a-form>
-                </div>
+        <div v-if="current_idx===index" class="directive-editor-extra">
+            <div class="extra-content">
+                <a-form layout="vertical">
+                    <a-form-item :label="$gettext('Comments')">
+                        <a-textarea v-model:value="directive.comments"/>
+                    </a-form-item>
+                    <a-form-item :label="$gettext('Content')" v-if="directive.directive==='include'">
+                        <code-editor v-model:content="content"
+                                     defaultHeight="200px" style="width: 100%;"/>
+                        <div class="save-btn">
+                            <a-button @click="save">{{ $gettext('Save') }}</a-button>
+                        </div>
+                    </a-form-item>
+                </a-form>
             </div>
-        </transition>
+        </div>
     </div>
 
 </template>
@@ -117,19 +115,6 @@ function save() {
     }
 }
 
-.slide-enter-active, .slide-leave-active {
-    transition: max-height .2s ease;
-    overflow: hidden;
-}
-
-.slide-enter-from, .slide-leave-to {
-    max-height: 0;
-}
-
-.slide-enter-to, .slide-leave-from {
-    max-height: 600px;
-}
-
 .input-wrapper {
     display: flex;
     gap: 10px;

diff --git a/frontend/src/views/nginx_log/NginxLog.vue b/frontend/src/views/nginx_log/NginxLog.vue
@@ -167,12 +167,12 @@ const computedBuffer = computed(() => {
             <pre class="nginx-log-container" ref="logContainer"
                  @scroll="debounce(on_scroll_log,100, null)()" v-html="computedBuffer"/>
         </a-card>
+        <footer-tool-bar v-if="control.type==='site'">
+            <a-button @click="router.go(-1)">
+                <translate>Back</translate>
+            </a-button>
+        </footer-tool-bar>
     </a-card>
-    <footer-tool-bar v-if="control.type==='site'">
-        <a-button @click="router.go(-1)">
-            <translate>Back</translate>
-        </a-button>
-    </footer-tool-bar>
 </template>
 
 <style lang="less">

diff --git a/frontend/src/views/preference/Preference.vue b/frontend/src/views/preference/Preference.vue
@@ -115,12 +115,12 @@ function save() {
                 </a-form-item>
             </a-form>
         </div>
+        <footer-tool-bar>
+            <a-button type="primary" @click="save">
+                {{ $gettext('Save') }}
+            </a-button>
+        </footer-tool-bar>
     </a-card>
-    <footer-tool-bar>
-        <a-button type="primary" @click="save">
-            {{ $gettext('Save') }}
-        </a-button>
-    </footer-tool-bar>
 </template>
 
 <style lang="less" scoped>

diff --git a/frontend/src/views/system/Upgrade.vue b/frontend/src/views/system/Upgrade.vue
@@ -101,20 +101,20 @@ async function perform_upgrade() {
 </script>
 
 <template>
-    <a-modal
-        :title="$gettext('Core Upgrade')"
-        v-model:visible="modalVisible"
-        :mask-closable="false"
-        :footer="null" :closable="modalClosable" force-render>
-        <a-progress
-            :stroke-color="progressStrokeColor"
-            :percent="progressPercent"
-            :status="progressStatus"
-        />
-
-        <div class="core-upgrade-log-container" ref="logContainer"/>
-    </a-modal>
     <a-card :title="$gettext('Upgrade')">
+        <a-modal
+            :title="$gettext('Core Upgrade')"
+            v-model:visible="modalVisible"
+            :mask-closable="false"
+            :footer="null" :closable="modalClosable" force-render>
+            <a-progress
+                :stroke-color="progressStrokeColor"
+                :percent="progressPercent"
+                :status="progressStatus"
+            />
+
+            <div class="core-upgrade-log-container" ref="logContainer"/>
+        </a-modal>
         <div class="upgrade-container">
             <p>{{ $gettext('You can check Nginx UI upgrade at this page.') }}</p>
             <h3>{{ $gettext('Current Version') }}: v{{ version.version }}</h3>

diff --git a/frontend/src/views/template/Template.vue b/frontend/src/views/template/Template.vue
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -609,6 +609,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz#c5a1a4bfe1b57f0c3e61b29883525c6da3e5c091"
   integrity sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==
 
+"@formkit/auto-animate@^1.0.0-beta.6":
+  version "1.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
+  integrity sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"