Merge pull request #206 from blueedgetechno/test

Dark Mode and much more ...

public/dycalendar.css

@@ -104,8 +104,8 @@
 }
 
 .dycalendar-today-date {
-  background-color: #246ff2;
-  color: #fff;
+  background: var(--clrPrm);
+  color: var(--dark-txt);
   border-radius: 24px;
 }
 

public/index.html

@@ -28,7 +28,7 @@
   <script type="text/javascript" src="dycalendar.js"></script>
   <script type="text/javascript" src="console.js"></script>
   <div id="warningmsg">
-    This project is &nbsp; <rediv>not in anyway affiliated with Microsoft</rediv> and
+    This project is &nbsp;<rediv>not in anyway affiliated with Microsoft</rediv>&nbsp;and
     should not be confused with Microsoft’s Operating System or Products.
   </div>
   <button id="probtn" onclick="removeWarning()">Proceed anyway</button>

src/App.js

@@ -21,6 +21,7 @@ import {
   CalnWid
 } from './components/start';
 
+import {loadSettings} from './actions';
 import * as Applications from './containers/applications';
 import * as Drafts from './containers/applications/draft.js';
 
@@ -85,6 +86,7 @@ function App() {
 
   useEffect(()=>{
     if(!window.onstart){
+      loadSettings()
       window.onstart = setTimeout(()=>{
         console.log("prematurely loading ( ﾉ ﾟｰﾟ)ﾉ");
         dispatch({type: "WALLBOOTED"})

src/actions/index.js

@@ -152,3 +152,43 @@ export const installApp = (data)=>{
   store.dispatch({type: "DESKADD", payload: app})
   store.dispatch({type: "WNSTORE", payload: "mnmz"})
 }
+
+export const getTreeValue = (obj, path)=>{
+  if(path==null) return false
+
+  var tdir = {...obj}
+  path = path.split(".")
+  for (var i = 0; i < path.length; i++) {
+    tdir = tdir[path[i]];
+  }
+
+  return tdir
+}
+
+export const changeTheme = ()=>{
+  var thm = store.getState().setting.person.theme,
+  thm = thm=="light"?"dark":"light"
+  var icon = thm=="light"?"sun":"moon"
+
+  document.body.dataset.theme = thm
+  store.dispatch({type: "STNGTHEME", payload: thm})
+  store.dispatch({type: "PANETHEM", payload: icon})
+  store.dispatch({type: "WALLSET", payload: thm=="light"?0:1})
+}
+
+export const loadSettings = ()=>{
+  var sett = localStorage.getItem("setting") || "{}"
+  sett = JSON.parse(sett)
+
+  if(sett.person==null){
+    sett = JSON.parse(JSON.stringify(store.getState().setting))
+    if (window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        sett.person.theme = "dark"
+    }
+  }
+
+  if(sett.person.theme!="light") changeTheme()
+
+  store.dispatch({type: "SETTLOAD", payload: sett})
+}

src/components/menu/index.js

@@ -1,96 +1,101 @@
-import React, {useState, useEffect} from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {Icon} from '../../utils/general';
-import './menu.scss';
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Icon } from "../../utils/general";
+import "./menu.scss";
 
-import * as Actions from '../../actions';
+import * as Actions from "../../actions";
 
-export const ActMenu = ()=>{
-  const menu = useSelector(state=>state.menus);
-  const {abpos, isLeft} = useSelector(state=>{
+export const ActMenu = () => {
+  const menu = useSelector((state) => state.menus);
+  const { abpos, isLeft } = useSelector((state) => {
     var acount = state.menus.menus[state.menus.opts].length;
     var tmpos = {
-      'top': state.menus.top,
-      'left': state.menus.left
-    }, tmpleft = false;
+        top: state.menus.top,
+        left: state.menus.left,
+      },
+      tmpleft = false;
 
     var wnwidth = window.innerWidth,
-        wnheight = window.innerHeight;
+      wnheight = window.innerHeight;
 
     var ewidth = 312,
-        eheight = acount*28;
+      eheight = acount * 28;
 
-    tmpleft = (wnwidth - tmpos.left) > 504;
-    if(wnwidth - tmpos.left < ewidth){
-      tmpos.right = wnwidth - tmpos.left;
-      tmpos.left = null;
+    tmpleft = wnwidth - tmpos.left > 504;
+    if (wnwidth - tmpos.left < ewidth) {
+      tmpos.left = wnwidth - ewidth;
     }
 
-    if(wnheight - tmpos.top < eheight){
+    if (wnheight - tmpos.top < eheight) {
       tmpos.bottom = wnheight - tmpos.top;
       tmpos.top = null;
     }
 
     return {
       abpos: tmpos,
-      isLeft: tmpleft
+      isLeft: tmpleft,
     };
-  })
+  });
 
   const dispatch = useDispatch();
 
-  const clickDispatch = (event)=>{
+  const clickDispatch = (event) => {
     event.stopPropagation();
     var action = {
       type: event.target.dataset.action,
-      payload: event.target.dataset.payload
+      payload: event.target.dataset.payload,
     };
 
-    if(action.type){
-      if(action.type!=action.type.toUpperCase()){
-        Actions[action.type](action.payload,menu);
-      }else{
+    if (action.type) {
+      if (action.type != action.type.toUpperCase()) {
+        Actions[action.type](action.payload, menu);
+      } else {
         dispatch(action);
       }
-      dispatch({type: "MENUHIDE"});
+      dispatch({ type: "MENUHIDE" });
     }
-  }
+  };
 
-  const menuobj = (data)=>{
+  const menuobj = (data) => {
     var mnode = [];
-    data.map(opt=>{
-      if(opt.type=="hr"){
+    data.map((opt) => {
+      if (opt.type == "hr") {
         mnode.push(<div className="menuhr"></div>);
-      }else{
-        mnode.push(<div className="menuopt" data-dsb={opt.dsb}
-          onClick={clickDispatch} data-action={opt.action}
-          data-payload={opt.payload}>
-          {opt.name}
-          {opt.icon?<Icon src={opt.icon} width={14}/>:null}
-          {opt.opts?<Icon fafa="faChevronRight" width={10} color="#999"/>:null}
-          {opt.dot?<Icon className="dotIcon" fafa="faCircle" width={4}
-            height={4} color="#333"/>:null}
-          {opt.check?<Icon className="checkIcon" fafa="faCheck" width={8}
-            height={8} color="#333"/>:null}
-          {opt.opts?(
-            <div className="minimenu">
-              {menuobj(opt.opts)}
+      } else {
+        mnode.push(
+          <div className="menuopt" data-dsb={opt.dsb} onClick={clickDispatch} data-action={opt.action} data-payload={opt.payload}>
+            <div className="spcont">
+              {opt.icon && opt.type=="svg" ? <Icon icon={opt.icon} width={16} /> : null}
+              {opt.icon && opt.type=="fa" ? <Icon fafa={opt.icon} width={16} /> : null}
+              {opt.icon && opt.type==null ? <Icon src={opt.icon} width={16} /> : null}
             </div>
-          ):null}
-        </div>)
+            <div className="nopt">{opt.name}</div>
+            {opt.opts ? <Icon className="micon rightIcon" fafa="faChevronRight" width={10} color="#999" /> : null}
+            {opt.dot ? <Icon className="micon dotIcon" fafa="faCircle" width={4} height={4} /> : null}
+            {opt.check ? <Icon className="micon checkIcon" fafa="faCheck" width={8} height={8} /> : null}
+            {opt.opts ? <div className="minimenu">{menuobj(opt.opts)}</div> : null}
+          </div>
+        );
       }
     });
 
     return mnode;
-  }
+  };
 
   return (
-    <div className="actmenu" id="actmenu" style={{
-      ...abpos,
-      '--prefix':'MENU'}} data-hide={menu.hide} data-left={isLeft}>
+    <div
+      className="actmenu"
+      id="actmenu"
+      style={{
+        ...abpos,
+        "--prefix": "MENU",
+      }}
+      data-hide={menu.hide}
+      data-left={isLeft}
+    >
       {menuobj(menu.menus[menu.opts])}
     </div>
   );
-}
+};
 
 export default ActMenu;

src/components/menu/menu.scss

@@ -1,18 +1,21 @@
 .actmenu {
+  --bg1: rgba(249, 249, 249, 0.9);
+  --bg2: rgba(0, 0, 0, 0.08);
+
   position: absolute;
   width: 310px;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(20px);
+  background: var(--bg1);
+  backdrop-filter: contrast(2) saturate(2) blur(20px);
   z-index: 10000;
-  opacity:1;
-  pointer-events:all;
-  border: solid 1px #ccc9;
+  opacity: 1;
+  pointer-events: all;
+  // border: solid 1px var(--comp-txt);
   border-radius: 8px;
   transition: opacity 0.1s ease;
 
   &[data-hide="true"] {
-    opacity:0;
-    pointer-events:none;
+    opacity: 0;
+    pointer-events: none;
   }
 
   &[data-left="false"] .minimenu {
@@ -21,17 +24,23 @@
   }
 }
 
+body[data-theme="dark"] .actmenu {
+  --bg1: rgba(34, 36, 47, 0.8);
+  --bg2: rgba(255, 255, 255, 0.08);
+}
+
 .minimenu {
   position: absolute;
   display: none;
   top: 0;
   left: 99%;
   min-width: 200px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--bg1);
   z-index: 9999;
   padding: 4px 0;
-  border: solid 1px #ccc9;
+  // border: solid 1px var(--comp-txt);
   animation: fadein 600ms ease-in-out;
+  // backdrop-filter: contrast(1) saturate(2) blur(20px);
   border-radius: 8px;
 }
 
@@ -40,50 +49,42 @@
   box-sizing: border-box;
   position: relative;
   width: calc(100% - 8px);
-  padding: 4px 32px;
+  padding: 4px 6px;
   font-size: 12px;
   cursor: default;
   margin: 6px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   font-weight: 500;
-  color: #333;
+  color: var(--txt-col);
   transition: all 0.1s ease;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--bg2);
 
     .minimenu {
       display: block;
     }
   }
 
-  &[data-dsb="true"] {
-    color: #aaa;
-    font-weight: 400;
+  .spcont{
+    width: 16px;
+    margin-right: 12px;
   }
 
-  .uicon {
+  .micon{
     position: absolute;
-    top: 8px;
-    left: 8px;
   }
 
-  .prtclk {
-    left: unset;
+  .rightIcon {
     right: 8px;
   }
 
   .dotIcon,
   .checkIcon {
-    top: 8px;
     left: 8px;
-    right: unset;
-  }
-
-  .checkIcon {
-    top: 6px;
+    color: var(--med-txt);
   }
 }