From 81fa6058b030d4a2f19a1e577b87f5a49a7a7217 Mon Sep 17 00:00:00 2001 From: Gilgamesh Athoraya Date: Mon, 14 Aug 2023 13:38:44 +0200 Subject: [PATCH 1/4] Rendering of keyboard shortcuts platform specific --- src/cmds.js | 114 +-- src/km.js | 8 +- src/prf_shc.js | 43 +- style/dark-theme.css | 298 +++---- .../layout/preferences/prefs_shortcuts.less | 11 + style/light-theme.css | 168 ++-- style/ride-base.css | 724 +++++++++--------- 7 files changed, 707 insertions(+), 659 deletions(-) diff --git a/src/cmds.js b/src/cmds.js index 8d3219c67..ca2abb71c 100644 --- a/src/cmds.js +++ b/src/cmds.js @@ -7,14 +7,14 @@ D.cmds = [ /* eslint-disable */ //code description default keys - ['ABT','About Dyalog', ['Shift-F1']], + ['ABT','About Dyalog', ['Shift+F1']], ['AC', 'Align comments', []], ['AO', 'Comment out lines', []], ['ASW', 'Auto Status', []], ['BH', 'Run to exit (in tracer)', []], - ['BK', 'Backward or Undo', ['Ctrl-Shift-Backspace']], + ['BK', 'Backward or Undo', ['Ctrl+Shift+Backspace']], ['BP', 'Toggle breakpoint', []], - ['BT', 'Back Tab between windows',['Ctrl-Shift-Tab']], + ['BT', 'Back Tab between windows',['Ctrl+Shift+Tab']], ['CAM','Clear all trace/stop/monitor',[]], ['CAW','Close All Windows',[]], ['CBP','Clear stops for active object',[]], @@ -26,59 +26,59 @@ D.cmds = [ ['DMR','Load demo file', []], ['DOX','Documentation Centre', []], ['DO', 'Uncomment lines', []], - ['ED', 'Edit', ['Shift-Enter']], + ['ED', 'Edit', ['Shift+Enter']], ['EP', 'Exit (and save changes)', ['Escape']], ['ER', 'Execute line', ['Enter']], - ['EXP','Expand selection', ['Alt-Shift-Up']], - ['FD', 'Forward or Redo', ['Ctrl-Shift-Enter']], + ['EXP','Expand selection', [D.mac?'Shift+Option+Up':'Shift+Alt+Up']], + ['FD', 'Forward or Redo', ['Ctrl+Shift+Enter']], ['FX', 'Fix the current function',[]], ['HLP','Help', ['F1']], - ['JBK','Jump back', ['Ctrl-Shift-J']], + ['JBK','Jump back', ['Ctrl+Shift+J']], ['JSC','Show JavaScript console', ['F12']], ['LBR','Toggle language bar', []], ['LL', 'Left Limit', ['Home']], ['LN', 'Toggle line numbers', []], - ['LOG','Show RIDE protocol log', ['Ctrl-F12']], + ['LOG','Show RIDE protocol log', ['Ctrl+F12']], ['MA', 'Continue execution of all threads',[]], - ['NEW','New session', [D.mac?'Cmd-N':'Ctrl-N']], + ['NEW','New session', [D.mac?'Cmd+N':'Ctrl+N']], ['NX' ,'Next match', []], - ['OWS','Open Workspace', [D.mac?'Cmd-O':'Ctrl-O']], + ['OWS','Open Workspace', [D.mac?'Cmd+O':'Ctrl+O']], ['PAT','Pause all Threads', []], ['POE','Pause on Error', []], ['PRF','Show preferences', []], ['PV' ,'Previous match', []], ['QCP','Quick Command Palette', []], - ['QIT','Quit', (D.mac?['Cmd-Q']:[]).concat('Ctrl-Q')], - ['QT', 'Close window (and lose changes)',['Shift-Escape']], + ['QIT','Quit', [D.mac?'Cmd+Q':'Ctrl+Q']], + ['QT', 'Close window (and lose changes)',['Shift+Escape']], ['RD', 'Reformat', ['NumPad_Divide']], - ['RDO', 'Redo', (D.mac?['Shift-Cmd-Z']:[]).concat('Ctrl-Y')], + ['RDO', 'Redo', [D.mac?'Shift+Cmd+Z':'Ctrl+Y']], ['RP', 'Replace', []], ['RL', 'Right Limit', ['End']], ['RM', 'Continue execution of this thread', []], ['UAT','Unpause all paused threads',[]], - ['SA', 'Select All', [D.mac?'Cmd-A':'Ctrl-A']], - ['SC', 'Search', ['Ctrl-F']], + ['SA', 'Select All', [D.mac?'Cmd+A':'Ctrl+A']], + ['SC', 'Search', ['Ctrl+F']], ['SI', 'Strong interrupt', []], ['SBR','Toggle status bar', []], ['SSW','Toggle status window', []], ['STL','Skip to line', []], - ['TB', 'Tab between windows', ['Ctrl-Tab']], - ['TC', 'Trace line', ['Ctrl-Enter']], + ['TB', 'Tab between windows', ['Ctrl+Tab']], + ['TC', 'Trace line', ['Ctrl+Enter']], ['TGC','Toggle comment', []], ['TIP','Show value tip', []], - ['TL', 'Toggle localisation', ['Ctrl-Up']], + ['TL', 'Toggle localisation', ['Ctrl+Up']], ['TO', 'Toggle fold', []], ['TVB','Toggle view stops', []], ['TVO','Toggle view outline', []], ['TFR', 'Refresh threads', []], - ['UND', 'Undo', (D.mac?['Cmd-Z']:[]).concat('Ctrl-Z')], + ['UND', 'Undo', [D.mac?'Cmd+Z':'Ctrl+Z']], ['VAL','Evaluate selection or name under cursor',[]], - ['WI', 'Weak interrupt', ['Ctrl-PauseBreak']], + ['WI', 'Weak interrupt', ['Ctrl+PauseBreak']], ['WSE','Toggle workspace explorer',[]], ['ZM', 'Toggle maximise editor', []], - ['ZMI','Increase font size', (D.mac?['Cmd-=','Shift-Cmd-=']:[]).concat(['Ctrl-=','Ctrl-Shift-='])], - ['ZMO','Decrease font size', (D.mac?['Cmd--']:[]).concat('Ctrl--')], - ['ZMR','Reset font size', (D.mac?['Cmd-0']:[]).concat('Ctrl-0')], + ['ZMI','Increase font size', [D.mac?'Cmd+=':'Ctrl+=']], + ['ZMO','Decrease font size', [D.mac?'Cmd+-':'Ctrl+-']], + ['ZMR','Reset font size', [D.mac?'Cmd+0':'Ctrl+0']], ['PF1' ,'', []], ['PF2' ,'', ['F2']], ['PF3' ,'', ['F3']], @@ -92,40 +92,40 @@ D.cmds = [ ['PF11','', []], ['PF12','', []], ['PF13','', []], - ['PF14','', ['Shift-F2']], - ['PF15','', ['Shift-F3']], - ['PF16','', ['Shift-F4']], - ['PF17','', ['Shift-F5']], - ['PF18','', ['Shift-F6']], - ['PF19','', ['Shift-F7']], - ['PF20','', ['Shift-F8']], - ['PF21','', ['Shift-F9']], - ['PF22','', ['Shift-F10']], - ['PF23','', ['Shift-F11']], - ['PF24','', ['Shift-F12']], - ['PF25','', ['Ctrl-F1']], - ['PF26','', ['Ctrl-F2']], - ['PF27','', ['Ctrl-F3']], - ['PF28','', ['Ctrl-F4']], - ['PF29','', ['Ctrl-F5']], - ['PF30','', ['Ctrl-F6']], - ['PF31','', ['Ctrl-F7']], - ['PF32','', ['Ctrl-F8']], - ['PF33','', ['Ctrl-F9']], - ['PF34','', ['Ctrl-F10']], - ['PF35','', ['Ctrl-F11']], + ['PF14','', ['Shift+F2']], + ['PF15','', ['Shift+F3']], + ['PF16','', ['Shift+F4']], + ['PF17','', ['Shift+F5']], + ['PF18','', ['Shift+F6']], + ['PF19','', ['Shift+F7']], + ['PF20','', ['Shift+F8']], + ['PF21','', ['Shift+F9']], + ['PF22','', ['Shift+F10']], + ['PF23','', ['Shift+F11']], + ['PF24','', ['Shift+F12']], + ['PF25','', ['Ctrl+F1']], + ['PF26','', ['Ctrl+F2']], + ['PF27','', ['Ctrl+F3']], + ['PF28','', ['Ctrl+F4']], + ['PF29','', ['Ctrl+F5']], + ['PF30','', ['Ctrl+F6']], + ['PF31','', ['Ctrl+F7']], + ['PF32','', ['Ctrl+F8']], + ['PF33','', ['Ctrl+F9']], + ['PF34','', ['Ctrl+F10']], + ['PF35','', ['Ctrl+F11']], ['PF36','', []], - ['PF37','', ['Ctrl-Shift-F1']], - ['PF38','', ['Ctrl-Shift-F2']], - ['PF39','', ['Ctrl-Shift-F3']], - ['PF40','', ['Ctrl-Shift-F4']], - ['PF41','', ['Ctrl-Shift-F5']], - ['PF42','', ['Ctrl-Shift-F6']], - ['PF43','', ['Ctrl-Shift-F7']], - ['PF44','', ['Ctrl-Shift-F8']], - ['PF45','', ['Ctrl-Shift-F9']], - ['PF46','', ['Ctrl-Shift-F10']], - ['PF47','', ['Ctrl-Shift-F11']], - ['PF48','', ['Ctrl-Shift-F12']], + ['PF37','', ['Ctrl+Shift+F1']], + ['PF38','', ['Ctrl+Shift+F2']], + ['PF39','', ['Ctrl+Shift+F3']], + ['PF40','', ['Ctrl+Shift+F4']], + ['PF41','', ['Ctrl+Shift+F5']], + ['PF42','', ['Ctrl+Shift+F6']], + ['PF43','', ['Ctrl+Shift+F7']], + ['PF44','', ['Ctrl+Shift+F8']], + ['PF45','', ['Ctrl+Shift+F9']], + ['PF46','', ['Ctrl+Shift+F10']], + ['PF47','', ['Ctrl+Shift+F11']], + ['PF48','', ['Ctrl+Shift+F12']], /* eslint-enable */ ]; diff --git a/src/km.js b/src/km.js index 90c99a693..5b0ef62ee 100644 --- a/src/km.js +++ b/src/km.js @@ -354,14 +354,16 @@ const km = monaco.KeyMod; const ctrlcmd = { Ctrl: D.mac ? km.WinCtrl : km.CtrlCmd, - Cmd: km.CtrlCmd, - Win: km.CtrlCmd, + Cmd: D.mac ? km.CtrlCmd : km.WinCtrl, + Command: km.CtrlCmd, + Option: km.Alt, + Win: km.WinCtrl, Meta: km.CtrlCmd, }; const stlkbs = []; const fxkbs = []; function monacoKeyBinding(ks) { - return ks.replace(/-(.)/g, '\n$1').split('\n').reduce((a, ko) => { + return ks.replace(/[+-](.)/g, '\n$1').split('\n').reduce((a, ko) => { const k = D.keyMap.labels[ko] || ko; return a | (ctrlcmd[k] || km[k] || kc[k]); // eslint-disable-line no-bitwise }, 0); diff --git a/src/prf_shc.js b/src/prf_shc.js index 9a52067b2..346dad308 100644 --- a/src/prf_shc.js +++ b/src/prf_shc.js @@ -11,6 +11,12 @@ h[k] = a[i]; } }; + const keyLabels = { + Ctrl: '⌃', + Shift: '⇧', + Option: '⌥', + Cmd: '⌘', + }; const getKeystroke = (b, f) => { // b:"+" button,f:callback const e = document.createElement('div'); e.className = 'shc_editor'; @@ -22,10 +28,15 @@ const kn = monaco.KeyCode[x.keyCode]; const be = x.browserEvent; const isMeta = meta.has(kn); - const s = (be.ctrlKey ? 'Ctrl-' : '') + (be.altKey ? 'Alt-' : '') - + (be.shiftKey && (be.type === 'keydown' || be.which) ? 'Shift-' : '') - + (be.metaKey ? 'Cmd-' : '') - + (isMeta ? '' : D.keyMap.labels[kn]); + const s = [ + be.ctrlKey ? 'Ctrl' : '', + be.shiftKey && (be.type === 'keydown' || be.which) ? 'Shift' : '', + // eslint-disable-next-line no-nested-ternary + be.altKey ? (D.mac ? 'Option' : 'Alt') : '', + // eslint-disable-next-line no-nested-ternary + be.metaKey ? (D.mac ? 'Cmd' : (D.win ? 'Win' : 'Meta')) : '', + isMeta ? '' : D.keyMap.labels[kn], + ].filter((k) => k).join('+'); me.setValue(s || 'Press keystroke...'); if (!isMeta) { r = (x.keyCode === monaco.KeyCode.KEY_IN_COMPOSITION || !D.keyMap.labels[kn]) ? '' : s; @@ -62,10 +73,24 @@ b.parentNode.insertBefore(e, b); me.focus(); }; - const keyHTML = (x) => ( - `${x}` - + '× ' - ); + const keyHTML = (x) => { + const keys = x.replace(/[+-](.)/g, '\n$1').split('\n'); + const btns = keys.map((k) => { + let lbl = k; + if (D.mac) lbl = keyLabels[k] || k; + else if (k === 'Cmd') lbl = D.win ? 'Win' : 'Meta'; + return `
${lbl}
`; + }).join('+'); + const lbls = keys.map((k) => { + let lbl = k; + // eslint-disable-next-line no-nested-ternary + if (k === 'Cmd') lbl = D.mac ? 'Command' : (D.win ? 'Win' : 'Meta'); + else if (k === 'Alt' && D.mac) lbl = 'Option'; + return lbl; + }).join('+'); + return `${btns}` + + '× '; + }; const updSC = () => { const a = q.tbl_wr.querySelectorAll('tr'); const s = q.sc.value.toLowerCase(); @@ -192,7 +217,7 @@ let shortcuts = a[i].querySelectorAll('[class^=shc_text]'); const keys = []; if (shortcuts.length) { - shortcuts = shortcuts.forEach((e) => { keys.push(e.innerHTML); }); + shortcuts = shortcuts.forEach((e) => { keys.push(e.title); }); } h[cmdName] = keys; } diff --git a/style/dark-theme.css b/style/dark-theme.css index 8c3b17ede..83f0eb435 100644 --- a/style/dark-theme.css +++ b/style/dark-theme.css @@ -256,95 +256,6 @@ select { border-top: 1px solid black; border-bottom: 1px solid #2e303e; } -/*Golden Layout*/ -.lm_goldenlayout { - background: #272937 !important; -} -.lm_goldenlayout .lm_header { - background: #272937 !important; -} -.lm_header, -.lm_content { - border-color: #272937 !important; -} -.lm_dragProxy .lm_content { - box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); -} -.lm_dropTargetIndicator { - box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); - outline: 1px dashed #7688d9; - margin: 1px; - transition: all 200ms ease; -} -.lm_dropTargetIndicator .lm_inner { - background: white; - opacity: 0.1; - filter: alpha(opacity=1); -} -.lm_tab { - letter-spacing: 0.5px; - font-size: 12px; - background-color: #323446 !important; - color: #a9a9a9 !important; - border-right: 1px #272937 solid !important; -} -.lm_tab.lm_active { - background-color: #1c1e28 !important; - border-right: 1px #272937 solid !important; - color: #7688d9 !important; -} -.lm_tab.lm_active .lm_close_tab { - color: #7688d9 !important; -} -.lm_splitter { - background-color: rgba(118, 136, 217, 0.3) !important; -} -.lm_splitter.lm_horizontal { - 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: 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 { - background-image: none !important; - color: #a9a9a9; - font-size: 16px; -} -.lm_header .lm_tab .lm_close_tab::before { - content: "×"; -} -.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { - content: "⬤"; - font-size: 8px; -} -.lm_header .lm_tab:hover .lm_close_tab { - opacity: 1; - color: #7688d9 !important; -} -.lm_controls > li { - background-position: center center; - background-repeat: no-repeat; - position: relative; -} -.lm_controls > li:hover { - 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); -} -.lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); -} -.lm_transition_indicator { - background-color: white; - border: 1px dashed #7688d9; -} /*menu (see ../src/menu.js for the DOM structure)*/ .menu { background-color: #edeff5; @@ -448,56 +359,6 @@ select { .sessionmargin.modified::before { color: red; } -#splash { - background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28; -} -#ide { - background-color: #1c1e28; -} -#apl_font { - color: #1c1e28; -} -::selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -::-moz-selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -body { - font-family: Roboto, sans-serif; -} -::-webkit-scrollbar { - background-color: #1c1e28; -} -::-webkit-scrollbar-corner { - background-color: #1c1e28; -} -::-webkit-scrollbar-track { - background-color: #272937; - border: 1px solid #1c1e28; - border-radius: 10px; -} -::-webkit-scrollbar-thumb { - background-color: rgba(118, 136, 217, 0.3); - border: 1px solid #1c1e28; - border-radius: 10px; -} -::-webkit-scrollbar-thumb:horizontal { - border-width: 1px 0; -} -::-webkit-scrollbar-thumb:vertical { - border-width: 0 1px; -} -::-webkit-scrollbar-thumb:hover { - background-color: rgba(118, 136, 217, 0.6); -} -::-webkit-scrollbar-thumb:active { - background-color: rgba(118, 136, 217, 0.9); -} #prf_dlg hr { border-top: 1px solid black; border-bottom: 1px solid #2e303e; @@ -676,6 +537,56 @@ a:hover { display: none; } } +::-webkit-scrollbar { + background-color: #1c1e28; +} +::-webkit-scrollbar-corner { + background-color: #1c1e28; +} +::-webkit-scrollbar-track { + background-color: #272937; + border: 1px solid #1c1e28; + border-radius: 10px; +} +::-webkit-scrollbar-thumb { + background-color: rgba(118, 136, 217, 0.3); + border: 1px solid #1c1e28; + border-radius: 10px; +} +::-webkit-scrollbar-thumb:horizontal { + border-width: 1px 0; +} +::-webkit-scrollbar-thumb:vertical { + border-width: 0 1px; +} +::-webkit-scrollbar-thumb:hover { + background-color: rgba(118, 136, 217, 0.6); +} +::-webkit-scrollbar-thumb:active { + background-color: rgba(118, 136, 217, 0.9); +} +#splash { + background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #1c1e28; +} +#ide { + background-color: #1c1e28; +} +#apl_font { + color: #1c1e28; +} +::selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +::-moz-selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +body { + font-family: Roboto, sans-serif; +} #sb { background-color: #1c1e28; border-top: 1px solid black; @@ -694,6 +605,16 @@ a:hover { #status_body { background-color: #1c1e28; } +#toast-container { + font-family: Roboto; + font-size: 14px; + line-height: 20px; +} +#toast-container > div { + -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + -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; } @@ -705,16 +626,6 @@ a:hover { .tooltip .tooltiptext::after { border-color: transparent #1c1e28 transparent transparent; } -#toast-container { - font-family: Roboto; - font-size: 14px; - line-height: 20px; -} -#toast-container > div { - -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); -} .toolbar { background-color: #1c1e28; border-bottom: 1px solid #272937; @@ -742,6 +653,95 @@ a:hover { border: 0 solid #272937; border-right-width: 1px; } +/*Golden Layout*/ +.lm_goldenlayout { + background: #272937 !important; +} +.lm_goldenlayout .lm_header { + background: #272937 !important; +} +.lm_header, +.lm_content { + border-color: #272937 !important; +} +.lm_dragProxy .lm_content { + box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); +} +.lm_dropTargetIndicator { + box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); + outline: 1px dashed #7688d9; + margin: 1px; + transition: all 200ms ease; +} +.lm_dropTargetIndicator .lm_inner { + background: white; + opacity: 0.1; + filter: alpha(opacity=1); +} +.lm_tab { + letter-spacing: 0.5px; + font-size: 12px; + background-color: #323446 !important; + color: #a9a9a9 !important; + border-right: 1px #272937 solid !important; +} +.lm_tab.lm_active { + background-color: #1c1e28 !important; + border-right: 1px #272937 solid !important; + color: #7688d9 !important; +} +.lm_tab.lm_active .lm_close_tab { + color: #7688d9 !important; +} +.lm_splitter { + background-color: rgba(118, 136, 217, 0.3) !important; +} +.lm_splitter.lm_horizontal { + 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: 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 { + background-image: none !important; + color: #a9a9a9; + font-size: 16px; +} +.lm_header .lm_tab .lm_close_tab::before { + content: "×"; +} +.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { + content: "⬤"; + font-size: 8px; +} +.lm_header .lm_tab:hover .lm_close_tab { + opacity: 1; + color: #7688d9 !important; +} +.lm_controls > li { + background-position: center center; + background-repeat: no-repeat; + position: relative; +} +.lm_controls > li:hover { + 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); +} +.lm_maximised .lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); +} +.lm_transition_indicator { + background-color: white; + border: 1px dashed #7688d9; +} #vt_bln { border: solid black 1px; background-color: black; diff --git a/style/less/layout/preferences/prefs_shortcuts.less b/style/less/layout/preferences/prefs_shortcuts.less index c1365debf..7336cd995 100644 --- a/style/less/layout/preferences/prefs_shortcuts.less +++ b/style/less/layout/preferences/prefs_shortcuts.less @@ -74,6 +74,17 @@ margin: 8px 2px; line-height: 24px; white-space: nowrap; + padding: 3px 0; + .shc_key_btn { + border-radius: 3px; + background-color: grey; + color: white; + display: inline; + margin: 2px; + padding: 2px 4px; + white-space: nowrap; + } + } .shc_text { border-top-right-radius: 0; diff --git a/style/light-theme.css b/style/light-theme.css index a7a07ff6f..0602ef1ba 100644 --- a/style/light-theme.css +++ b/style/light-theme.css @@ -5,6 +5,30 @@ cursor: auto; font-family: apl, monospace; } +.ctl_listview { + background-color: white; + color: black; +} +.ctl_listview tr { + background-color: rgba(118, 136, 217, 0.5); + border-bottom: 1px solid white; +} +.ctl_listview tr:hover { + background-color: rgba(118, 136, 217, 0.25); +} +.ctl_listview tr.selected { + background-color: #9eabe4; +} +#debug { + background: white; +} +#debug .ctl_listview_header { + background-color: #7688d9; + color: white; +} +#debug .ctl_listview_header h2 { + font-size: 16px; +} #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]), #cn textarea { border: 1px solid rgba(169, 169, 169, 0.3); @@ -424,34 +448,6 @@ select { .sessionmargin.modified::before { color: red; } -::-webkit-scrollbar { - background-color: white; -} -::-webkit-scrollbar-corner { - background-color: white; -} -::-webkit-scrollbar-track { - background-color: #f0f0f0; - border: 1px solid white; - border-radius: 10px; -} -::-webkit-scrollbar-thumb { - background-color: rgba(118, 136, 217, 0.3); - border: 1px solid white; - border-radius: 10px; -} -::-webkit-scrollbar-thumb:horizontal { - border-width: 1px 0; -} -::-webkit-scrollbar-thumb:vertical { - border-width: 0 1px; -} -::-webkit-scrollbar-thumb:hover { - background-color: rgba(118, 136, 217, 0.6); -} -::-webkit-scrollbar-thumb:active { - background-color: rgba(118, 136, 217, 0.9); -} #prf_dlg hr { border-top: 1px solid #d7d7d3; border-bottom: 1px solid white; @@ -630,28 +626,6 @@ a:hover { display: none; } } -#splash { - background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #7688d9; -} -#ide { - background-color: #7688d9; -} -#apl_font { - color: #7688d9; -} -::selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -::-moz-selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -body { - font-family: Roboto, sans-serif; -} #sb { background-color: white; border-top: 1px solid #9eabe4; @@ -670,16 +644,6 @@ body { #status_body { background-color: #edeff5; } -#toast-container { - font-family: Roboto; - font-size: 14px; - line-height: 20px; -} -#toast-container > div { - -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - -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; } @@ -718,6 +682,34 @@ body { border: 0 solid #dde0ec; border-right-width: 1px; } +::-webkit-scrollbar { + background-color: white; +} +::-webkit-scrollbar-corner { + background-color: white; +} +::-webkit-scrollbar-track { + background-color: #f0f0f0; + border: 1px solid white; + border-radius: 10px; +} +::-webkit-scrollbar-thumb { + background-color: rgba(118, 136, 217, 0.3); + border: 1px solid white; + border-radius: 10px; +} +::-webkit-scrollbar-thumb:horizontal { + border-width: 1px 0; +} +::-webkit-scrollbar-thumb:vertical { + border-width: 0 1px; +} +::-webkit-scrollbar-thumb:hover { + background-color: rgba(118, 136, 217, 0.6); +} +::-webkit-scrollbar-thumb:active { + background-color: rgba(118, 136, 217, 0.9); +} #vt_bln { border: solid black 1px; background-color: black; @@ -726,6 +718,38 @@ body { #vt_tri { border-color: black; } +#splash { + background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #7688d9; +} +#ide { + background-color: #7688d9; +} +#apl_font { + color: #7688d9; +} +::selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +::-moz-selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +body { + font-family: Roboto, sans-serif; +} +#toast-container { + font-family: Roboto; + font-size: 14px; + line-height: 20px; +} +#toast-container > div { + -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); +} #wse { background-color: white; color: black; @@ -742,27 +766,3 @@ body { background-color: rgba(118, 136, 217, 0.5); outline: rgba(118, 136, 217, 0.5); } -.ctl_listview { - background-color: white; - color: black; -} -.ctl_listview tr { - background-color: rgba(118, 136, 217, 0.5); - border-bottom: 1px solid white; -} -.ctl_listview tr:hover { - background-color: rgba(118, 136, 217, 0.25); -} -.ctl_listview tr.selected { - background-color: #9eabe4; -} -#debug { - background: white; -} -#debug .ctl_listview_header { - background-color: #7688d9; - color: white; -} -#debug .ctl_listview_header h2 { - font-size: 16px; -} diff --git a/style/ride-base.css b/style/ride-base.css index eb2067480..c773ec1e2 100644 --- a/style/ride-base.css +++ b/style/ride-base.css @@ -1,3 +1,37 @@ +.ctl_listview { + width: 100%; + font-family: apl; + line-height: 1.3em; + overflow-x: auto; + overflow-y: auto; +} +.ctl_listview tr { + cursor: pointer; +} +.ctl_listview td { + padding: 3px 10px; +} +#threads > table, +#sistack > table { + width: 100%; +} +#debug { + height: inherit; +} +#debug > div { + height: 50%; + display: block; +} +#debug .ctl_listview_header { + height: 14px; + padding: 5px; +} +#threads { + height: calc(100% - 60px); +} +#sistack { + height: calc(100% - 24px); +} #cn { position: absolute; z-index: 2; @@ -157,40 +191,6 @@ #cn_env { width: 100%; } -.ctl_listview { - width: 100%; - font-family: apl; - line-height: 1.3em; - overflow-x: auto; - overflow-y: auto; -} -.ctl_listview tr { - cursor: pointer; -} -.ctl_listview td { - padding: 3px 10px; -} -#threads > table, -#sistack > table { - width: 100%; -} -#debug { - height: inherit; -} -#debug > div { - height: 50%; - display: block; -} -#debug .ctl_listview_header { - height: 14px; - padding: 5px; -} -#threads { - height: calc(100% - 60px); -} -#sistack { - height: calc(100% - 24px); -} /*various dialogs*/ #dlg_modal_overlay { width: 100%; @@ -399,78 +399,6 @@ .lm_splitter { opacity: 1 !important; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); - font-weight: 100; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Black.ttf') format('truetype'); - font-weight: 900; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; -} button { border: none; font-family: Roboto; @@ -544,6 +472,78 @@ textarea { border: none; padding: 0; } +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} /*jQuery UI - v1.10.4 - 2014-01-17, heavily customized*/ .ui-helper-hidden { display: none; @@ -1045,19 +1045,6 @@ body .ui-tooltip { text-align: center; text-transform: uppercase; } -.monaco-editor .no-icons .icon { - display: none!important; -} -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main, -.monaco-editor-hover .monaco-tokenized-source { - white-space: pre!important; -} -.pendent .monaco-editor .cursor { - visibility: hidden!important; -} -.pendent .tb_btn { - pointer-events: none; -} /*menu (see ../src/menu.js for the DOM structure)*/ .menu { height: 22px; @@ -1261,6 +1248,23 @@ h2 { .hidden { display: none; } +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +.monaco-editor .no-icons .icon { + display: none!important; +} +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main, +.monaco-editor-hover .monaco-tokenized-source { + white-space: pre!important; +} +.pendent .monaco-editor .cursor { + visibility: hidden!important; +} +.pendent .tb_btn { + pointer-events: none; +} #sb { position: absolute; left: 0; @@ -1324,10 +1328,6 @@ h2 { #status .t8 { color: red; } -::-webkit-scrollbar { - width: 10px; - height: 10px; -} .tooltip { width: 16px; height: 16px; @@ -1397,14 +1397,42 @@ h2 { margin: 0 8px 0 0; vertical-align: middle; } -/*IDE page*/ -#splash, -#ide, -body.floating-window { +#vt_bln { + font-family: apl, monospace; + font-size: 18px; position: absolute; - top: 0; - bottom: 0; - left: 0; + padding: 7px; + white-space: pre; + overflow: hidden; +} +#vt_tri { + position: absolute; + border: solid; + border-width: 6px 6px 0 6px; + height: 6px; + bottom: -6px; + border-left-color: transparent!important; + border-right-color: transparent!important; + background-color: transparent!important; + content: ""; +} +#vt_tri.inv { + border-width: 0 6px 6px 6px; + margin-top: -6px; + bottom: auto; +} +.vt_marker { + border: dotted transparent 2px; + margin: -2px; +} +/*IDE page*/ +#splash, +#ide, +body.floating-window { + position: absolute; + top: 0; + bottom: 0; + left: 0; right: 0; } .ride_win { @@ -1437,145 +1465,28 @@ body.floating-window { padding: 0!important; height: auto!important; } -/*workspace explorer*/ -/*variable*/ -/*field*/ -/*property*/ -/*external shared variable*/ -/*tradfn*/ -/*dfn*/ -/*derived or primitive function*/ -/*external function*/ -/*tradop*/ -/*dop*/ -/*derived or primitive operator*/ -/*user-defined namespace*/ -/*instance*/ -/*class*/ -/*interface*/ -/*external class*/ -/*external interface*/ -#wse { - overflow: auto; - width: 100%; - height: 100%; - white-space: nowrap; - cursor: default; -} -#wse div { - padding-left: 1em; - margin: 2px 0; -} -#wse > div { - padding-left: 2px; -} -#wse .value_tip { - padding-left: 1.5em; -} -#wse .bt_text { - border-radius: 3px; -} -#wse .bt_text::before { - display: inline-block; - width: 1em; - height: 2ex; - border-radius: 30%; - text-align: center; - margin-right: 0.2em; - font-weight: 600; - color: #1c1e28 !important; -} -#wse .bt_node_expand { - display: inline-block; - width: 1em; - height: 0; - text-align: center; - margin-right: 0.2em; - font-family: monospace; - -webkit-font-smoothing: none; - cursor: pointer; - opacity: 0.7; -} -#wse .bt_node_expand:hover { - opacity: 1; -} -#wse .bt_node_indent { - display: inline-block; - width: 1em; - height: 0; - text-align: center; - margin-right: 0.2em; -} -#wse .bt_icon_2_1::before, -#wse .bt_icon_2_2::before, -#wse .bt_icon_2_3::before, -#wse .bt_icon_2_6::before { - content: "v"; - background: #ff5a00; -} -#wse .bt_icon_3_1::before, -#wse .bt_icon_3_2::before, -#wse .bt_icon_3_3::before, -#wse .bt_icon_3_6::before { - content: "f"; - background: #00ff48; -} -#wse .bt_icon_4_1::before, -#wse .bt_icon_4_2::before, -#wse .bt_icon_4_3::before { - content: "o"; - background: #9c00ff; -} -#wse .bt_icon_8_6::before { - content: "e"; - background: #ffd800; -} -#wse .bt_icon_9_1::before, -#wse .bt_icon_1::before, -#wse .bt_icon_9_2::before { - content: "n"; - background: #ffd800; -} -#wse .bt_icon_9_4::before, -#wse .bt_icon_9_6::before { - content: "c"; - background: #ffd800; +/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */ +.ui-tooltip { + z-index: 9999; } -#wse .bt_icon_9_5::before, -#wse .bt_icon_9_7::before { - content: "i"; - background: #ffd800; +#lb_tip { + z-index: 300; } -.bt_collapsed > div { - display: none; +#vt_bln, +#vt_tri { + z-index: 300; } -#vt_bln { - font-family: apl, monospace; - font-size: 18px; - position: absolute; - padding: 7px; - white-space: pre; - overflow: hidden; +.menu .m-box { + z-index: 200; } -#vt_tri { - position: absolute; - border: solid; - border-width: 6px 6px 0 6px; - height: 6px; - bottom: -6px; - border-left-color: transparent!important; - border-right-color: transparent!important; - background-color: transparent!important; - content: ""; +.ui-front { + z-index: 100; } -#vt_tri.inv { - border-width: 0 6px 6px 6px; - margin-top: -6px; - bottom: auto; +.ui-selectable-helper { + z-index: 100; } -.vt_marker { - border: dotted transparent 2px; - margin: -2px; +.lm_splitter { + z-index: 11 !important; } .zoom12 #wse, .zoom12 #debug, @@ -1784,28 +1695,117 @@ body.floating-window { .zoom-10 .toolbar { font-size: 6px; } -/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */ -.ui-tooltip { - z-index: 9999; +/*workspace explorer*/ +/*variable*/ +/*field*/ +/*property*/ +/*external shared variable*/ +/*tradfn*/ +/*dfn*/ +/*derived or primitive function*/ +/*external function*/ +/*tradop*/ +/*dop*/ +/*derived or primitive operator*/ +/*user-defined namespace*/ +/*instance*/ +/*class*/ +/*interface*/ +/*external class*/ +/*external interface*/ +#wse { + overflow: auto; + width: 100%; + height: 100%; + white-space: nowrap; + cursor: default; } -#lb_tip { - z-index: 300; +#wse div { + padding-left: 1em; + margin: 2px 0; } -#vt_bln, -#vt_tri { - z-index: 300; +#wse > div { + padding-left: 2px; } -.menu .m-box { - z-index: 200; +#wse .value_tip { + padding-left: 1.5em; } -.ui-front { - z-index: 100; +#wse .bt_text { + border-radius: 3px; } -.ui-selectable-helper { - z-index: 100; +#wse .bt_text::before { + display: inline-block; + width: 1em; + height: 2ex; + border-radius: 30%; + text-align: center; + margin-right: 0.2em; + font-weight: 600; + color: #1c1e28 !important; } -.lm_splitter { - z-index: 11 !important; +#wse .bt_node_expand { + display: inline-block; + width: 1em; + height: 0; + text-align: center; + margin-right: 0.2em; + font-family: monospace; + -webkit-font-smoothing: none; + cursor: pointer; + opacity: 0.7; +} +#wse .bt_node_expand:hover { + opacity: 1; +} +#wse .bt_node_indent { + display: inline-block; + width: 1em; + height: 0; + text-align: center; + margin-right: 0.2em; +} +#wse .bt_icon_2_1::before, +#wse .bt_icon_2_2::before, +#wse .bt_icon_2_3::before, +#wse .bt_icon_2_6::before { + content: "v"; + background: #ff5a00; +} +#wse .bt_icon_3_1::before, +#wse .bt_icon_3_2::before, +#wse .bt_icon_3_3::before, +#wse .bt_icon_3_6::before { + content: "f"; + background: #00ff48; +} +#wse .bt_icon_4_1::before, +#wse .bt_icon_4_2::before, +#wse .bt_icon_4_3::before { + content: "o"; + background: #9c00ff; +} +#wse .bt_icon_8_6::before { + content: "e"; + background: #ffd800; +} +#wse .bt_icon_9_1::before, +#wse .bt_icon_1::before, +#wse .bt_icon_9_2::before { + content: "n"; + background: #ffd800; +} +#wse .bt_icon_9_4::before, +#wse .bt_icon_9_6::before { + content: "c"; + background: #ffd800; +} +#wse .bt_icon_9_5::before, +#wse .bt_icon_9_7::before { + content: "i"; + background: #ffd800; +} +.bt_collapsed > div { + display: none; } #prf_dlg > hr { margin-top: 0; @@ -1862,6 +1862,24 @@ body.floating-window { display: none; } } +/*Prefs>Code*/ +#code { + overflow: auto; + position: absolute; + top: 54px; + bottom: 70px; + left: 12px; + right: 3px; +} +#code p { + margin: 5px; +} +#code > hr { + margin-top: 5px !important; +} +.web #code { + top: 75px; +} #col_top { text-align: left; padding: 0 8px; @@ -1949,49 +1967,6 @@ body.floating-window { #col.renaming #col_new_name { display: inline; } -/*Prefs>Menu*/ -#pmenu_rst { - float: right; -} -#pmenu p { - margin: 10px 8px; - color: black; -} -#pmenu_ta_wr { - position: absolute; - left: 4px; - right: 4px; - top: 94px; - bottom: 70px; - overflow: hidden; - padding: 4px; -} -.web #pmenu_ta_wr { - top: 120px; -} -#pmenu_ta { - width: 100%; - height: 100%; - resize: none; -} -/*Prefs>Code*/ -#code { - overflow: auto; - position: absolute; - top: 54px; - bottom: 70px; - left: 12px; - right: 3px; -} -#code p { - margin: 5px; -} -#code > hr { - margin-top: 5px !important; -} -.web #code { - top: 75px; -} /*Prefs>Layout*/ /*The arrangement is: +-------+ */ /* | g1 g3 | */ @@ -2192,6 +2167,66 @@ input.lyt_g3:hover { display: none; } } +/*Prefs>Menu*/ +#pmenu_rst { + float: right; +} +#pmenu p { + margin: 10px 8px; + color: black; +} +#pmenu_ta_wr { + position: absolute; + left: 4px; + right: 4px; + top: 94px; + bottom: 70px; + overflow: hidden; + padding: 4px; +} +.web #pmenu_ta_wr { + top: 120px; +} +#pmenu_ta { + width: 100%; + height: 100%; + resize: none; +} +/*Prefs>Title*/ +#title { + text-align: left; + padding: 0 8px; +} +#title pre { + overflow: auto; + position: absolute; + left: 8px; + right: 8px; + top: 125px; + bottom: 70px; +} +#title table { + table-layout: fixed; + width: 100%; + margin-top: 10px; +} +#title table tr { + height: 1.3em; +} +#title table td { + vertical-align: middle; +} +#title table td:nth-child(1) { + width: 30%; +} +#title_inp { + width: calc(100% - 160px); + margin-left: 10px; + padding: 5px 0; +} +#title_rst { + float: right; +} /*Prefs>Shortcuts*/ #shc { position: absolute; @@ -2271,6 +2306,16 @@ input.lyt_g3:hover { margin: 8px 2px; line-height: 24px; white-space: nowrap; + padding: 3px 0; +} +.shc_key .shc_key_btn { + border-radius: 3px; + background-color: grey; + color: white; + display: inline; + margin: 2px; + padding: 2px 4px; + white-space: nowrap; } .shc_text { border-top-right-radius: 0; @@ -2309,41 +2354,6 @@ input.lyt_g3:hover { display: none; } } -/*Prefs>Title*/ -#title { - text-align: left; - padding: 0 8px; -} -#title pre { - overflow: auto; - position: absolute; - left: 8px; - right: 8px; - top: 125px; - bottom: 70px; -} -#title table { - table-layout: fixed; - width: 100%; - margin-top: 10px; -} -#title table tr { - height: 1.3em; -} -#title table td { - vertical-align: middle; -} -#title table td:nth-child(1) { - width: 30%; -} -#title_inp { - width: calc(100% - 160px); - margin-left: 10px; - padding: 5px 0; -} -#title_rst { - float: right; -} /*Prefs>Trace/Edit*/ #wins { overflow-y: auto; From 4c747c0dcd6ab652f1df0f51714ff82ffcf6bf7f Mon Sep 17 00:00:00 2001 From: Gilgamesh Athoraya Date: Mon, 14 Aug 2023 17:53:30 +0200 Subject: [PATCH 2/4] Change styling of duplicate shortcuts --- src/km.js | 1 - src/prf_shc.js | 18 +- style/dark-theme.css | 258 +-- style/less/colour/preferences.less | 12 +- .../layout/preferences/prefs_shortcuts.less | 2 - style/light-theme.css | 354 ++-- style/ride-base.css | 1536 ++++++++--------- 7 files changed, 1093 insertions(+), 1088 deletions(-) diff --git a/src/km.js b/src/km.js index 5b0ef62ee..ad52b40a4 100644 --- a/src/km.js +++ b/src/km.js @@ -355,7 +355,6 @@ const ctrlcmd = { Ctrl: D.mac ? km.WinCtrl : km.CtrlCmd, Cmd: D.mac ? km.CtrlCmd : km.WinCtrl, - Command: km.CtrlCmd, Option: km.Alt, Win: km.WinCtrl, Meta: km.CtrlCmd, diff --git a/src/prf_shc.js b/src/prf_shc.js index 346dad308..af759e6d3 100644 --- a/src/prf_shc.js +++ b/src/prf_shc.js @@ -5,11 +5,11 @@ const updDups = () => { // check for duplicates and make them show in red const a = q.tbl_wr.querySelectorAll('.shc_text'); const h = {}; // h:maps keystrokes to jQuery objects - for (let i = 0; i < a.length; i++) { - const k = a[i].textContent; - a[i].className = h[k] ? (h[k].className = 'shc_text shc_dup') : 'shc_text'; - h[k] = a[i]; - } + [...a].forEach((k) => { + const t = k.title; + k.classList.toggle('shc_dup', !!h[t]) && h[t].classList.add('shc_dup'); + h[t] = k; + }); }; const keyLabels = { Ctrl: '⌃', @@ -83,8 +83,7 @@ }).join('+'); const lbls = keys.map((k) => { let lbl = k; - // eslint-disable-next-line no-nested-ternary - if (k === 'Cmd') lbl = D.mac ? 'Command' : (D.win ? 'Win' : 'Meta'); + if (k === 'Cmd' && !D.mac) lbl = D.win ? 'Win' : 'Meta'; else if (k === 'Alt' && D.mac) lbl = 'Option'; return lbl; }).join('+'); @@ -202,7 +201,10 @@ load() { loadFrom(D.prf.keys()); }, validate() { const dup = q.tbl_wr.getElementsByClassName('shc_dup'); - if (dup.length) return { msg: 'Duplicate shortcuts', el: dup[0] }; + if (dup.length) { + dup[0].scrollIntoViewIfNeeded(); + return { msg: 'Duplicate shortcuts', el: dup[0] }; + } return null; }, print() { diff --git a/style/dark-theme.css b/style/dark-theme.css index 83f0eb435..019ba0b92 100644 --- a/style/dark-theme.css +++ b/style/dark-theme.css @@ -159,6 +159,95 @@ text-align: left; border: 1px solid transparent; } +/*Golden Layout*/ +.lm_goldenlayout { + background: #272937 !important; +} +.lm_goldenlayout .lm_header { + background: #272937 !important; +} +.lm_header, +.lm_content { + border-color: #272937 !important; +} +.lm_dragProxy .lm_content { + box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); +} +.lm_dropTargetIndicator { + box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); + outline: 1px dashed #7688d9; + margin: 1px; + transition: all 200ms ease; +} +.lm_dropTargetIndicator .lm_inner { + background: white; + opacity: 0.1; + filter: alpha(opacity=1); +} +.lm_tab { + letter-spacing: 0.5px; + font-size: 12px; + background-color: #323446 !important; + color: #a9a9a9 !important; + border-right: 1px #272937 solid !important; +} +.lm_tab.lm_active { + background-color: #1c1e28 !important; + border-right: 1px #272937 solid !important; + color: #7688d9 !important; +} +.lm_tab.lm_active .lm_close_tab { + color: #7688d9 !important; +} +.lm_splitter { + background-color: rgba(118, 136, 217, 0.3) !important; +} +.lm_splitter.lm_horizontal { + 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: 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 { + background-image: none !important; + color: #a9a9a9; + font-size: 16px; +} +.lm_header .lm_tab .lm_close_tab::before { + content: "×"; +} +.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { + content: "⬤"; + font-size: 8px; +} +.lm_header .lm_tab:hover .lm_close_tab { + opacity: 1; + color: #7688d9 !important; +} +.lm_controls > li { + background-position: center center; + background-repeat: no-repeat; + position: relative; +} +.lm_controls > li:hover { + 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); +} +.lm_maximised .lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); +} +.lm_transition_indicator { + background-color: white; + border: 1px dashed #7688d9; +} label { color: #a9a9a9; font-family: Roboto; @@ -256,42 +345,6 @@ select { border-top: 1px solid black; border-bottom: 1px solid #2e303e; } -/*menu (see ../src/menu.js for the DOM structure)*/ -.menu { - background-color: #edeff5; - border-bottom: solid grey 1px; -} -.menu a, -.menu a:hover { - color: black; - font-size: 0.8em; -} -.menu .m-open { - background: rgba(0, 0, 0, 0.2); -} -.menu .m-open .m-top { - border-color: transparent; -} -.menu .m-box { - background-color: white; - border-color: rgba(0, 0, 0, 0.2); -} -.menu .m-box a { - border: none; - border-color: #edeff5; -} -.menu .m-box a .m-shc { - color: white; -} -.menu .m-box a:focus { - background: rgba(0, 0, 0, 0.2); -} -.menu .m-box a.m-checked { - background: transparent 5px center no-repeat url(img/menu_chk.png); -} -.menu .m-box a:focus.m-checked { - background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png); -} .breakpointarea { border-right: 1px solid #272937; cursor: pointer; @@ -457,11 +510,13 @@ input.lyt_g3:hover { #shc_tbl_wr tr .shc_key.shc_del_hvr { border-color: red; } -#shc_tbl_wr tr .shc_text.shc_dup { - border-color: red; - background-color: red; +#shc_tbl_wr tr .shc_text .shc_key_btn { + background-color: grey; color: white; } +#shc_tbl_wr tr .shc_text.shc_dup .shc_key_btn { + background-color: red; +} #shc_tbl_wr tr .shc_del { color: red; } @@ -653,95 +708,6 @@ body { border: 0 solid #272937; border-right-width: 1px; } -/*Golden Layout*/ -.lm_goldenlayout { - background: #272937 !important; -} -.lm_goldenlayout .lm_header { - background: #272937 !important; -} -.lm_header, -.lm_content { - border-color: #272937 !important; -} -.lm_dragProxy .lm_content { - box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2); -} -.lm_dropTargetIndicator { - box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4); - outline: 1px dashed #7688d9; - margin: 1px; - transition: all 200ms ease; -} -.lm_dropTargetIndicator .lm_inner { - background: white; - opacity: 0.1; - filter: alpha(opacity=1); -} -.lm_tab { - letter-spacing: 0.5px; - font-size: 12px; - background-color: #323446 !important; - color: #a9a9a9 !important; - border-right: 1px #272937 solid !important; -} -.lm_tab.lm_active { - background-color: #1c1e28 !important; - border-right: 1px #272937 solid !important; - color: #7688d9 !important; -} -.lm_tab.lm_active .lm_close_tab { - color: #7688d9 !important; -} -.lm_splitter { - background-color: rgba(118, 136, 217, 0.3) !important; -} -.lm_splitter.lm_horizontal { - 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: 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 { - background-image: none !important; - color: #a9a9a9; - font-size: 16px; -} -.lm_header .lm_tab .lm_close_tab::before { - content: "×"; -} -.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { - content: "⬤"; - font-size: 8px; -} -.lm_header .lm_tab:hover .lm_close_tab { - opacity: 1; - color: #7688d9 !important; -} -.lm_controls > li { - background-position: center center; - background-repeat: no-repeat; - position: relative; -} -.lm_controls > li:hover { - 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); -} -.lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); -} -.lm_transition_indicator { - background-color: white; - border: 1px dashed #7688d9; -} #vt_bln { border: solid black 1px; background-color: black; @@ -766,3 +732,39 @@ body { background-color: rgba(118, 136, 217, 0.75); outline: rgba(118, 136, 217, 0.75); } +/*menu (see ../src/menu.js for the DOM structure)*/ +.menu { + background-color: #edeff5; + border-bottom: solid grey 1px; +} +.menu a, +.menu a:hover { + color: black; + font-size: 0.8em; +} +.menu .m-open { + background: rgba(0, 0, 0, 0.2); +} +.menu .m-open .m-top { + border-color: transparent; +} +.menu .m-box { + background-color: white; + border-color: rgba(0, 0, 0, 0.2); +} +.menu .m-box a { + border: none; + border-color: #edeff5; +} +.menu .m-box a .m-shc { + color: white; +} +.menu .m-box a:focus { + background: rgba(0, 0, 0, 0.2); +} +.menu .m-box a.m-checked { + background: transparent 5px center no-repeat url(img/menu_chk.png); +} +.menu .m-box a:focus.m-checked { + background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png); +} diff --git a/style/less/colour/preferences.less b/style/less/colour/preferences.less index b998fcae9..38aff8aee 100644 --- a/style/less/colour/preferences.less +++ b/style/less/colour/preferences.less @@ -103,10 +103,14 @@ input.lyt_g1, input.lyt_g3 { border-color: @SHC_KEY_DEL_HVR; } - .shc_text.shc_dup { - border-color: @SHC_DUP; - background-color: @SHC_DUP; - color: @SHC_DUP_COL; + .shc_text { + .shc_key_btn { + background-color: grey; + color: white; + } + &.shc_dup .shc_key_btn { + background-color: @SHC_DUP; + } } .shc_del { diff --git a/style/less/layout/preferences/prefs_shortcuts.less b/style/less/layout/preferences/prefs_shortcuts.less index 7336cd995..0ace8e2fc 100644 --- a/style/less/layout/preferences/prefs_shortcuts.less +++ b/style/less/layout/preferences/prefs_shortcuts.less @@ -77,8 +77,6 @@ padding: 3px 0; .shc_key_btn { border-radius: 3px; - background-color: grey; - color: white; display: inline; margin: 2px; padding: 2px 4px; diff --git a/style/light-theme.css b/style/light-theme.css index 0602ef1ba..046105399 100644 --- a/style/light-theme.css +++ b/style/light-theme.css @@ -5,30 +5,6 @@ cursor: auto; font-family: apl, monospace; } -.ctl_listview { - background-color: white; - color: black; -} -.ctl_listview tr { - background-color: rgba(118, 136, 217, 0.5); - border-bottom: 1px solid white; -} -.ctl_listview tr:hover { - background-color: rgba(118, 136, 217, 0.25); -} -.ctl_listview tr.selected { - background-color: #9eabe4; -} -#debug { - background: white; -} -#debug .ctl_listview_header { - background-color: #7688d9; - color: white; -} -#debug .ctl_listview_header h2 { - font-size: 16px; -} #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]), #cn textarea { border: 1px solid rgba(169, 169, 169, 0.3); @@ -109,6 +85,30 @@ font-size: 16px; font-family: monospace; } +.ctl_listview { + background-color: white; + color: black; +} +.ctl_listview tr { + background-color: rgba(118, 136, 217, 0.5); + border-bottom: 1px solid white; +} +.ctl_listview tr:hover { + background-color: rgba(118, 136, 217, 0.25); +} +.ctl_listview tr.selected { + background-color: #9eabe4; +} +#debug { + background: white; +} +#debug .ctl_listview_header { + background-color: #7688d9; + color: white; +} +#debug .ctl_listview_header h2 { + font-size: 16px; +} /*various dialogs*/ #dlg_modal_overlay { background-color: black; @@ -159,95 +159,6 @@ text-align: left; border: 1px solid transparent; } -/*Golden Layout*/ -.lm_goldenlayout { - background: #dde0ec !important; -} -.lm_goldenlayout .lm_header { - background: #dde0ec !important; -} -.lm_header, -.lm_content { - border-color: #dde0ec !important; -} -.lm_dragProxy .lm_content { - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); -} -.lm_dropTargetIndicator { - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); - outline: 1px dashed #7688d9; - margin: 1px; - transition: all 200ms ease; -} -.lm_dropTargetIndicator .lm_inner { - background: black; - opacity: 0.1; - filter: alpha(opacity=1); -} -.lm_tab { - letter-spacing: 0.5px; - font-size: 12px; - background-color: #edeff5 !important; - color: #4c4a4a !important; - border-right: 1px #dde0ec solid !important; -} -.lm_tab.lm_active { - background-color: white !important; - border-right: 1px #dde0ec solid !important; - color: #2d42a2 !important; -} -.lm_tab.lm_active .lm_close_tab { - color: #2d42a2 !important; -} -.lm_splitter { - background-color: rgba(118, 136, 217, 0.3) !important; -} -.lm_splitter.lm_horizontal { - background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important; - box-shadow: -1px 0 0 #9eabe4 inset, 1px 0 0 #9eabe4 inset; -} -.lm_splitter.lm_vertical { - background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important; - box-shadow: 0 -1px 0 #9eabe4 inset, 0 1px 0 #9eabe4 inset; -} -.lm_header .lm_tab .lm_close_tab { - background-image: none !important; - color: #4c4a4a; - font-size: 16px; -} -.lm_header .lm_tab .lm_close_tab::before { - content: "×"; -} -.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { - content: "⬤"; - font-size: 8px; -} -.lm_header .lm_tab:hover .lm_close_tab { - opacity: 1; - color: #2d42a2 !important; -} -.lm_controls > li { - background-position: center center; - background-repeat: no-repeat; - position: relative; -} -.lm_controls > li:hover { - opacity: 1; - filter: alpha(opacity=100); -} -.lm_header .lm_controls .lm_tabdropdown:before { - color: #4c4a4a !important; -} -.lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==); -} -.lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=); -} -.lm_transition_indicator { - background-color: black; - border: 1px dashed #7688d9; -} label { color: #4c4a4a; font-family: Roboto; @@ -546,11 +457,13 @@ input.lyt_g3:hover { #shc_tbl_wr tr .shc_key.shc_del_hvr { border-color: red; } -#shc_tbl_wr tr .shc_text.shc_dup { - border-color: red; - background-color: red; +#shc_tbl_wr tr .shc_text .shc_key_btn { + background-color: grey; color: white; } +#shc_tbl_wr tr .shc_text.shc_dup .shc_key_btn { + background-color: red; +} #shc_tbl_wr tr .shc_del { color: red; } @@ -626,6 +539,56 @@ a:hover { display: none; } } +::-webkit-scrollbar { + background-color: white; +} +::-webkit-scrollbar-corner { + background-color: white; +} +::-webkit-scrollbar-track { + background-color: #f0f0f0; + border: 1px solid white; + border-radius: 10px; +} +::-webkit-scrollbar-thumb { + background-color: rgba(118, 136, 217, 0.3); + border: 1px solid white; + border-radius: 10px; +} +::-webkit-scrollbar-thumb:horizontal { + border-width: 1px 0; +} +::-webkit-scrollbar-thumb:vertical { + border-width: 0 1px; +} +::-webkit-scrollbar-thumb:hover { + background-color: rgba(118, 136, 217, 0.6); +} +::-webkit-scrollbar-thumb:active { + background-color: rgba(118, 136, 217, 0.9); +} +#splash { + background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #7688d9; +} +#ide { + background-color: #7688d9; +} +#apl_font { + color: #7688d9; +} +::selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +::-moz-selection { + background: #7688d9; + color: white; +} +/*must be separate rules*/ +body { + font-family: Roboto, sans-serif; +} #sb { background-color: white; border-top: 1px solid #9eabe4; @@ -644,6 +607,16 @@ a:hover { #status_body { background-color: #edeff5; } +#toast-container { + font-family: Roboto; + font-size: 14px; + line-height: 20px; +} +#toast-container > div { + -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); + -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; } @@ -655,6 +628,95 @@ a:hover { .tooltip .tooltiptext::after { border-color: transparent #dde0ec transparent transparent; } +/*Golden Layout*/ +.lm_goldenlayout { + background: #dde0ec !important; +} +.lm_goldenlayout .lm_header { + background: #dde0ec !important; +} +.lm_header, +.lm_content { + border-color: #dde0ec !important; +} +.lm_dragProxy .lm_content { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} +.lm_dropTargetIndicator { + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4); + outline: 1px dashed #7688d9; + margin: 1px; + transition: all 200ms ease; +} +.lm_dropTargetIndicator .lm_inner { + background: black; + opacity: 0.1; + filter: alpha(opacity=1); +} +.lm_tab { + letter-spacing: 0.5px; + font-size: 12px; + background-color: #edeff5 !important; + color: #4c4a4a !important; + border-right: 1px #dde0ec solid !important; +} +.lm_tab.lm_active { + background-color: white !important; + border-right: 1px #dde0ec solid !important; + color: #2d42a2 !important; +} +.lm_tab.lm_active .lm_close_tab { + color: #2d42a2 !important; +} +.lm_splitter { + background-color: rgba(118, 136, 217, 0.3) !important; +} +.lm_splitter.lm_horizontal { + background: rgba(118, 136, 217, 0.3) url(img/grabber_vert.png) no-repeat center !important; + box-shadow: -1px 0 0 #9eabe4 inset, 1px 0 0 #9eabe4 inset; +} +.lm_splitter.lm_vertical { + background: rgba(118, 136, 217, 0.3) url(img/grabber_hor.png) no-repeat center !important; + box-shadow: 0 -1px 0 #9eabe4 inset, 0 1px 0 #9eabe4 inset; +} +.lm_header .lm_tab .lm_close_tab { + background-image: none !important; + color: #4c4a4a; + font-size: 16px; +} +.lm_header .lm_tab .lm_close_tab::before { + content: "×"; +} +.lm_header .lm_tab .lm_close_tab.modified:not(:hover)::before { + content: "⬤"; + font-size: 8px; +} +.lm_header .lm_tab:hover .lm_close_tab { + opacity: 1; + color: #2d42a2 !important; +} +.lm_controls > li { + background-position: center center; + background-repeat: no-repeat; + position: relative; +} +.lm_controls > li:hover { + opacity: 1; + filter: alpha(opacity=100); +} +.lm_header .lm_controls .lm_tabdropdown:before { + color: #4c4a4a !important; +} +.lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==); +} +.lm_maximised .lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=); +} +.lm_transition_indicator { + background-color: black; + border: 1px dashed #7688d9; +} .toolbar { background-color: white; border-bottom: 1px solid #dde0ec; @@ -682,34 +744,6 @@ a:hover { border: 0 solid #dde0ec; border-right-width: 1px; } -::-webkit-scrollbar { - background-color: white; -} -::-webkit-scrollbar-corner { - background-color: white; -} -::-webkit-scrollbar-track { - background-color: #f0f0f0; - border: 1px solid white; - border-radius: 10px; -} -::-webkit-scrollbar-thumb { - background-color: rgba(118, 136, 217, 0.3); - border: 1px solid white; - border-radius: 10px; -} -::-webkit-scrollbar-thumb:horizontal { - border-width: 1px 0; -} -::-webkit-scrollbar-thumb:vertical { - border-width: 0 1px; -} -::-webkit-scrollbar-thumb:hover { - background-color: rgba(118, 136, 217, 0.6); -} -::-webkit-scrollbar-thumb:active { - background-color: rgba(118, 136, 217, 0.9); -} #vt_bln { border: solid black 1px; background-color: black; @@ -718,38 +752,6 @@ a:hover { #vt_tri { border-color: black; } -#splash { - background: url(img/RideLogo.png) center no-repeat, url(img/bg.jpg) center no-repeat #7688d9; -} -#ide { - background-color: #7688d9; -} -#apl_font { - color: #7688d9; -} -::selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -::-moz-selection { - background: #7688d9; - color: white; -} -/*must be separate rules*/ -body { - font-family: Roboto, sans-serif; -} -#toast-container { - font-family: Roboto; - font-size: 14px; - line-height: 20px; -} -#toast-container > div { - -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); -} #wse { background-color: white; color: black; diff --git a/style/ride-base.css b/style/ride-base.css index c773ec1e2..6387629f9 100644 --- a/style/ride-base.css +++ b/style/ride-base.css @@ -1,37 +1,3 @@ -.ctl_listview { - width: 100%; - font-family: apl; - line-height: 1.3em; - overflow-x: auto; - overflow-y: auto; -} -.ctl_listview tr { - cursor: pointer; -} -.ctl_listview td { - padding: 3px 10px; -} -#threads > table, -#sistack > table { - width: 100%; -} -#debug { - height: inherit; -} -#debug > div { - height: 50%; - display: block; -} -#debug .ctl_listview_header { - height: 14px; - padding: 5px; -} -#threads { - height: calc(100% - 60px); -} -#sistack { - height: calc(100% - 24px); -} #cn { position: absolute; z-index: 2; @@ -191,253 +157,151 @@ #cn_env { width: 100%; } -/*various dialogs*/ -#dlg_modal_overlay { +.ctl_listview { width: 100%; - height: 100%; - position: absolute; -} -.dlg { - position: absolute; -} -.dlg_title { - cursor: default; - text-align: center; - padding-top: 0.5ex; - font-size: large; - cursor: move; -} -#prf_dlg .dlg_title { - text-transform: uppercase; + font-family: apl; + line-height: 1.3em; + overflow-x: auto; + overflow-y: auto; } -.dlg_close { - width: 2ex; - height: 2ex; - position: relative; - display: block; - text-align: center; - text-decoration: none; +.ctl_listview tr { cursor: pointer; - top: -0.5ex; - float: right; } -.dlg_btns { - padding: 14px; - text-align: center; - position: absolute; - bottom: 0; - left: 0; - right: 0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; +.ctl_listview td { + padding: 3px 10px; } -.dlg_btns button { - min-width: 75px; - margin: 0 8px; - padding: 8px; +#threads > table, +#sistack > table { + width: 100%; } -.dlg_btns button.task { +#debug { + height: inherit; +} +#debug > div { + height: 50%; display: block; - margin: 10px 5px; - width: 100%; - width: -moz-available; - /* WebKit-based browsers will ignore this. */ - width: -webkit-fill-available; - /* Mozilla-based browsers will ignore this. */ - width: fill-available; } -.dlg_btns button.task:hover, -.dlg_btns button.task:focus { - border: 1px solid; +#debug .ctl_listview_header { + height: 14px; + padding: 5px; } -.dlg_btns button.task .task_detail { - font-size: smaller; +#threads { + height: calc(100% - 60px); } -.dlg_btns button.task .btn_icon { - float: left; - font-size: 20px; - padding: 0 10px; +#sistack { + height: calc(100% - 24px); } -.dlg_icon_warn { - background-image: url(img/dlg_warn.png); +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; } -.dlg_icon_info { - background-image: url(img/dlg_info.png); +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; } -.dlg_icon_error { - background-image: url(img/dlg_error.png); +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; } -.dlg_icon_query { - background-image: url(img/dlg_query.png); +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; } -/*generic dialog for processing OptionsDialog,StringDialog,TaskDialog*/ -#gd.dlg { - position: absolute; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; } -#gd.dlg.floating { - position: static; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; } -#gd_btns { - position: static; - padding: 8px 0; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; } -#gd_icon { - margin: 1em 1em 2em; - width: 128px; - height: 128px; - float: left; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; } -#gd_content { - padding: 1em; - line-height: 1.5; - /* margin-bottom: 60px; */ +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; } -#gd_content input { - width: 100%; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; } -#gd_footer { - min-height: 40px; - padding: 8px; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; } -#gd_footer label { - vertical-align: text-top; +@font-face { + font-family: 'Roboto'; + src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; } -#gd_footer_btns { - float: right; +button { + border: none; + font-family: Roboto; + font-weight: bold; + padding: 5px 0.5em; + transition: box-shadow 0.2s; + text-transform: uppercase; + cursor: pointer; } -#gd_footer_btns button { - min-width: 75px; - margin: 0 8px; - padding: 8px; +button:active { + box-shadow: none; } -.ui-dialog .ui-dialog-content.task_dlg { +label input[type=checkbox] { + position: relative; + vertical-align: text-bottom; +} +input[type=checkbox] { + -webkit-appearance: none; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 8px; + border-radius: 3px; + display: inline-block; + position: relative; + margin: 0 5px 0 0; } -.ui-dialog .ui-dialog-content.task_dlg p { - text-align: left; +input[type=checkbox]:focus { + outline: none; + margin-right: 5px; } -.ui-dialog .ui-dialog-content.task_dlg .subtext, -.ui-dialog .ui-dialog-content.task_dlg .footer { - font-size: 12px; +input[type=checkbox]:checked::after { + content: '\2714'; + font-size: 11px; + position: absolute; + top: 0px; + left: 4px; } -.ui-dialog .ui-dialog-content.task_dlg .task { - display: block; - width: 100%; - margin-top: 2px; -} -/*About dialog*/ -#abt { - padding: 0; - margin: 0; -} -#abt.floating { - top: 0; - left: 0; - width: 100%; - height: 100%; -} -#abt_logo { - background: 16px center no-repeat url(img/dyalog.png); - height: 80px; - line-height: 20px; - cursor: move; -} -.floating #abt_logo { - cursor: default; -} -#abt_contact { - float: right; - text-align: right; - padding: 12px; - cursor: default; -} -#abt_contact a, -#abt_contact a:visited, -#abt_contact a:active { - text-decoration: none; -} -#abt_ta_wr { - position: absolute; - left: 5px; - right: 5px; - top: 86px; - bottom: 70px; - width: auto; -} -#abt_ta { - font-family: monospace; - font-size: 14px; - white-space: pre; - word-wrap: normal; - overflow-x: scroll; - width: 100%; - height: 100%; - resize: none; -} -.lm_content { - border: none !important; -} -.lm_header .lm_tab { - padding: 5px 15px 5px 10px !important; - margin-top: 0!important; - height: 15px!important; -} -.lm_header .lm_tab .lm_title { - font-family: apl, monospace !important; - padding: 0px 10px 2px 0px; -} -.lm_header .lm_tab .lm_close_tab { - right: 6px !important; -} -.lm_header .lm_tab .lm_close_tab:not(.modified), -.lm_header .lm_tab .lm_close_tab:hover { - top: 4px !important; -} -.lm_close { - display: none !important; -} -.lm_splitter { - opacity: 1 !important; -} -button { - border: none; - font-family: Roboto; - font-weight: bold; - padding: 5px 0.5em; - transition: box-shadow 0.2s; - text-transform: uppercase; - cursor: pointer; -} -button:active { - box-shadow: none; -} -label input[type=checkbox] { - position: relative; - vertical-align: text-bottom; -} -input[type=checkbox] { - -webkit-appearance: none; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); - padding: 8px; - border-radius: 3px; - display: inline-block; - position: relative; - margin: 0 5px 0 0; -} -input[type=checkbox]:focus { - outline: none; - margin-right: 5px; -} -input[type=checkbox]:checked::after { - content: '\2714'; - font-size: 11px; - position: absolute; - top: 0px; - left: 4px; -} -input[type=checkbox][hidden], -input[type=checkbox][hidden] + label { - display: none; +input[type=checkbox][hidden], +input[type=checkbox][hidden] + label { + display: none; } input, textarea, @@ -472,78 +336,6 @@ textarea { border: none; padding: 0; } -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype'); - font-weight: 100; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-Black.ttf') format('truetype'); - font-weight: 900; - font-style: normal; -} -@font-face { - font-family: 'Roboto'; - src: url('./fonts/Roboto-BlackItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; -} /*jQuery UI - v1.10.4 - 2014-01-17, heavily customized*/ .ui-helper-hidden { display: none; @@ -1002,58 +794,223 @@ body .ui-tooltip { .ui-icon-closethick { background: no-repeat center center url(img/close.png); } -#lb { - font-family: apl, monospace; - font-size: 18px; - cursor: default; +.lm_content { + border: none !important; } -#lb b { - font-weight: normal; - width: 1em; - padding: 3px; - display: inline-block; - text-align: center; - border-radius: 50%; - margin-right: -4px; +.lm_header .lm_tab { + padding: 5px 15px 5px 10px !important; + margin-top: 0!important; + height: 15px!important; } -#lb .lb_placeholder { - vertical-align: bottom; +.lm_header .lm_tab .lm_title { + font-family: apl, monospace !important; + padding: 0px 10px 2px 0px; } -#lb .ui-sortable-helper { - cursor: move; +.lm_header .lm_tab .lm_close_tab { + right: 6px !important; } -#lb_prf { - float: right; - padding: 4px 12px; +.lm_header .lm_tab .lm_close_tab:not(.modified), +.lm_header .lm_tab .lm_close_tab:hover { + top: 4px !important; } -#lb_tip { - font-family: apl, monospace; - font-size: 18px; - position: absolute; - border-radius: 2px; +.lm_close { + display: none !important; } -#lb_tip hr { - margin: 0; +.lm_splitter { + opacity: 1 !important; } -#lb_tip div { - padding: 8px; +/*various dialogs*/ +#dlg_modal_overlay { + width: 100%; + height: 100%; + position: absolute; } -#lb_tip_body { - overflow: auto; +.dlg { + position: absolute; } -#lb_tip_desc { +.dlg_title { + cursor: default; text-align: center; + padding-top: 0.5ex; + font-size: large; + cursor: move; +} +#prf_dlg .dlg_title { text-transform: uppercase; } -/*menu (see ../src/menu.js for the DOM structure)*/ -.menu { - height: 22px; - line-height: 21px; - cursor: default; - padding: 0; - margin: 0; - font-family: Roboto, sans-serif; - user-select: none; +.dlg_close { + width: 2ex; + height: 2ex; + position: relative; + display: block; + text-align: center; + text-decoration: none; + cursor: pointer; + top: -0.5ex; + float: right; +} +.dlg_btns { + padding: 14px; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.dlg_btns button { + min-width: 75px; + margin: 0 8px; + padding: 8px; +} +.dlg_btns button.task { + display: block; + margin: 10px 5px; + width: 100%; + width: -moz-available; + /* WebKit-based browsers will ignore this. */ + width: -webkit-fill-available; + /* Mozilla-based browsers will ignore this. */ + width: fill-available; +} +.dlg_btns button.task:hover, +.dlg_btns button.task:focus { + border: 1px solid; +} +.dlg_btns button.task .task_detail { + font-size: smaller; +} +.dlg_btns button.task .btn_icon { + float: left; + font-size: 20px; + padding: 0 10px; +} +.dlg_icon_warn { + background-image: url(img/dlg_warn.png); +} +.dlg_icon_info { + background-image: url(img/dlg_info.png); +} +.dlg_icon_error { + background-image: url(img/dlg_error.png); +} +.dlg_icon_query { + background-image: url(img/dlg_query.png); +} +/*generic dialog for processing OptionsDialog,StringDialog,TaskDialog*/ +#gd.dlg { + position: absolute; +} +#gd.dlg.floating { + position: static; +} +#gd_btns { + position: static; + padding: 8px 0; +} +#gd_icon { + margin: 1em 1em 2em; + width: 128px; + height: 128px; + float: left; +} +#gd_content { + padding: 1em; + line-height: 1.5; + /* margin-bottom: 60px; */ +} +#gd_content input { + width: 100%; +} +#gd_footer { + min-height: 40px; + padding: 8px; +} +#gd_footer label { + vertical-align: text-top; +} +#gd_footer_btns { + float: right; +} +#gd_footer_btns button { + min-width: 75px; + margin: 0 8px; + padding: 8px; +} +.ui-dialog .ui-dialog-content.task_dlg { + padding: 8px; +} +.ui-dialog .ui-dialog-content.task_dlg p { + text-align: left; +} +.ui-dialog .ui-dialog-content.task_dlg .subtext, +.ui-dialog .ui-dialog-content.task_dlg .footer { + font-size: 12px; +} +.ui-dialog .ui-dialog-content.task_dlg .task { + display: block; + width: 100%; + margin-top: 2px; +} +/*About dialog*/ +#abt { + padding: 0; + margin: 0; +} +#abt.floating { + top: 0; + left: 0; + width: 100%; + height: 100%; +} +#abt_logo { + background: 16px center no-repeat url(img/dyalog.png); + height: 80px; + line-height: 20px; + cursor: move; +} +.floating #abt_logo { + cursor: default; +} +#abt_contact { + float: right; + text-align: right; + padding: 12px; + cursor: default; +} +#abt_contact a, +#abt_contact a:visited, +#abt_contact a:active { + text-decoration: none; +} +#abt_ta_wr { + position: absolute; + left: 5px; + right: 5px; + top: 86px; + bottom: 70px; + width: auto; +} +#abt_ta { + font-family: monospace; + font-size: 14px; + white-space: pre; + word-wrap: normal; + overflow-x: scroll; + width: 100%; + height: 100%; + resize: none; +} +/*menu (see ../src/menu.js for the DOM structure)*/ +.menu { + height: 22px; + line-height: 21px; + cursor: default; + padding: 0; + margin: 0; + font-family: Roboto, sans-serif; + user-select: none; } .menu a { text-decoration: none; @@ -1102,6 +1059,62 @@ body .ui-tooltip { .menu hr { margin: 3px 0 5px 0; } +.monaco-editor .no-icons .icon { + display: none!important; +} +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main, +.monaco-editor-hover .monaco-tokenized-source { + white-space: pre!important; +} +.pendent .monaco-editor .cursor { + visibility: hidden!important; +} +.pendent .tb_btn { + pointer-events: none; +} +#lb { + font-family: apl, monospace; + font-size: 18px; + cursor: default; +} +#lb b { + font-weight: normal; + width: 1em; + padding: 3px; + display: inline-block; + text-align: center; + border-radius: 50%; + margin-right: -4px; +} +#lb .lb_placeholder { + vertical-align: bottom; +} +#lb .ui-sortable-helper { + cursor: move; +} +#lb_prf { + float: right; + padding: 4px 12px; +} +#lb_tip { + font-family: apl, monospace; + font-size: 18px; + position: absolute; + border-radius: 2px; +} +#lb_tip hr { + margin: 0; +} +#lb_tip div { + padding: 8px; +} +#lb_tip_body { + overflow: auto; +} +#lb_tip_desc { + text-align: center; + text-transform: uppercase; +} /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, @@ -1252,23 +1265,37 @@ h2 { width: 10px; height: 10px; } -.monaco-editor .no-icons .icon { - display: none!important; +/*Status window*/ +/*info*/ +/*error*/ +/*warning*/ +/*.Net function overload clash overload*/ +#status_body { + overflow: scroll; } -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main, -.monaco-editor-hover .monaco-tokenized-source { - white-space: pre!important; +#status { + font-family: apl, monospace; + white-space: pre; } -.pendent .monaco-editor .cursor { - visibility: hidden!important; +#status .m { + padding: 1px 8px; } -.pendent .tb_btn { - pointer-events: none; +#status .t1 { + color: green; } -#sb { - position: absolute; - left: 0; - right: 0; +#status .t2 { + color: red; +} +#status .t4 { + color: blue; +} +#status .t8 { + color: red; +} +#sb { + position: absolute; + left: 0; + right: 0; bottom: 0; display: flex; justify-content: space-between; @@ -1301,33 +1328,6 @@ h2 { #sb_busy { padding: 2px 6px 3px; } -/*Status window*/ -/*info*/ -/*error*/ -/*warning*/ -/*.Net function overload clash overload*/ -#status_body { - overflow: scroll; -} -#status { - font-family: apl, monospace; - white-space: pre; -} -#status .m { - padding: 1px 8px; -} -#status .t1 { - color: green; -} -#status .t2 { - color: red; -} -#status .t4 { - color: blue; -} -#status .t8 { - color: red; -} .tooltip { width: 16px; height: 16px; @@ -1425,6 +1425,29 @@ h2 { border: dotted transparent 2px; margin: -2px; } +/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */ +.ui-tooltip { + z-index: 9999; +} +#lb_tip { + z-index: 300; +} +#vt_bln, +#vt_tri { + z-index: 300; +} +.menu .m-box { + z-index: 200; +} +.ui-front { + z-index: 100; +} +.ui-selectable-helper { + z-index: 100; +} +.lm_splitter { + z-index: 11 !important; +} /*IDE page*/ #splash, #ide, @@ -1465,28 +1488,117 @@ body.floating-window { padding: 0!important; height: auto!important; } -/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */ -.ui-tooltip { - z-index: 9999; +/*workspace explorer*/ +/*variable*/ +/*field*/ +/*property*/ +/*external shared variable*/ +/*tradfn*/ +/*dfn*/ +/*derived or primitive function*/ +/*external function*/ +/*tradop*/ +/*dop*/ +/*derived or primitive operator*/ +/*user-defined namespace*/ +/*instance*/ +/*class*/ +/*interface*/ +/*external class*/ +/*external interface*/ +#wse { + overflow: auto; + width: 100%; + height: 100%; + white-space: nowrap; + cursor: default; } -#lb_tip { - z-index: 300; +#wse div { + padding-left: 1em; + margin: 2px 0; } -#vt_bln, -#vt_tri { - z-index: 300; +#wse > div { + padding-left: 2px; } -.menu .m-box { - z-index: 200; +#wse .value_tip { + padding-left: 1.5em; } -.ui-front { - z-index: 100; +#wse .bt_text { + border-radius: 3px; } -.ui-selectable-helper { - z-index: 100; +#wse .bt_text::before { + display: inline-block; + width: 1em; + height: 2ex; + border-radius: 30%; + text-align: center; + margin-right: 0.2em; + font-weight: 600; + color: #1c1e28 !important; } -.lm_splitter { - z-index: 11 !important; +#wse .bt_node_expand { + display: inline-block; + width: 1em; + height: 0; + text-align: center; + margin-right: 0.2em; + font-family: monospace; + -webkit-font-smoothing: none; + cursor: pointer; + opacity: 0.7; +} +#wse .bt_node_expand:hover { + opacity: 1; +} +#wse .bt_node_indent { + display: inline-block; + width: 1em; + height: 0; + text-align: center; + margin-right: 0.2em; +} +#wse .bt_icon_2_1::before, +#wse .bt_icon_2_2::before, +#wse .bt_icon_2_3::before, +#wse .bt_icon_2_6::before { + content: "v"; + background: #ff5a00; +} +#wse .bt_icon_3_1::before, +#wse .bt_icon_3_2::before, +#wse .bt_icon_3_3::before, +#wse .bt_icon_3_6::before { + content: "f"; + background: #00ff48; +} +#wse .bt_icon_4_1::before, +#wse .bt_icon_4_2::before, +#wse .bt_icon_4_3::before { + content: "o"; + background: #9c00ff; +} +#wse .bt_icon_8_6::before { + content: "e"; + background: #ffd800; +} +#wse .bt_icon_9_1::before, +#wse .bt_icon_1::before, +#wse .bt_icon_9_2::before { + content: "n"; + background: #ffd800; +} +#wse .bt_icon_9_4::before, +#wse .bt_icon_9_6::before { + content: "c"; + background: #ffd800; +} +#wse .bt_icon_9_5::before, +#wse .bt_icon_9_7::before { + content: "i"; + background: #ffd800; +} +.bt_collapsed > div { + display: none; } .zoom12 #wse, .zoom12 #debug, @@ -1695,191 +1807,6 @@ body.floating-window { .zoom-10 .toolbar { font-size: 6px; } -/*workspace explorer*/ -/*variable*/ -/*field*/ -/*property*/ -/*external shared variable*/ -/*tradfn*/ -/*dfn*/ -/*derived or primitive function*/ -/*external function*/ -/*tradop*/ -/*dop*/ -/*derived or primitive operator*/ -/*user-defined namespace*/ -/*instance*/ -/*class*/ -/*interface*/ -/*external class*/ -/*external interface*/ -#wse { - overflow: auto; - width: 100%; - height: 100%; - white-space: nowrap; - cursor: default; -} -#wse div { - padding-left: 1em; - margin: 2px 0; -} -#wse > div { - padding-left: 2px; -} -#wse .value_tip { - padding-left: 1.5em; -} -#wse .bt_text { - border-radius: 3px; -} -#wse .bt_text::before { - display: inline-block; - width: 1em; - height: 2ex; - border-radius: 30%; - text-align: center; - margin-right: 0.2em; - font-weight: 600; - color: #1c1e28 !important; -} -#wse .bt_node_expand { - display: inline-block; - width: 1em; - height: 0; - text-align: center; - margin-right: 0.2em; - font-family: monospace; - -webkit-font-smoothing: none; - cursor: pointer; - opacity: 0.7; -} -#wse .bt_node_expand:hover { - opacity: 1; -} -#wse .bt_node_indent { - display: inline-block; - width: 1em; - height: 0; - text-align: center; - margin-right: 0.2em; -} -#wse .bt_icon_2_1::before, -#wse .bt_icon_2_2::before, -#wse .bt_icon_2_3::before, -#wse .bt_icon_2_6::before { - content: "v"; - background: #ff5a00; -} -#wse .bt_icon_3_1::before, -#wse .bt_icon_3_2::before, -#wse .bt_icon_3_3::before, -#wse .bt_icon_3_6::before { - content: "f"; - background: #00ff48; -} -#wse .bt_icon_4_1::before, -#wse .bt_icon_4_2::before, -#wse .bt_icon_4_3::before { - content: "o"; - background: #9c00ff; -} -#wse .bt_icon_8_6::before { - content: "e"; - background: #ffd800; -} -#wse .bt_icon_9_1::before, -#wse .bt_icon_1::before, -#wse .bt_icon_9_2::before { - content: "n"; - background: #ffd800; -} -#wse .bt_icon_9_4::before, -#wse .bt_icon_9_6::before { - content: "c"; - background: #ffd800; -} -#wse .bt_icon_9_5::before, -#wse .bt_icon_9_7::before { - content: "i"; - background: #ffd800; -} -.bt_collapsed > div { - display: none; -} -#prf_dlg > hr { - margin-top: 0; - margin-bottom: 15px; -} -#prf_nav { - display: inline-block; - width: 100%; -} -#prf_nav a { - float: left; - height: 13px; - padding: 4px 12px 4px 12px; - text-decoration: none; - color: #4c4a4a; - margin: 11px 5px 8px; -} -#prf_print { - font-size: 20px; - float: right; - margin: 7px 20px 0px 0px; - width: 28px; -} -#prf_content { - margin-top: -2px; - padding: 5px 10px 0; -} -#prf_content button { - padding: 8px; -} -#prf_content select { - overflow: hidden; - padding: 2px 34px 2px 4px; - text-overflow: ellipsis; - white-space: nowrap; - min-height: 30px; - box-shadow: none; - font-weight: 500; -} -#prf_content select option { - font-weight: 500; -} -#prf_content .sub { - margin-left: 24px; -} -@media print { - #prf_dlg { - background: white; - } - #prf_dlg hr, - #prf_dlg #prf_nav, - #prf_dlg .dlg_btns, - #prf_dlg .dlg_title { - display: none; - } -} -/*Prefs>Code*/ -#code { - overflow: auto; - position: absolute; - top: 54px; - bottom: 70px; - left: 12px; - right: 3px; -} -#code p { - margin: 5px; -} -#code > hr { - margin-top: 5px !important; -} -.web #code { - top: 75px; -} #col_top { text-align: left; padding: 0 8px; @@ -1949,23 +1876,191 @@ body.floating-window { #col.frz #col_ren { display: none; } -#col.frz #col_del { - display: none; +#col.frz #col_del { + display: none; +} +#col.frz #col_chrome_fld { + display: none; +} +#col.frz #col_settings { + display: none; +} +#col.frz #col_me { + right: 8px; +} +#col.renaming #col_scm { + display: none; +} +#col.renaming #col_new_name { + display: inline; +} +/*Prefs>Code*/ +#code { + overflow: auto; + position: absolute; + top: 54px; + bottom: 70px; + left: 12px; + right: 3px; +} +#code p { + margin: 5px; +} +#code > hr { + margin-top: 5px !important; +} +.web #code { + top: 75px; +} +/*Prefs>Menu*/ +#pmenu_rst { + float: right; +} +#pmenu p { + margin: 10px 8px; + color: black; +} +#pmenu_ta_wr { + position: absolute; + left: 4px; + right: 4px; + top: 94px; + bottom: 70px; + overflow: hidden; + padding: 4px; +} +.web #pmenu_ta_wr { + top: 120px; +} +#pmenu_ta { + width: 100%; + height: 100%; + resize: none; +} +/*Prefs>Shortcuts*/ +#shc { + position: absolute; + left: 0; + right: 0; + top: 54px; + bottom: 70px; + overflow: auto; + text-align: left; + padding: 8px 0 0 8px; +} +#shc td { + text-align: left; +} +#shc td .shc_editor { + height: 25px; + width: calc(100% - 30px); + display: inline-block; + vertical-align: middle; +} +#shc td .shc_editor .editor-widget.suggest-widget { + width: 0; +} +#shc td > * { + vertical-align: middle; +} +#shc td:nth-child(3) { + width: 50%; +} +.web #shc { + top: 70px; +} +#shc_rst_all { + float: right; + margin-right: 8px; +} +.shc_code { + padding: 2px 16px 2px 8px; +} +#shc_tbl_wr { + position: absolute; + top: 50px; + left: 3px; + right: 3px; + bottom: 0; + overflow: auto; +} +#shc_tbl_wr table { + width: 100%; + cursor: default; + padding-left: 2px; +} +#shc_tbl_wr tr { + page-break-inside: avoid; +} +#shc_tbl_wr tr:hover { + box-shadow: none!important; +} +#shc_tbl_wr tr:hover .shc_add { + visibility: visible; +} +#shc_tbl_wr tr:hover .shc_rst { + visibility: visible; +} +#shc_sc_clr { + width: 24px; + margin-left: -20px; + margin-right: 12px; + text-decoration: none; +} +#shc_no_res { + font-style: italic; + padding: 20px; +} +.shc_key { + border-radius: 2px; + margin: 8px 2px; + line-height: 24px; + white-space: nowrap; + padding: 3px 0; +} +.shc_key .shc_key_btn { + border-radius: 3px; + display: inline; + margin: 2px; + padding: 2px 4px; + white-space: nowrap; } -#col.frz #col_chrome_fld { - display: none; +.shc_text { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-width: 0; + padding: 0 2px; } -#col.frz #col_settings { - display: none; +.shc_del { + text-decoration: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -#col.frz #col_me { - right: 8px; +.shc_add { + visibility: hidden; } -#col.renaming #col_scm { - display: none; +.shc_rst { + visibility: hidden; } -#col.renaming #col_new_name { - display: inline; +.shc_val { + width: 90%; +} +@media print { + #shc, + #shc_tbl_wr { + position: initial; + overflow: unset; + } + #shc_ctrls { + display: none; + } + #shc_tbl_wr tr { + line-height: 25px; + } + #shc_tbl_wr .shc_add, + #shc_tbl_wr td:nth-child(4) { + display: none; + } } /*Prefs>Layout*/ /*The arrangement is: +-------+ */ @@ -2167,31 +2262,6 @@ input.lyt_g3:hover { display: none; } } -/*Prefs>Menu*/ -#pmenu_rst { - float: right; -} -#pmenu p { - margin: 10px 8px; - color: black; -} -#pmenu_ta_wr { - position: absolute; - left: 4px; - right: 4px; - top: 94px; - bottom: 70px; - overflow: hidden; - padding: 4px; -} -.web #pmenu_ta_wr { - top: 120px; -} -#pmenu_ta { - width: 100%; - height: 100%; - resize: none; -} /*Prefs>Title*/ #title { text-align: left; @@ -2227,133 +2297,6 @@ input.lyt_g3:hover { #title_rst { float: right; } -/*Prefs>Shortcuts*/ -#shc { - position: absolute; - left: 0; - right: 0; - top: 54px; - bottom: 70px; - overflow: auto; - text-align: left; - padding: 8px 0 0 8px; -} -#shc td { - text-align: left; -} -#shc td .shc_editor { - height: 25px; - width: calc(100% - 30px); - display: inline-block; - vertical-align: middle; -} -#shc td .shc_editor .editor-widget.suggest-widget { - width: 0; -} -#shc td > * { - vertical-align: middle; -} -#shc td:nth-child(3) { - width: 50%; -} -.web #shc { - top: 70px; -} -#shc_rst_all { - float: right; - margin-right: 8px; -} -.shc_code { - padding: 2px 16px 2px 8px; -} -#shc_tbl_wr { - position: absolute; - top: 50px; - left: 3px; - right: 3px; - bottom: 0; - overflow: auto; -} -#shc_tbl_wr table { - width: 100%; - cursor: default; - padding-left: 2px; -} -#shc_tbl_wr tr { - page-break-inside: avoid; -} -#shc_tbl_wr tr:hover { - box-shadow: none!important; -} -#shc_tbl_wr tr:hover .shc_add { - visibility: visible; -} -#shc_tbl_wr tr:hover .shc_rst { - visibility: visible; -} -#shc_sc_clr { - width: 24px; - margin-left: -20px; - margin-right: 12px; - text-decoration: none; -} -#shc_no_res { - font-style: italic; - padding: 20px; -} -.shc_key { - border-radius: 2px; - margin: 8px 2px; - line-height: 24px; - white-space: nowrap; - padding: 3px 0; -} -.shc_key .shc_key_btn { - border-radius: 3px; - background-color: grey; - color: white; - display: inline; - margin: 2px; - padding: 2px 4px; - white-space: nowrap; -} -.shc_text { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-width: 0; - padding: 0 2px; -} -.shc_del { - text-decoration: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.shc_add { - visibility: hidden; -} -.shc_rst { - visibility: hidden; -} -.shc_val { - width: 90%; -} -@media print { - #shc, - #shc_tbl_wr { - position: initial; - overflow: unset; - } - #shc_ctrls { - display: none; - } - #shc_tbl_wr tr { - line-height: 25px; - } - #shc_tbl_wr .shc_add, - #shc_tbl_wr td:nth-child(4) { - display: none; - } -} /*Prefs>Trace/Edit*/ #wins { overflow-y: auto; @@ -2384,3 +2327,58 @@ input.lyt_g3:hover { #wins .row { padding: 3px 5px; } +#prf_dlg > hr { + margin-top: 0; + margin-bottom: 15px; +} +#prf_nav { + display: inline-block; + width: 100%; +} +#prf_nav a { + float: left; + height: 13px; + padding: 4px 12px 4px 12px; + text-decoration: none; + color: #4c4a4a; + margin: 11px 5px 8px; +} +#prf_print { + font-size: 20px; + float: right; + margin: 7px 20px 0px 0px; + width: 28px; +} +#prf_content { + margin-top: -2px; + padding: 5px 10px 0; +} +#prf_content button { + padding: 8px; +} +#prf_content select { + overflow: hidden; + padding: 2px 34px 2px 4px; + text-overflow: ellipsis; + white-space: nowrap; + min-height: 30px; + box-shadow: none; + font-weight: 500; +} +#prf_content select option { + font-weight: 500; +} +#prf_content .sub { + margin-left: 24px; +} +@media print { + #prf_dlg { + background: white; + } + #prf_dlg hr, + #prf_dlg #prf_nav, + #prf_dlg .dlg_btns, + #prf_dlg .dlg_title { + display: none; + } +} From f517710908f6ad949abae258aae6caf81466dfc4 Mon Sep 17 00:00:00 2001 From: Gilgamesh Athoraya Date: Tue, 15 Aug 2023 01:10:07 +0200 Subject: [PATCH 3/4] Refactored and simplified --- src/km.js | 2 +- src/prf_shc.js | 31 +++++++++++-------------------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/src/km.js b/src/km.js index ad52b40a4..fce1d49d4 100644 --- a/src/km.js +++ b/src/km.js @@ -362,7 +362,7 @@ const stlkbs = []; const fxkbs = []; function monacoKeyBinding(ks) { - return ks.replace(/[+-](.)/g, '\n$1').split('\n').reduce((a, ko) => { + return ks.replace(/\+(.)/g, '\n$1').split('\n').reduce((a, ko) => { const k = D.keyMap.labels[ko] || ko; return a | (ctrlcmd[k] || km[k] || kc[k]); // eslint-disable-line no-bitwise }, 0); diff --git a/src/prf_shc.js b/src/prf_shc.js index af759e6d3..cb98a343e 100644 --- a/src/prf_shc.js +++ b/src/prf_shc.js @@ -11,12 +11,6 @@ h[t] = k; }); }; - const keyLabels = { - Ctrl: '⌃', - Shift: '⇧', - Option: '⌥', - Cmd: '⌘', - }; const getKeystroke = (b, f) => { // b:"+" button,f:callback const e = document.createElement('div'); e.className = 'shc_editor'; @@ -73,21 +67,18 @@ b.parentNode.insertBefore(e, b); me.focus(); }; + const keyLabels = { + Ctrl: '⌃', + Shift: '⇧', + Option: '⌥', + Cmd: '⌘', + }; const keyHTML = (x) => { - const keys = x.replace(/[+-](.)/g, '\n$1').split('\n'); - const btns = keys.map((k) => { - let lbl = k; - if (D.mac) lbl = keyLabels[k] || k; - else if (k === 'Cmd') lbl = D.win ? 'Win' : 'Meta'; - return `
${lbl}
`; - }).join('+'); - const lbls = keys.map((k) => { - let lbl = k; - if (k === 'Cmd' && !D.mac) lbl = D.win ? 'Win' : 'Meta'; - else if (k === 'Alt' && D.mac) lbl = 'Option'; - return lbl; - }).join('+'); - return `${btns}` + const keys = x.replace(/\+(.)/g, '\n$1').split('\n'); + const btns = keys.map((k) => ( + `
${D.mac ? (keyLabels[k] || k) : k}
` + )).join('+'); + return `${btns}` + '× '; }; const updSC = () => { From 99849921e28473f0eb14e8446913fc9cfc78b439 Mon Sep 17 00:00:00 2001 From: Gilgamesh Athoraya Date: Tue, 15 Aug 2023 10:01:25 +0200 Subject: [PATCH 4/4] Fix for meta key not registering on Ubuntu --- src/prf_shc.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/prf_shc.js b/src/prf_shc.js index cb98a343e..c0e9f20a3 100644 --- a/src/prf_shc.js +++ b/src/prf_shc.js @@ -23,12 +23,12 @@ const be = x.browserEvent; const isMeta = meta.has(kn); const s = [ - be.ctrlKey ? 'Ctrl' : '', - be.shiftKey && (be.type === 'keydown' || be.which) ? 'Shift' : '', + x.ctrlKey ? 'Ctrl' : '', + x.shiftKey && (be.type === 'keydown' || be.which) ? 'Shift' : '', // eslint-disable-next-line no-nested-ternary - be.altKey ? (D.mac ? 'Option' : 'Alt') : '', + x.altKey ? (D.mac ? 'Option' : 'Alt') : '', // eslint-disable-next-line no-nested-ternary - be.metaKey ? (D.mac ? 'Cmd' : (D.win ? 'Win' : 'Meta')) : '', + x.metaKey ? (D.mac ? 'Cmd' : (D.win ? 'Win' : 'Meta')) : '', isMeta ? '' : D.keyMap.labels[kn], ].filter((k) => k).join('+'); me.setValue(s || 'Press keystroke...');