Added new App Center, it's old Center

teacat · Oct 18, 2023 · f18876d · f18876d
1 parent c6ea13f
commit f18876d
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 1 deletion.
diff --git a/languages/zh-tw/components/app-center.yml b/languages/zh-tw/components/app-center.yml
@@ -0,0 +1,104 @@
+#=======================================================
+# 標頭
+# Header
+#=======================================================
+
+Title: 中央區塊
+Description: 將表單或區塊置中在應用程式的畫面中央。
+Intro: |
+    這是一個專為應用程式設計的元件。
+
+    如果有登入表單或是上傳區塊想要置中在畫面中央，就可以使用此元件。這不適合用來置中文字，因為這個元件會填滿整個容器的高度與寬度。
+
+#=======================================================
+# 設定
+# Settings
+#=======================================================
+
+Type: Article
+
+#=======================================================
+# 基本樣式
+# Definitions
+#=======================================================
+
+Example:
+    HTML: |
+        <div class="[[ts-app-center]]">
+            <div class="content">
+                <div class="{{ts-segment}} is-padded">
+                    這個區塊會置中出現在畫面正中央。
+                </div>
+            </div>
+        </div>
+
+Definitions:
+    - Title: 組合應用
+      Description:
+      Sections:
+          - Title: 登入表單
+            Anchor: Composition Form
+            Description: 登入頁面經常會有一個置中的表單與輸入欄位，透過此元件可以讓一個容器在頁面上絕對置中。
+            Since: 4.0.0
+            HTML: |
+                <div class="[[ts-app-center]]">
+                    <div class="content">
+                        <div class="{{ts-segment}}" style="width: 270px">
+                            <div class="{{ts-wrap}} is-vertical">
+                                <div class="{{ts-text}} is-label">使用者帳號</div>
+                                <div class="{{ts-input}} is-start-icon">
+                                    <span class="{{ts-icon}} is-user-icon"></span>
+                                    <input type="text" />
+                                </div>
+                                <div class="{{ts-text}} is-label">密碼</div>
+                                <div class="{{ts-input}} is-start-icon">
+                                    <span class="{{ts-icon}} is-lock-icon"></span>
+                                    <input type="password" />
+                                </div>
+                                <button class="{{ts-button}} is-fluid">登入</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+          - Title: 初始建議行為
+            Anchor: Composition Startup
+            Description: 某些應用程式啟動的時候，畫面中央會有建議行為或上次開啟的檔案路徑。
+            Since: 4.0.0
+            HTML: |
+                <div class="{{ts-box}}">
+                    <div class="{{ts-app-layout}} is-vertical">
+                        <div class="cell is-secondary" style="height: 300px">
+                            <div class="[[ts-app-center]]">
+                                <div class="content">
+                                    <div class="{{ts-content}} is-rounded is-padded is-tertiary">
+                                        <div class="{{ts-header}}">選擇初始專案…</div>
+                                        <div class="{{ts-list}} is-unordered {{has-top-spaced}}">
+                                            <a href="#!" class="item">C:\Users\Yami\Spring-2016</a>
+                                            <a href="#!" class="item">C:\Users\Yami\Caris-Events</a>
+                                            <a href="#!" class="item">D:\Casino-Dev</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="cell">
+                            <div class="{{ts-content}}">
+                                <div class="{{ts-app-navbar}} is-fluid">
+                                    <a class="item">
+                                        <div class="{{ts-icon}} is-diagram-project-icon"></div>
+                                        <div class="label">專案</div>
+                                    </a>
+                                    <a class="item">
+                                        <div class="{{ts-icon}} is-bug-icon"></div>
+                                        <div class="label">除錯</div>
+                                    </a>
+                                    <a class="item">
+                                        <div class="{{ts-icon}} is-gear-icon"></div>
+                                        <div class="label">設定</div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
diff --git a/languages/zh-tw/meta.yml b/languages/zh-tw/meta.yml
@@ -192,7 +192,7 @@ UI:
         Responsive: 響應式設計
         About: 關於
         Box: 箱型容器
-        Center: 絕對置中
+        AppCenter: 中央區塊
         Container: 界限容器
         Content: 內容區塊
         Control: 表單控制項
@@ -339,6 +339,7 @@ Components:
           - Tab
     - Name: Application
       Items:
+          - AppCenter
           - AppDrawer
           - AppLayout
           - AppNavbar

diff --git a/src/app-center.css b/src/app-center.css
@@ -0,0 +1,25 @@
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+.ts-app-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    flex-direction: column;
+    color: inherit;
+}
+
+/* ==========================================================================
+   Structure
+   ========================================================================== */
+
+.ts-app-center > .content {
+}
diff --git a/src/tocas.css b/src/tocas.css
@@ -59,6 +59,7 @@
 @import "./app-drawer.css";
 @import "./timeline.css";
 @import "./blankslate.css";
+@import "./app-center.css";
 @import "./utilities.css";
 
 /* ==========================================================================