Merge pull request #223 from OpenWebGAL/dev

4.4.10
OpenWebGAL · Jan 21, 2024 · be9c270 · be9c270
2 parents 714aa24 + 2444bd9
commit be9c270
Show file tree

Hide file tree

Showing 85 changed files with 4,463 additions and 2,886 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webgal-terre",
-  "version": "4.4.9",
+  "version": "4.4.10",
   "private": true,
   "scripts": {
     "dev": "concurrently \"yarn dev:terre\" \"yarn dev:origine\" \"yarn dev:start-dev-server\"",

diff --git a/packages/origine2/package.json b/packages/origine2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webgal-origine-2",
   "private": true,
-  "version": "4.4.9",
+  "version": "4.4.10",
   "license": "MPL-2.0",
   "scripts": {
     "dev": "vite --host",

diff --git a/packages/origine2/src/App.css b/packages/origine2/src/App.css
@@ -1,8 +1,8 @@
 .App {
-  text-align: center;
-  background-color: #fafafa;
+  background-color: var(--bg-root);
   width: 100%;
   height: 100%;
+  text-align: center;
 }
 
 .App-logo {
@@ -16,38 +16,11 @@
   }
 }
 
-.App-header {
-  background-color: var(--app-header-background);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: var(--app-header);
-}
-
-.App-link {
-  color: var(--app-link);
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}
-
-body{
-  overflow: hidden;
-}
-
-*{
-  box-sizing: border-box;
-}
+}
diff --git a/packages/origine2/src/components/TagTitleWrapper/tagTitleWrapper.module.scss b/packages/origine2/src/components/TagTitleWrapper/tagTitleWrapper.module.scss
@@ -6,7 +6,7 @@
 
 .title{
   font-size: 90%;
-  color: var(--terre-primary);
+  color: var(--primary);
   font-weight: bold;
 }
 

diff --git a/packages/origine2/src/components/message/message.module.scss b/packages/origine2/src/components/message/message.module.scss
@@ -12,13 +12,13 @@
 
 .singleMessage {
   //border: 1px solid;
-  background-color: var(--singleMessage-background);
+  background: var(--bg-card);
   font-size: 115%;
-  color: var(--singleMessage);
+  color: var(--primary);
   padding: 0.5em 0.5em 0.5em 0.5em;
   margin: 0.5em 0.5em 0.5em 0.5em;
   min-width: 350px;
-  border-radius: 4px;
-  box-shadow: 0 0 10px var(--singleMessage-box-shadow);
-  border: 1px solid var(--singleMessage-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  border: var(--border-md)
 }
diff --git a/packages/origine2/src/config/info.ts b/packages/origine2/src/config/info.ts
@@ -4,6 +4,6 @@ export interface Info {
 }
 
 export const __INFO: Info = {
-  version: '4.4.9',
+  version: '4.4.10',
   buildTime: '2023-12-30T03:22:49.651Z', // 编译时会通过 version-sync.js 自动更新
 };
diff --git a/packages/origine2/src/config/themes/theme.css b/packages/origine2/src/config/themes/theme.css
@@ -25,91 +25,41 @@
     --blue-sky-50pct: rgba(47, 136, 255, 0.5);
     --blue-navy: rgba(11, 52, 110, 1);
     --white: rgba(255, 255, 255, 1);
-    --terre-primary: rgba(0, 92, 175, 1);
-    --terre-primary-5pct: rgba(0, 92, 175, 0.05);
-    --terre-primary-10pct: rgba(0, 92, 175, 0.1);
+
+    --primary: rgba(0, 92, 175, 1);
+    --primary-5pct: rgba(0, 92, 175, 0.05);
+    --primary-10pct: rgba(0, 92, 175, 0.1);
+    --primary-90pct: rgba(0, 92, 175, 0.9);
+    --text: rgb(51, 51, 51);
+    --text-sub: rgb(102, 102, 102);
+    --text-weak: rgb(123, 123, 123);
+    --bg-base: rgb(255, 255, 255);
+    --bg-root: rgb(250, 250, 250);
+    --bg-card: rgb(255, 255, 255);
+    --bg-card-hover: var(--black-5pct);
+    --bg-button: rgb(255, 255, 255);
+    --bg-button-hover: var(--black-5pct);
+    --bg-input: rgb(248, 248, 248);
+    --bg-divider: var(--black-10pct);
+    --bg-scrollbar: var(--gray-242);
+    --bg-scrollbar-thumb: var(--gray-204);
+    --bg-scrollbar-thumb-hover: var(--gray-153);
+    --border-sm: 0.5px solid var(--black-10pct);
     --border-md: 1px solid var(--black-10pct);
-    --box-shadow-md: 0 1px 2px var(--black-10pct);
-    --addSentence-sentenceTypeButton-background: var(--black-5pct);
-    --addSentence-sentenceTypeButton-hover-background: var(--black-0pct);
-    --app-header-background: var(--gray-dark);
-    --app-header: var(--white);
-    --app-link: var(--blue-light);
-    --assets-controlCommonButton-border: var(--black-15pct);
-    --assets-controlCommonButton-hover-border: var(--terre-primary-10pct);
-    --assets-commonFileButton-hover-background: var(--black-5pct);
-    --assets-controlDirnameDisplay-border: var(--black-15pct);
-    --assets-deleteButton-hover-background: var(--black-10pct);
-    --assets-extNameShow-background: var(--blue-medium-10pct);
-    --assets-extNameShow: var(--blue-medium);
-    --assets-fileSelectButton-background: var(--blue-medium);
-    --assets-fileSelectButton: var(--white);
-    --assets-fileSelectButton-hover-background: var(--blue-deep);
-    --assets-fileSelectInput-border: var(--blue-medium);
-    --assets-fileSelectInput-focus-border: var(--blue-deep);
-    --assets-fileSelectInput-focus-box-shadow: var(--blue-deep-20pct);
-    --chooseFile-button-border-bottom: var(--black-10pct);
-    --commonTips-tips-background: var(--terre-primary-10pct);
-    --common-tag_title_button: var(--black-10pct);
-    --common-tag_title_button-first-child-border-left: var(--black-0pct);
-    --common-tag_title_button-hover-background: var(--black-10pct);
-    --common-tag_title_button-hover-border-left: var(--black-0pct);
-    --commonOption-item-hover-background: var(--black-5pct);
-    --commonOption-title: var(--black-50pct);
-    --createGameButton: var(--white);
-    --dashboard-gameElement-main-border: var(--black-15pct);
-    --dashboard-gameElement-main: var(--blue-navy);
-    --dashboard-gameElement-main-hover-background: var(--gray-245);
-    --dashboard-topBar-border-bottom: var(--black-10pct);
-    --editArea-none-text: var(--black-35pct);
-    --editorSidebar-control-button-active-background: var(--black-10pct);
-    --editorSidebar-divider-background: var(--black-10pct);
-    --editorSidebar-livePreviewNotice-background: var(--terre-primary-5pct);
-    --gameElement-box-shadow: var(--black-10pct);
-    --gamePreview-editGameButton: var(--white);
-    --gamePreview-noneChecked: var(--black-75pct);
-    --graphicalEditor-sentenceEditorWrapper-background: var(--white);
-    --graphicalEditor-sentenceEditorWrapper-border-bottom: var(--black-10pct);
-    --graphicalEditor-sentenceEditorWrapper: var(--black-50pct);
-    --graphicalEditor-lineNumber: var(--black-50pct);
-    --graphicalEditor-optionButton-hover-background: var(--black-5pct);
-    --iconPark-closeIcon-fill: var(--black);
-    --iconPark-icon-chooseFile-fill: var(--blue-sky-50pct);
-    --iconPark-icon-chooseFile-stroke-first: var(--gray-51);
-    --iconPark-icon-chooseFile-stroke-second: var(--white);
-    --iconPark-icon-chooseFile-stroke-third: var(--white);
-    --iconPark-icon-fill: var(--gray-51);
-    --sentenceEditor-sayArea: var(--black);
-    --sentenceEditor-sayArea-background: var(--black-5pct);
-    --sentenceEditor-sayArea-border: var(--black-7pct);
-    --sentenceEditor-sayInput-background: var(--black-5pct);
-    --sentenceEditor-sayInput-border: var(--black-7pct);
-    --sidebar-main-border-right: var(--black-10pct);
-    --sidebarComponents-fileElement-hover-background: var(--black-5pct);
-    --sidebarComponents-fileElement-interactable-icon-hover-background: var(--black-10pct);
-    --sideBarIcon-pressDown: var(--blue-navy);
-    --sideBarIcon-pressUp: var(--gray-102);
-    --sidebarTags-editButton-background: var(--terre-primary-10pct);
-    --sidebarTags-imageChooseItem-hover-background: var(--black-10pct);
-    --sidebarTags-open-assets-background: var(--terre-primary-10pct);
-    --sidebarTags-open-assets: var(--blue-navy);
-    --singleMessage-background: var(--blue-ultra-light);
-    --singleMessage: var(--blue-navy);
-    --singleMessage-border: var(--black-10pct);
-    --singleMessage-box-shadow: var(--black-10pct);
-    --tagManager-tag-background: var(--gray-248);
-    --tagManager-tag-border-top: var(--black-0pct);
-    --tagManager-tagsContainer-background: var(--gray-248);
-    --tagManager-tagsContainer-webkit-scrollbar-background: var(--gray-242);
-    --tagManager-tagsContainer-webkit-scrollbar-thumb-background: var(--gray-204);
-    --tagManager-tagsContainer-webkit-scrollbar-thumb-hover-background: var(--gray-153);
-    --tagManager-tagsContainer-Firefox-scrollbar-first: var(--gray-204);
-    --tagManager-tagsContainer-Firefox-scrollbar-second: var(--gray-242);
-    --tagManager-tag-active-background: var(--white);
-    --tagManager-tag-active-border-top: var(--blue-navy);
-    --tagManager-tag-hover-background: var(--black-10pct);
-    --tagManager-closeIcon-hover-background: var(--black-10pct);
-    --topbar-border-bottom: var(--black-10pct);
-    --topbar-editingGame-background: var(--terre-primary-10pct);
-    --topbar-home-btn-hover-background: var(--black-7pct);
+    --border-lg: 2px solid var(--black-10pct);
+    --border-primary-sm: 0.5px solid var(--primary);
+    --border-primary-md: 1px solid var(--primary);
+    --border-primary-lg: 2px solid var(--primary);
+    --border-trans-sm: 0.5px solid transparent;
+    --border-trans-md: 1px solid transparent;
+    --border-trans-lg: 2px solid transparent;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 8px;
+    --shadow-sm: 0 0.5px 1px var(--black-10pct);
+    --shadow-md: 0 1px 2px var(--black-10pct);
+    --shadow-lg: 0 2px 4px var(--black-10pct);
+    --shadow-primary-sm: 0 0.5px 1px var(--primary-10pct);
+    --shadow-primary-md: 0 1px 2px var(--primary-10pct);
+    --shadow-primary-lg: 0 2px 4px var(--primary-10pct);
 }
diff --git a/packages/origine2/src/index.css b/packages/origine2/src/index.css
@@ -7,7 +7,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-*{
+* {
   box-sizing: border-box;
 }
 
@@ -16,8 +16,8 @@ code {
     monospace;
 }
 
-#root{
+#root {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
-}
+}
diff --git a/packages/origine2/src/pages/dashboard/DashBoard.tsx b/packages/origine2/src/pages/dashboard/DashBoard.tsx
@@ -113,25 +113,21 @@ export default function DashBoard() {
           </Toolbar>
         </div>
         <div className={styles.dashboard_main}>
-          <Card style={{width: '100%', height: '100%'}}>
-            <div style={{width: '100%', height: '100%', display: 'flex', overflow: 'auto'}}>
-              <Message ref={messageRef} />
-              {
-                currentGame.value &&
+          <Message ref={messageRef} />
+          {
+            currentGame.value &&
                 <GamePreview
                   currentGame={currentGame.value}
                   setCurrentGame={setCurrentGame}
                   gameInfo={gameInfoList.value.find(e => e.dir === currentGame.value)!}
                 />
-              }
-              <Sidebar
-                refreash={refreash}
-                createGame={createGame}
-                setCurrentGame={setCurrentGame}
-                currentSetGame={currentGame.value}
-                gameList={gameInfoList.value} />
-            </div>
-          </Card>
+          }
+          <Sidebar
+            refreash={refreash}
+            createGame={createGame}
+            setCurrentGame={setCurrentGame}
+            currentSetGame={currentGame.value}
+            gameList={gameInfoList.value} />
         </div>
       </div>}
   </>;

diff --git a/packages/origine2/src/pages/dashboard/GamePreview.tsx b/packages/origine2/src/pages/dashboard/GamePreview.tsx
@@ -1,7 +1,4 @@
 import styles from "./gamepreview.module.scss";
-import { useDispatch } from "react-redux";
-import { setDashboardShow, setEditingGame } from "../../store/statusReducer";
-import useTrans from "@/hooks/useTrans";
 import { GameInfo } from './DashBoard';
 import { Button } from "@fluentui/react-components";
 import { Dismiss48Filled, Dismiss48Regular, bundleIcon } from "@fluentui/react-icons";
@@ -13,17 +10,8 @@ interface IGamePreviewProps {
 }
 
 export default function GamePreview(props: IGamePreviewProps) {
-  const t = useTrans('dashBoard.preview.');
-  const dispatch = useDispatch();
-
   const DismissIcon = bundleIcon(Dismiss48Filled, Dismiss48Regular);
 
-  if (props.currentGame === null) {
-    return <div className={styles.noneChecked}>
-      {t('noneChecked')}
-    </div>;
-  }
-
   return <div className={styles.preview_main}>
     <div className={styles.preview_title}>
       <span className={styles.preview_title_text}>{props.gameInfo.title}</span>

diff --git a/packages/origine2/src/pages/dashboard/dashboard.module.scss b/packages/origine2/src/pages/dashboard/dashboard.module.scss
@@ -3,6 +3,7 @@
   width: 100%;
   display: flex;
   flex-flow: column;
+  padding: 0 4px 4px 4px;
 }
 
 .dashboard_main {
@@ -11,13 +12,17 @@
   display: flex;
   flex-grow: 1;
   overflow: hidden;
+  background: var(--bg-card);
+  border: var(--border-md);
+  border-radius: var(--radius-md);
+  padding: 4px;
 }
 
 .topBar {
   padding: 0 16px;
   font-family: Georgia, serif;
   font-size: 150%;
-  color: var(--terre-primary);
+  color: var(--primary);
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/packages/origine2/src/pages/dashboard/gameElement.module.scss b/packages/origine2/src/pages/dashboard/gameElement.module.scss
@@ -1,33 +1,30 @@
 .gameElement_main {
   font-size: 105%;
-  // padding: 0.75em 0.5em 0.75em 0.75em;
-  // margin: 0.65em 0.5em 0 0.5em;
-  border-radius: 4px;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  color: var(--dashboard-gameElement-main);
   text-align: left;
   border: var(--border-md);
   transition: all 0.33s;
   display: flex;
   flex-direction: column;
-  // height: 8rem;
-  // width: 20rem;
 }
 
 .gameElement_main:hover {
-  background-color: var(--dashboard-gameElement-main-hover-background);
-  box-shadow: var(--gameElement-box-shadow) 0 0 2px 1px;
+  background: var(--bg-card-hover);
+  box-shadow: var(--shadow-md);
+}
+
+.gameElement_main:hover:has(.gameElement_action:hover) {
+  background: none;
 }
 
 .gameElement_checked {
-  box-shadow: var(--gameElement-box-shadow) 0 0 2px 1px;
-  outline: 3px solid var(--terre-primary);
+  outline: 3px solid var(--primary);
 }
 
 .gameElement_cover {
   height: auto;
-  // width: auto;
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
   object-fit: cover;
   aspect-ratio: 16 / 9;
 }