Merge branch 'feature/new-bars'

bottom-widgets.md

@@ -0,0 +1,23 @@
+# Nero Bottom - Widgets
+
+![Nero - Bottom](images/nero-bottom.jpg)
+
+## Chunkwm / macOS spaces
+
+Provides current macOS _space_ ID and name, and [chunkwm](https://github.com/koekeishiya/chunkwm) layout mode.
+
+Examples: `[04-cod]: bsp` / `[01-term]: mon` / `[01-ukw]: flo`
+
+Amount of spaces, and their name can be customized in `chunkwm.sh`.
+
+## MPC Status
+
+Provides status (playing/paused/stopped) of [mpc](https://musicpd.org/clients/mpc/) plus artist, and song name.
+
+Examples: `○ Dark Tranquillity - Encircled` / `‣ Dark Tranquillity - Encircled` / `○ mpc stopped...`
+
+The artist/song label is truncated via `css` after `220px`.
+
+## Day Progress (%)
+
+Provides the percentage of the day elapsed. Wake up and bed time can be both customized in `day-progress.jsx`.

nero.widgets/chunkwm.jsx → nero-bottom/chunkwm.jsx

@@ -1,18 +1,18 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
 // requires https://github.com/koekeishiya/chunkwm
-export const command = "sh ./nero.widgets/chunkwm.sh";
+export const command = "sh ./nero-bottom/chunkwm.sh";
 export const refreshFrequency = 1000;
-
 export const initialState = "[00-...] ...";
-export const updateState = event => event.output;
+
+export const updateState = event => event.output || initialState;
 export const render = output => <div>{output}</div>;
 
 export const className = {
-  top: "0px",
+  bottom: "0px",
   left: "0px",
   boxSizing: "border-box",
   borderRight: "1px solid #1c1c1c",
-  padding: "7px 12px 6px 12px",
+  padding: "8px 12px 5px 12px",
   fontFamily: "Roboto Mono",
   fontWeight: "400",
   fontSize: "10px",

nero-bottom/day-progress.jsx

@@ -0,0 +1,62 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+export const command = "date +'%d %b %Y - %H:%M'";
+export const refreshFrequency = 30000;
+export const initialState = "...";
+
+export const updateState = event => {
+  // 0:0 to 23:59
+  const wakeup = {h: 8, m: 0};
+  const bedtime = {h: 1, m: 0};
+
+  // amount of minutes awake on custom timeframe
+  const awakeMins = Math.abs(wakeup.h - bedtime.h) * 60;
+  const awakeAdditionalMins = Math.abs(wakeup.m - bedtime.m);
+  const awaketimeMins = 1440 - (awakeMins + awakeAdditionalMins);
+
+  // minutes remaining till bedtime
+  const now = new Date();
+  const deadline = new Date();
+  deadline.setHours(bedtime.h, bedtime.m, 0, 0);
+  deadline < now && deadline.setDate(deadline.getDate() + 1);
+  const minsTillBedtime = Math.floor((deadline - now) / 1000 / 60);
+
+  // percentage of time elapsed from wakeup time
+  const perc = Math.round(100 - minsTillBedtime * 100 / awaketimeMins);
+  return perc >= 0 && perc <= 100 ? perc : 100;
+};
+
+export const render = output => (
+  <section>
+    {`${output}%`}
+    <div className="bar">
+      <div className="progress" style={{width: output + "%"}}></div>
+    </div>
+  </section>
+);
+
+export const className = {
+  bottom: "0px",
+  right: "0px",
+  boxSizing: "border-box",
+  borderLeft: "1px solid #1c1c1c",
+  padding: "8px 12px 5px 12px",
+  fontFamily: "Roboto Mono",
+  fontWeight: "400",
+  fontSize: "10px",
+  lineHeight: "10px",
+  color: "#cccccc",
+  "& .bar": {
+    display: "inline-block",
+    boxSizing: "border-box",
+    marginLeft: "8px",
+    width: "106px",
+    height: "7px",
+    border: "1px solid #333333",
+    padding: "2px",
+    "& .progress": {
+      width: "100%",
+      height: "1px",
+      backgroundColor: "white",
+    }
+  }
+};

nero-bottom/mpc.jsx

@@ -0,0 +1,48 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+// https://github.com/MusicPlayerDaemon/mpc (via ncmpcpp)
+export const command = "sh ./nero-bottom/mpc.sh";
+export const refreshFrequency = 4000;
+export const initialState = "○ mpc stopped...";
+
+export const updateState = event => {
+  let status = initialState;
+
+  if (event.output) {
+    const array = event.output.split(/((?!^)\{.*?\})/);
+    const playingState = array[0].replace(/[{}]/g, "");
+    const song = array[1].replace(/[{}]/g, "");
+    if (playingState === "paused") status = `○ ${song}`;
+    else if (playingState === "playing") status = `‣ ${song}`;
+  }
+
+  return status;
+}
+
+export const render = output => (
+  <section>
+    <div>{output}</div>
+  </section>
+);
+
+export const className = {
+  bottom: "0px",
+  left: "102px",
+  boxSizing: "border-box",
+  width: "auto",
+  maxWidth: "220px",
+  borderRight: "1px solid #1c1c1c",
+  padding: "8px 12px 5px 12px",
+  fontFamily: "Roboto Mono",
+  fontWeight: "400",
+  fontSize: "10px",
+  lineHeight: "10px",
+  color: "#cccccc",
+  "& div": {
+    width: "100%",
+    overflow: "hidden",
+    display: "inline-block",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    textAlign: "left"
+  }
+};

nero-bottom/mpc.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+# this script is part of Nero -> https://github.com/lucaorio/nero
+# https://github.com/MusicPlayerDaemon/mpc (via ncmpcpp)
+song=$(/usr/local/bin/mpc status | head -1 | tail -1)
+status=$(/usr/local/bin/mpc status | head -2 | tail -1 | awk -F'[][]' '{print $2}')
+echo "{$status}{$song}"

nero-bottom/nero-bottom.jsx

@@ -0,0 +1,15 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+export const refreshFrequency = false;
+export const initialState = "...";
+export const render = output => <div />;
+
+export const className = {
+  zIndex: "-1",
+  bottom: "0px",
+  left: "0px",
+  width: "100%",
+  height: "22px",
+  borderTop: "1px solid rgba(28,28,28,1)",
+  backgroundColor: "rgba(12,12,12,1)",
+  boxShadow: "0px 0px 8px rgba(0,0,0,0.4)"
+};

nero.widgets/bar.jsx → nero-top-text/bar.jsx

@@ -1,6 +1,5 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
 export const refreshFrequency = false;
-
 export const initialState = "...";
 export const render = output => <div />;
 

nero.widgets/battery.jsx → nero-top-text/battery.jsx

@@ -1,17 +1,14 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
 export const command = "pmset -g batt | egrep -o '([0-9]+%).*' | cut -d% -f1";
 export const refreshFrequency = 60000;
-
 export const initialState = "Bat: ...";
 
 export const updateState = event => {
-  if (event.error) return event.error;
-
   const battery = parseInt(event.output);
   const batteryval = battery.toString().padStart(2, "0");
 
   if (battery > 6 && battery < 100) return `Bat: ${batteryval}%`;
-  else if (battery < 6) return `Bat: !!!`;
+  else if (battery < 6) return "Bat: !!!";
   else return "Bat: Fll";
 };
 

nero.widgets/clock.jsx → nero-top-text/clock.jsx

@@ -1,7 +1,6 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
-export const command = 'date +"%d %b %Y - %H:%M"';
+export const command = "date +'%d %b - %H:%M'";
 export const refreshFrequency = 30000;
-
 export const initialState = "...";
 
 export const updateState = event => {

nero.widgets/cpu.jsx → nero-top-text/cpu.jsx

@@ -1,8 +1,6 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
-export const command =
-  'ESC=`printf "e"`; ps -A -o %cpu | awk \'{s+=$1} END {printf("%.2f",s/8);}\'';
+export const command = 'ESC=`printf "e"`; ps -A -o %cpu | awk \'{s+=$1} END {printf("%.2f",s/8);}\'';
 export const refreshFrequency = 10000;
-
 export const initialState = "Cpu: ...";
 
 export const updateState = event => {

nero.widgets/donotdisturb.jsx → nero-top-text/donotdisturb.jsx

@@ -1,8 +1,6 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
-export const command =
-  "defaults -currentHost read com.apple.notificationcenterui doNotDisturb";
+export const command = "defaults -currentHost read com.apple.notificationcenterui doNotDisturb";
 export const refreshFrequency = 5000;
-
 export const initialState = "Dnd: ...";
 
 export const updateState = event => {
@@ -19,7 +17,7 @@ export const render = output => <div>{output}</div>;
 
 export const className = {
   top: "0px",
-  left: "103px",
+  left: "0px",
   boxSizing: "border-box",
   borderRight: "1px solid #1c1c1c",
   padding: "7px 12px 6px 12px",

nero.widgets/mem.jsx → nero-top-text/mem.jsx

@@ -1,8 +1,6 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
-export const command =
-  'ESC=`printf "e"`; ps -A -o %mem | awk \'{s+=$1} END {print "" s}\'';
+export const command = 'ESC=`printf "e"`; ps -A -o %mem | awk \'{s+=$1} END {print "" s}\'';
 export const refreshFrequency = 30000;
-
 export const initialState = "Mem: ...";
 
 export const updateState = event => {

nero.widgets/mute.jsx → nero-top-text/mute.jsx

@@ -1,7 +1,6 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
 export const command = "osascript -e 'get volume settings'";
 export const refreshFrequency = 5000;
-
 export const initialState = "Mut: ...";
 
 export const updateState = event => {
@@ -19,7 +18,7 @@ export const render = output => <div>{output}</div>;
 
 export const className = {
   top: "0px",
-  left: "164px",
+  left: "61px",
   boxSizing: "border-box",
   borderRight: "1px solid #1c1c1c",
   padding: "7px 12px 6px 12px",

nero.widgets/networkspeed.jsx → nero-top-text/networkspeed.jsx

@@ -1,5 +1,5 @@
 // this widget is part of Nero -> https://github.com/lucaorio/nero
-export const command = "sh ./nero.widgets/netspeeds.sh";
+export const command = "sh ./nero-top-text/netspeeds.sh";
 export const refreshFrequency = 5000;
 
 export const initialState = {

nero-top/bar.jsx

@@ -0,0 +1,15 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+export const refreshFrequency = false;
+export const initialState = "...";
+export const render = output => <div />;
+
+export const className = {
+  zIndex: "-1",
+  top: "0px",
+  left: "0px",
+  boxSizing: "border-box",
+  width: "100%",
+  height: "23px",
+  borderBottom: "1px solid #1c1c1c",
+  backgroundColor: "#0c0c0c",
+};

nero-top/battery.jsx

@@ -0,0 +1,56 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+export const command = "pmset -g batt | egrep -o '([0-9]+%).*' | cut -d% -f1";
+export const refreshFrequency = 60000;
+export const initialState = "B ...";
+
+export const updateState = event => {
+  const battery = parseInt(event.output);
+  const batteryval = battery.toString().padStart(2, "0");
+  let color;
+
+  if (battery > 6 && battery < 100) color = "#ffffff";
+  else if (battery < 6) color = "#d0021b";
+  else color = "#7ed321";
+
+  return {
+    val: batteryval,
+    col: color
+  };
+};
+
+export const render = output => (
+  <section>
+  B
+  <div className="bar">
+    <div className="progress" style={{
+      width: output.val + "%",
+      backgroundColor: output.col
+    }}></div>
+  </div>
+  </section>
+);
+
+export const className = {
+  top: "0px",
+  right: "0px",
+  boxSizing: "border-box",
+  borderLeft: "1px solid #1c1c1c",
+  padding: "7px 12px 6px 12px",
+  fontFamily: "Roboto Mono",
+  fontWeight: "400",
+  fontSize: "10px",
+  lineHeight: "10px",
+  color: "#cccccc",
+  "& .bar": {
+    display: "inline-block",
+    boxSizing: "border-box",
+    marginLeft: "8px",
+    width: "20px",
+    height: "7px",
+    border: "1px solid #333333",
+    padding: "2px",
+    "& .progress": {
+      height: "1px",
+    },
+  },
+};

nero-top/clock.jsx

@@ -0,0 +1,25 @@
+// this widget is part of Nero -> https://github.com/lucaorio/nero
+export const command = "date +'%d %b - %H:%M'";
+export const refreshFrequency = 30000;
+export const initialState = "...";
+
+export const updateState = event => {
+  if (event.error) return event.error;
+  return event.output;
+};
+
+export const render = output => <div>{output}</div>;
+
+export const className = {
+  top: "0px",
+  right: "calc(50% - 100px)",
+  width: "200px",
+  boxSizing: "border-box",
+  padding: "7px 12px 6px 12px",
+  fontFamily: "Roboto Mono",
+  fontWeight: "400",
+  fontSize: "10px",
+  lineHeight: "10px",
+  color: "#cccccc",
+  textAlign: "center",
+};