win11 action panel/menu + new wifi ,brightness icon

Update sidepane.scss Update index.js Update sidepane.scss Add files via upload Update sidepane.scss Update index.js Update index.js Update sidepane.js Update sidepane.scss Update index.js Update sidepane.scss Create brightness.png Update index.js Update package-lock.json
blueedgetechno · Sep 30, 2021 · e5459e5 · e5459e5
1 parent 70a7dc7
commit e5459e5
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 19,685 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/img/icon/ui/brightness.png b/public/img/icon/ui/brightness.png
diff --git a/public/img/icon/ui/wifi.png b/public/img/icon/ui/wifi.png
diff --git a/src/components/start/index.js b/src/components/start/index.js
@@ -397,7 +397,7 @@ export const SidePane = () => {
   }
 
   useEffect(()=>{
-    if(paneApps.quicks[2].state){
+    if(paneApps.quicks[6].state){
       document.body.dataset.sepia = true;
     }else{
       document.body.dataset.sepia = false;
@@ -406,16 +406,12 @@ export const SidePane = () => {
 
   return (
     <div className="sidePane dpShad" data-hide={paneApps.hide} style={{'--prefix':'PANE'}}>
-      <div className="notifArea">
-        <div className="managentf btnText">Manage notifications</div>
-        <div className="nonewnotif">No new notifications</div>
-      </div>
       <div className="quickSettings">
-        <div className="btnText">Collapse</div>
         <div className="quickCont">
           {paneApps.quicks.map((qk, idx)=>{
             return (
-              <div
+              <div className="actionCenter">
+                <div
                 className="qkbtn handcr prtclk"
                 onClick={clickDispatch}
                 data-action="PANEQBTN"
@@ -429,11 +425,20 @@ export const SidePane = () => {
                   width={14}
                   invert={qk.state?true:null}
                 />
+                </div>
                 <div className="qktext">{qk.name}</div>
               </div>
             )
           })}
         </div>
+        <div className="sliderCont">
+          <Icon className="mx-2" src='brightness' ui width={20}/>
+          <input className="sliders" type="range"/>
+        </div>
+        <div className="sliderCont">
+          <Icon className="mx-2" src='audio' ui width={20}/>
+          <input className="sliders" type="range"/>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/start/sidepane.scss b/src/components/start/sidepane.scss
@@ -1,10 +1,9 @@
 .sidePane {
-  --nfheight: 200px;
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 320px;
-  height: 100%;
+  bottom: 1rem;
+  right: 1rem;
+  width: 360px;
+  border-radius: 0.5rem;
   background: rgba(255, 255, 255, 0.88);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
@@ -14,19 +13,15 @@
   transform: translateX(0);
 
   &[data-hide="true"] {
-    transform: translateX(330px);
+    transform: translateX(376px);
   }
 }
 
-.notifArea {
-  position: relative;
-  width: 100%;
-  height: calc(100% - var(--nfheight));
-}
-
 .quickSettings {
-  height: var(--nfheight);
-  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.25rem;
 }
 
 .btnText {
@@ -36,23 +31,25 @@
 
 .quickCont {
   width: 100%;
-  padding: 14px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
-.qkbtn {
-  width: 60px;
-  height: 36px;
+.actionCenter {
   display: flex;
-  margin-bottom: 4px;
-  border-radius: 4px;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 8px 4px 4px;
-  justify-content: space-between;
-  border-bottom-color: rgba(0,0,0, 0.2);
+  align-items: center;
+}
+
+.qkbtn {
+  width: 6rem;
+  height: 3rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
   background: rgba(255, 255, 255, 0.9);
   border: solid 0.1px rgba(17, 17, 17, 0.1);
   transition: all 0.1s ease;
@@ -68,7 +65,24 @@
 
 .qktext {
   width: max-content;
-  font-size: 0.6em;
+  font-size: 0.75em;
+  margin: 0.33rem 0 1rem 0;
+}
+
+.sliderCont {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.sliders {
+  width: 100%;
+  height: 4px;
+}
+
+.sliders::-webkit-slider-thumb {
+  box-shadow: 0 0 0 4px rgb(255, 255, 255) inset;
+  border-radius: 8px;
 }
 
 .managentf {
@@ -96,12 +110,12 @@
   transform: translateX(0);
   -webkit-backdrop-filter: blur(40px);
   backdrop-filter: blur(40px);
-  transition: all 0.3s cubic-bezier(.77,0,.18,1);
+  transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
   z-index: 9999;
 
   &[data-hide="true"] {
     transform: translateX(-110%);
-    transition: all 0.6s cubic-bezier(.77,0,.18,1);
+    transition: all 0.6s cubic-bezier(0.77, 0, 0.18, 1);
   }
 }
 
@@ -147,7 +161,7 @@
       padding: 12px 14px;
       border-radius: 6px;
       box-sizing: border-box;
-      background: rgb(255,255,255);
+      background: rgb(255, 255, 255);
       background: -webkit-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
       background: -o-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
       background: linear-gradient(to bottom right, #fefefe 0%, #fff3be 80%);
@@ -322,7 +336,7 @@
             background: #eb3535;
             color: #fefefe;
 
-            &[data-pos='true'] {
+            &[data-pos="true"] {
               background: #09d031;
             }
           }
@@ -422,10 +436,10 @@
   position: relative;
   border-radius: 4px;
   padding: 12px;
-  background: rgb(209,209,209);
-  background: -webkit-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255,255,255,1) 100%);
-  background: -o-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255,255,255,1) 100%);
-  background: linear-gradient(to bottom right, rgba(230, 230, 230, 1) 0%, rgba(255,255,255,1) 100%);
+  background: rgb(209, 209, 209);
+  background: -webkit-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
+  background: -o-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
+  background: linear-gradient(to bottom right, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
 
   &::after {
     content: "source: saurav.tech/NewsAPI";
@@ -447,8 +461,8 @@
     width: 100%;
     display: grid;
     padding-bottom: 12px;
-    grid-template-columns: repeat(2,minmax(0,1fr));
-    grid-template-rows: repeat(2,minmax(0,1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
 
     .tpNews {
       padding: 16px 12px 0 0;
@@ -478,7 +492,7 @@
 .allNewsCont {
   margin-top: 12px;
   display: grid;
-  grid-template-columns: repeat(2,minmax(0,1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-column-gap: 10px;
   grid-row-gap: 10px;
 }
@@ -502,7 +516,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(255,255,255);
+    background: rgb(255, 255, 255);
     background: -webkit-linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
     background: -o-linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
     background: linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
@@ -549,7 +563,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgb(255,255,255);
+      background: rgb(255, 255, 255);
       background: -webkit-linear-gradient(right, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);
       background: -o-linear-gradient(right, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);
       background: linear-gradient(to left, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);

diff --git a/src/components/taskbar/index.js b/src/components/taskbar/index.js
@@ -150,7 +150,7 @@ const Taskbar = ()=>{
         </div>
         <div className="taskright">
           <Icon className="taskIcon" fafa='faChevronUp' width={10}/>
-          <Icon className="taskIcon" src="wifi" ui width={14}/>
+          <Icon className="taskIcon" src="wifi" ui width={16}/>
 
           <Battery level={batterylevel} charging={batterylevel==='*'?true:false}/>
 

diff --git a/src/containers/background/index.js b/src/containers/background/index.js
@@ -151,7 +151,7 @@ export const LockScreen = (props) => {
         </div>
       </div>
       <div className="bottomInfo flex">
-        <Icon className="mx-2" src="wifi" ui width={14} invert/>
+        <Icon className="mx-2" src="wifi" ui width={16} invert/>
         <Icon className="mx-2" src="battery" ui width={16} invert/>
       </div>
     </div>

diff --git a/src/reducers/sidepane.js b/src/reducers/sidepane.js
@@ -2,97 +2,79 @@ const defState = {
   quicks: [
     {
       ui: true,
-      src: 'location',
-      name: 'Location',
-      state: false
+      src: "wifi",
+      name: "WiFi",
+      state: true,
     },
     {
       ui: true,
-      src: 'saver',
-      name: 'Battery Saver',
-      state: true
+      src: "bluetooth",
+      name: "Bluetooth",
+      state: false,
     },
     {
       ui: true,
-      src: 'nightlight',
-      name: 'Night Light',
-      state: false
+      src: "airplane",
+      name: "Airplane Mode",
+      state: false,
     },
     {
       ui: true,
-      src: 'bluetooth',
-      name: 'Bluetooth',
-      state: false
+      src: "saver",
+      name: "Battery Saver",
+      state: false,
     },
     {
       ui: true,
-      src: 'airplane',
-      name: 'Offline mode',
-      state: false
+      src: "moon",
+      name: "Focus assist",
+      state: false,
     },
     {
       ui: true,
-      src: 'connect',
-      name: 'Connect',
-      state: false
+      src: "location",
+      name: "Location",
+      state: false,
     },
     {
       ui: true,
-      src: 'project',
-      name: 'Project',
-      state: false
+      src: "nightlight",
+      name: "Night Light",
+      state: false,
     },
     {
       ui: true,
-      src: 'network',
-      name: 'Network',
-      state: false
+      src: "connect",
+      name: "Connect",
+      state: false,
     },
     {
       ui: true,
-      src: 'nearshare',
-      name: 'Sharing',
-      state: false
+      src: "project",
+      name: "Project",
+      state: false,
     },
-    {
-      ui: true,
-      src: 'tablet',
-      name: 'Tablet mode',
-      state: false
-    },
-    {
-      ui: true,
-      src: 'shield',
-      name: 'Security',
-      state: false
-    },
-    {
-      ui: true,
-      src: 'moon',
-      name: 'Focus assist',
-      state: false
-    }
   ],
   hide: true,
-  calhide: true
+  calhide: true,
 };
 
 const paneReducer = (state = defState, action) => {
-  if(action.type=="PANEQBTN"){
-    var tmpState = {...state};
+  if (action.type == "PANEQBTN") {
+    var tmpState = { ...state };
     tmpState.quicks[action.payload].state = !tmpState.quicks[action.payload].state;
     return tmpState;
-  }else if (action.type=="PANETOGG") {
-    return {...state, hide: !state.hide};
-  }else if (action.type=="PANEHIDE") {
-    return {...state, hide: true};
-  }else if (action.type=="CALNTOGG") {
-    return {...state, calhide: !state.calhide};
-  }else if (action.type=="CALNHIDE") {
-    return {...state, calhide: true};
-  }else{
+  } else if (action.type == "PANETOGG") {
+    return { ...state, hide: !state.hide };
+  } else if (action.type == "PANEHIDE") {
+    return { ...state, hide: true };
+  } else if (action.type == "CALNTOGG") {
+    return { ...state, calhide: !state.calhide };
+  } else if (action.type == "CALNHIDE") {
+    return { ...state, calhide: true };
+  } else {
     return state;
   }
-}
+};
 
 export default paneReducer;