From 567fa2b535733ebc35d71d758d7036a9b237919e Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sun, 18 Mar 2018 11:03:00 +1100
Subject: [PATCH] Cleaned more W95 code

---
 public/components/w95/Window95.jsx            |  8 +-
 .../styles/components/w95/_window-menu.scss   | 78 +++++++++++++++++++
 2 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 public/styles/components/w95/_window-menu.scss

diff --git a/public/components/w95/Window95.jsx b/public/components/w95/Window95.jsx
index cd9d8e6..6865e06 100644
--- a/public/components/w95/Window95.jsx
+++ b/public/components/w95/Window95.jsx
@@ -42,7 +42,7 @@ class Window95 extends Component {
       let key = btnKeys[i];
       var b = this.state.buttons[key];
       if(b === false) continue;
-      let cls = "btn " + btnKeys[i];
+      let cls = "c-window-btn " + btnKeys[i];
       if(b !== true && b !== false) cls += " " + b;
       btns.push(<div className={cls} key={i}></div>);
     }
@@ -52,15 +52,15 @@ class Window95 extends Component {
       menu = <ContextMenu menu={this.state.menu} />;
     }
 
-    let clss = "c-window ";
-    if(this.props.className) clss += this.props.className;
+    let clss = "c-window";
+    if(this.props.className) clss += " " + this.props.className;
 
     return (
       <div className={clss}>
         <div className="load_me_stuff"></div>
         <div className="c-title-bar">
           {this.state.title}
-          <div className="buttons">
+          <div className="c-window-buttons">
             {btns}
           </div>
         </div>
diff --git a/public/styles/components/w95/_window-menu.scss b/public/styles/components/w95/_window-menu.scss
new file mode 100644
index 0000000..fa0fe98
--- /dev/null
+++ b/public/styles/components/w95/_window-menu.scss
@@ -0,0 +1,78 @@
+.c-context-menu {
+  width: 100%;
+  overflow: visible;
+}
+
+.c-context-menu__btn {
+  padding: (1px*$w95Scale) (5px*$w95Scale);
+  border: 1px*$w95Scale solid transparent;
+  display: inline-block;
+  position: relative;
+
+  &::first-letter {
+    text-decoration: underline;
+  }
+
+  &:hover {
+    border-bottom-color: #868686;
+    border-right-color: #868686;
+    border-top-color: #FFFFFF;
+    border-left-color: #FFFFFF;
+  }
+
+  &.active {
+    border-right-color: #FFFFFF;
+    border-bottom-color: #FFFFFF;
+    border-top-color: #868686;
+    border-left-color: #868686;
+
+    > .c-context-menu__menu {
+      display: block;
+    }
+  }
+
+  &.disabled {
+    color: $w95Disabled;
+    &:hover,.active {
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+}
+
+.c-context-menu__menu {
+  @include border95($w95Scale);
+  border-top-width: 2px*$w95Scale;
+  position: absolute;
+  display: none;
+  background: $w95WindowBG;
+  left: -1px*$w95Scale;
+  margin-top: 2px*$w95Scale;
+  width: auto;
+}
+
+.c-context-menu__menu-option {
+ padding-left: 22px*$w95Scale;
+ padding-right: 22px*$w95Scale;
+ padding-bottom: 3px*$w95Scale;
+ padding-top: 1px*$w95Scale;
+ white-space: nowrap;
+
+ &:hover {
+   background: $w95Highlight;
+   color: white;
+ }
+
+ &:first-child {font-weight: bold;}
+
+ &::first-letter {
+   text-decoration: underline;
+ }
+
+ &.disabled {
+   color: $w95Disabled;
+   &:hover {background: inherit;color: $w95Disabled;}
+ }
+}