review styling of dialogs and scrollbars

Dyalog · Apr 25, 2018 · a1a523a · a1a523a
1 parent 9213c30
commit a1a523a
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 181 deletions.
diff --git a/index.html b/index.html
@@ -210,16 +210,16 @@
 
 <div id=cn_connecting_dlg class=dlg hidden>
   <div class=dlg_title>Connecting...</div>
-  <div class=cn_dlg_content><progress class=cn_progress></progress></div>
-  <div class=dlg_btns><button id=cn_connecting_dlg_close><u>C</u>lose</button></div>
+  <div class=cn_dlg_content><span class="far fa-spinner fa-spin fa_icon"></span></div>
+  <div class=dlg_btns><button id=cn_connecting_dlg_close><u>C</u>ancel</button></div>
 </div>
 <div id=cn_listen_dlg class=dlg hidden>
   <div class=dlg_title>Waiting for connection...</div>
   <div class=cn_dlg_content>
-    <progress class=cn_progress></progress>
-    Please start the remote interpreter with
-    <div class=tt>RIDE_INIT=connect:<i>host</i>:<span id=cn_listen_dlg_port>port</span></div>
-    in its environment, so it connects here.
+    <span class="far fa-spinner fa-spin fa_icon"></span>
+    <p>Please start the remote interpreter with</p>
+    <pre>RIDE_INIT=connect:<i>host</i>:<span id=cn_listen_dlg_port>port</span></pre>
+    <p>in its environment, so it connects here.</p>
   </div>
   <div class=dlg_btns><button id=cn_listen_dlg_cancel><u>C</u>ancel</button></div>
 </div>

diff --git a/src/ide.js b/src/ide.js
@@ -163,7 +163,7 @@ D.IDE = function IDE(opts = {}) {
   const eachWin = (f) => { Object.keys(ide.wins).forEach((k) => { f(ide.wins[k]); }); };
   const gl = new GoldenLayout({
     settings: { showPopoutIcon: 0 },
-    dimensions: { borderWidth: 7 },
+    dimensions: { borderWidth: 7, headerHeight: 25 },
     labels: { minimise: 'unmaximise' },
     content: [ide.floating ? { type: 'stack' } : {
       title: 'Session',

diff --git a/src/mon_apl.js b/src/mon_apl.js
@@ -796,7 +796,7 @@
             { language: 'plaintext', value: lbt[1] },
           ],
         };
-      } else if (D.prf.valueTips() && /[^ \(\)\[\]\{\}':;]/.test(c)) {
+      } else if (D.prf.valueTips() && /[^ ()[\]{}':;]/.test(c)) {
         D.send('GetValueTip', { // ask interpreter
           win: m.winid,
           token: m.winid,

diff --git a/style/dark-theme.css b/style/dark-theme.css
@@ -145,11 +145,11 @@
 }
 #cn_listen_dlg {
   width: 360px;
-  height: 160px;
+  height: 210px;
 }
 #cn_connecting_dlg {
   width: 360px;
-  height: 160px;
+  height: 150px;
 }
 .cn_dlg_content {
   padding: 8px;
@@ -188,10 +188,10 @@
 }
 #debug .ctl_listview_header {
   height: 14px;
-  padding: 5px 5px;
+  padding: 5px;
 }
 #threads {
-  height: calc(100% - 54px);
+  height: calc(100% - 60px);
 }
 #sistack {
   height: calc(100% - 24px);
@@ -422,9 +422,6 @@
 .lm_content {
   border: none !important;
 }
-.lm_header {
-  height: 25px !important;
-}
 .lm_header .lm_tab {
   padding: 5px 15px 5px 10px !important;
   margin-top: 0!important;
@@ -1766,15 +1763,12 @@ h2 {
 .tooltip {
   width: 16px;
   height: 16px;
-  color: #7688d9;
   position: relative;
   display: inline-block;
 }
 /* Tooltip text */
 .tooltip .tooltiptext {
   visibility: hidden;
-  background-color: black;
-  color: #fff;
   text-align: center;
   padding: 5px;
   border-radius: 6px;
@@ -1794,7 +1788,6 @@ h2 {
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent black transparent transparent;
 }
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
@@ -2343,12 +2336,12 @@ body.floating-window {
 }
 #cn .hsplitbar {
   background-blend-mode: soft-light;
-  background: #1c1e28 url(img/grabber_vert.png) no-repeat center !important;
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
   border-right: solid 1px black;
   border-left: solid 1px black;
 }
 #cn_favs > div.list_sel {
-  background: #20222e;
+  background: #21222e;
   color: #7688d9;
   opacity: 1;
 }
@@ -2362,7 +2355,7 @@ body.floating-window {
   outline: dotted black 1px;
 }
 #cn_favs > div {
-  background: #20222e;
+  background: #21222e;
   color: #a9a9a9;
 }
 #cn_fav_btns {
@@ -2381,6 +2374,17 @@ body.floating-window {
 #cn_env_add a {
   color: #7688d9;
 }
+.cn_dlg_content {
+  color: #a9a9a9;
+  line-height: 1.5em;
+}
+.cn_dlg_content .fa_icon {
+  font-size: 40px;
+}
+.cn_dlg_content pre {
+  font-size: 16px;
+  font-family: monospace;
+}
 .ctl_listview {
   background-color: #1c1e28;
   color: white;
@@ -2400,7 +2404,7 @@ body.floating-window {
 }
 #debug .ctl_listview_header {
   background-color: #7688d9;
-  color: #7688d9;
+  color: white;
 }
 #debug .ctl_listview_header h2 {
   font-size: 16px;
@@ -2416,6 +2420,10 @@ body.floating-window {
 .dlg_close:hover {
   background-color: white;
 }
+#cn_listen_dlg,
+#cn_connecting_dlg {
+  border: 1px solid #7688d9;
+}
 #gd.dlg {
   background-color: #1c1e28;
 }
@@ -2428,13 +2436,13 @@ body.floating-window {
 }
 #gd .dlg_close:hover {
   color: white;
-  background-color: #313446;
+  background-color: #323446;
 }
 #gd_content {
   color: #a9a9a9;
 }
 .dlg_btns {
-  background-color: #313446;
+  background-color: #323446;
 }
 .dlg_btns button.task {
   background-image: none;
@@ -2467,7 +2475,7 @@ body.floating-window {
   font-family: Roboto!important;
   letter-spacing: 0.5px;
   font-size: 12px;
-  background-color: #313446 !important;
+  background-color: #323446 !important;
   color: #a9a9a9 !important;
   border-right: 1px #272937 solid !important;
 }
@@ -2480,16 +2488,16 @@ body.floating-window {
   color: #7688d9 !important;
 }
 .lm_splitter {
-  background-color: #1c1e28 !important;
+  background-color: rgba(118, 136, 217, 0.3) !important;
 }
 .lm_splitter.lm_horizontal {
   background-blend-mode: soft-light;
-  background: #1c1e28 url(img/grabber_vert.png) no-repeat center !important;
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important;
   box-shadow: -1px 0 0 black inset, 1px 0 0 black inset;
 }
 .lm_splitter.lm_vertical {
   background-blend-mode: soft-light;
-  background: #1c1e28 url(img/grabber_hor.png) no-repeat center !important;
+  background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important;
   box-shadow: 0 -1px 0 black inset, 0 1px 0 black inset;
 }
 .lm_header .lm_tab .lm_close_tab {
@@ -2513,11 +2521,14 @@ body.floating-window {
   opacity: 1;
   filter: alpha(opacity=100);
 }
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: #a9a9a9 !important;
+}
 .lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
 }
 .lm_maximised .lm_controls .lm_maximise {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
 }
 label {
   color: #a9a9a9;
@@ -2547,11 +2558,11 @@ button:hover {
   background-color: #7688d9;
 }
 [type=checkbox]:hover::before {
-  background: #313446;
+  background: #323446;
 }
 [type=checkbox]:active::before {
   background: #7688d9;
-  color: #313446;
+  color: #323446;
 }
 [type=checkbox]:checked::before {
   color: #7688d9;
@@ -2562,7 +2573,7 @@ button:hover {
 [type=checkbox]:disabled::before {
   color: transparent;
   box-shadow: 0 0 0 1px #7688d9 inset;
-  background: #313446;
+  background: #323446;
 }
 [type=checkbox]:checked:disabled::before {
   color: grayscale(#7688d9);
@@ -2632,7 +2643,7 @@ select {
   color: white;
 }
 .menu .m-box a:focus {
-  background: #313446;
+  background: #323446;
   color: white;
 }
 .menu .m-box a:focus .m-shc {
@@ -2642,7 +2653,7 @@ select {
   background: transparent 5px center no-repeat url(img/menu_chk.png);
 }
 .menu .m-box a:focus.m-checked {
-  background: #313446 5px center no-repeat url(img/menu_chk_wht.png);
+  background: #323446 5px center no-repeat url(img/menu_chk_wht.png);
 }
 #prf_dlg hr {
   border-top: 1px solid black;
@@ -2721,7 +2732,7 @@ input.lyt_g3:hover {
   background-color: lightgrey;
 }
 #shc_tbl_wr tr {
-  background-color: #313446;
+  background-color: #323446;
   border-bottom: 1px solid #1c1e28;
   color: white;
   font-family: Roboto;
@@ -2797,13 +2808,18 @@ input.lyt_g3:hover {
 #pmenu #pmenu_ta {
   font-family: monospace;
 }
+::-webkit-scrollbar-corner {
+  background-color: #1c1e28;
+}
 ::-webkit-scrollbar-track {
   background-color: #1c1e28;
-  border-left: 1px solid black;
 }
 ::-webkit-scrollbar-thumb {
-  border-left: 1px solid black;
-  background-color: #313446;
+  background-color: rgba(50, 52, 70, 0.5);
+  border: 1px solid #272937;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #323446;
 }
 #ide {
   background: url(img/RideSplash-Blue.png) center no-repeat #1c1e28;
@@ -2839,6 +2855,17 @@ body {
   -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
 }
+.tooltip {
+  color: #7688d9;
+}
+/* Tooltip text */
+.tooltip .tooltiptext {
+  background-color: #1c1e28;
+  color: #a9a9a9;
+}
+.tooltip .tooltiptext::after {
+  border-color: transparent #1c1e28 transparent transparent;
+}
 .toolbar {
   background-color: #1c1e28;
 }
@@ -2887,6 +2914,6 @@ body {
   color: #1c1e28;
 }
 #wse .bt_text.selected {
-  background-color: #313446;
-  outline: #313446;
+  background-color: #3c3f55;
+  outline: #3c3f55;
 }
diff --git a/style/less/colour/connect_page.less b/style/less/colour/connect_page.less
@@ -65,3 +65,14 @@
 		color: @CN_ENV_BTN_FG;
 	}
 }
+.cn_dlg_content {
+	color: @CN_LABEL_COL;
+	line-height: 1.5em;
+	.fa_icon {
+		font-size: 40px;
+	}
+	pre {
+		font-size: 16px;
+		font-family: monospace;
+	}
+}
diff --git a/style/less/colour/dialogs.less b/style/less/colour/dialogs.less
@@ -1,8 +1,6 @@
 /*various dialogs*/
 .dlg{
     background-color:@DLG_BG_COL;
-    // box-shadow:0 18px 48px @DLG_SHADOW_COL;
-    // border:1px solid @DLG_BORDER_COL;
 }
 
 .dlg_title,.dlg_close{
@@ -12,6 +10,9 @@
 .dlg_close:hover{
   background-color:@DLG_CLOSE_HOVER_BG;
 }
+#cn_listen_dlg,#cn_connecting_dlg {
+  border:1px solid @DLG_BORDER_COL;
+}
 #gd {
   &.dlg{
       background-color:@GD_BG_COL;
@@ -34,7 +35,7 @@
   color: @LABEL_COL;
 }
 .dlg_btns {
-  background-color: @THEME_THIRD;
+  background-color: @DLG_BOTTOM_BG;
   button.task{
     background-image: none;
     background-color: rgba(0, 0, 0, 0);

diff --git a/style/less/colour/golden_layout.less b/style/less/colour/golden_layout.less
@@ -1,13 +1,11 @@
 /*Golden Layout*/
 .lm_goldenlayout {
-	// background:@GL_BG url(img/mainBG.png) left -40px repeat-x !important;
 	background: @GL_BG !important;
 	.lm_header {
 		background: @GL_BG !important;
 	}
 }
 .lm_header,.lm_content {
-// 	background-color: @GL_BG !important;
 	border-color: @GL_BG !important;
 }
 .lm_tab {
@@ -67,11 +65,14 @@
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
+.lm_header .lm_controls .lm_tabdropdown:before {
+	color:@GL_TAB_FG !important;
+}
 
 .lm_controls .lm_maximise{
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
+	background-image: @GL_MAXIMISE_IMG;
 }
 
 .lm_maximised .lm_controls .lm_maximise{
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
+	background-image: @GL_RESTORE_IMG;
 }