Merge pull request #2 from FeiBam/master

add dark mode

components/MyIcon.tsx

@@ -0,0 +1,14 @@
+import { Component } from "preact";
+import Icon from "preact-material-components/Icon";
+
+type Props = {
+    show: boolean;
+    icon: string;
+};
+
+export default class MyIcon extends Component<Props> {
+    render() {
+        if (!this.props.show) return;
+        return <Icon>{this.props.icon}</Icon>;
+    }
+}

islands/Container.tsx

@@ -11,6 +11,7 @@ import t, { i18n_map, I18NMap } from "../server/i18n.ts";
 import TaskManager from "./TaskManager.tsx";
 import { initState, set_state } from "../server/state.ts";
 import NewTask from "../components/NewTask.tsx";
+import MyIcon from "../components/MyIcon.tsx";
 
 export type ContainerProps = {
     i18n: I18NMap;
@@ -23,6 +24,7 @@ export default class Container extends Component<ContainerProps> {
         i18n_map.value = this.props.i18n;
         const [display, set_display] = useState(false);
         const [state, set_state1] = useState("#/");
+        const [darkmode, set_darkmode] = useState(false);
         useEffect(() => {
             initState(set_state1);
         }, []);

islands/TaskManager.tsx

@@ -166,33 +166,29 @@ export default class TaskManager extends Component<TaskManagerProps> {
         if (!this.props.show) return null;
         return (
             <div class="task_manager">
-                <div id="task_head">
+                <div class="task_amounts">
-                    <div></div>
+                    <div class="mdc-theme--secondary-light">
-                    <div class="add">
+                        <p>count</p>
-                        <Fab mini={true}>
+                        <p>Total Task</p>
-                            <Icon
+                    </div>
-                                onClick={() => {
+                    <div class="btn-success">
-                                    set_state(`${this.props.base}/new`);
+                        <p>count</p>
-                                }}
+                        <p>Running</p>
-                            >
+                    </div>
-                                add
+                    <div class="btn-warning">
-                            </Icon>
+                        <p>count</p>
-                        </Fab>
+                        <p>Waiting</p>
+                    </div>
+                    <div class="btn-danger">
+                        <p>count</p>
+                        <p>Fail</p>
+                    </div>
+                    <div class="btn-primary">
+                        <p>count</p>
+                        <p>Finished</p>
                     </div>
                 </div>
-                <div
+                <div class="task_details">
-                    id="task-list"
-                    // @ts-ignore checked
-                    ref={ul}
-                >
-                    {task_list.value.map((k) => {
-                        const t = tasks.value.get(k);
-                        if (t) {
-                            return <Task task={t} />;
-                        } else {
-                            return <div data-id={k}></div>;
-                        }
-                    })}
                 </div>
             </div>
         );

static/common.css

@@ -1,3 +1,13 @@
+body {
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
+:root{
+    --mdc-theme-primary:#007bff;
+    --mdc-theme-secondary:#007bff;
+}
+
 .nav-menu {
     z-index: 100;
     position: fixed;
@@ -19,14 +29,12 @@
     top: 64px;
 }
 
-
 .settings {
     margin: 0 18%;
     padding-top: 40px;
     transition: 0.6s;
 }
 
-
 .settings div.text {
     width: 100%;
 }
@@ -79,7 +87,7 @@
     align-items: center;
 }
 
-.settings .text-box .text .mdc-text-field::after {
+.settings .text-box .text .mdc-text-field::after{
     width: 0;
 }
 
@@ -97,7 +105,9 @@
     left: -10px;
 }
 
-@media (max-width:767px) {}
+@media (max-width:767px) { 
+ 
+}
 
 @media (max-width:1280px) {
     .settings {
@@ -105,14 +115,89 @@
     }
 }
 
-.task_manager #task_head {
+.task_manager {
+    padding: 16px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
 }
 
-.new_task .close {
+.task_amounts {
-    position: absolute;
+    display: flex;
-    right: 10px;
+    height: 64px;
-    top: 10px;
 }
+
+.task_amounts > div {
+    flex: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: aliceblue;
+}
+
+.task_amounts > div:first-child {
+    border-radius: 8px 0 0 8px;
+    background-color: black;
+}
+
+.task_amounts > div:last-child{
+    border-radius: 0 8px 8px 0
+}
+
+.btn-success{
+    background-color:#28a745
+}
+
+.btn-warning{
+    background-color:#ffc107
+}
+
+.btn-danger{
+    background-color:#dc3545
+}
+
+.btn-primary{
+    background-color:#007bff
+}
+
+.dark-scheme { 
+    background: #343a40; 
+    color:  white; 
+}
+
+.dark-scheme .mdc-top-app-bar {
+    background-color: black;
+}
+
+.dark-scheme .mdc-text-field__input{
+    color:white!important;
+}
+
+.dark-scheme .mdc-select__native-control {
+    color:white!important;
+}
+
+.dark-scheme .mdc-text-field__input {
+    color:white!important;
+}
+
+.dark-scheme .mdc-floating-label{
+    color:white!important;
+}
+
+.dark-scheme .mdc-select-item{
+    background-color: black!important;
+}
+
+.dark-scheme .mdc-list{
+    background-color:#272727;
+}
+
+.dark-scheme .mdc-list-item{
+    color: white;
+}
+
+.dark-scheme .mdc-notched-outline__idle{
+    color: white!important;
+}