From 136e4556a767a8cdb88992067474d207f59c318f Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 5 Nov 2018 12:22:20 -0500 Subject: [PATCH] Move spinner to flex-end, and some css cleanups --- css/80_app.css | 103 +++++++++++---------------------------------- modules/ui/init.js | 31 ++++++++------ 2 files changed, 43 insertions(+), 91 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index e6f2d116f..a6776bd76 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -57,20 +57,11 @@ body { /* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */ /* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */ +/* TODO: check whether this is necessary now with flexbox */ @-moz-document url-prefix() { #content > #bar { width: 100vw; } -/* - #content.inactive > #bar > .spacer.col4 { - width: 0px; - } - #content.active > #bar > .spacer.col4 { - width: 33.3333%; - transition-duration: 200ms; - transition-timing-function: step-end; - } -*/ } #defs { @@ -80,32 +71,6 @@ body { height: 0; } -.spacer { - height: 40px; - margin-right: 10px; -} - -.spinner { - opacity: .5; - display: inline-block; -} - -.spinner img { - height: 40px; - width: 40px; - border-radius: 4px; - background: black; -} -[dir='rtl'] .spinner img { - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - filter: FlipH; - -ms-filter: "FlipH"; -} - - div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -141,7 +106,6 @@ h3 { font-weight: bold; margin-bottom: 10px; } - h4, h5 { font-size: 12px; font-weight: bold; @@ -169,23 +133,18 @@ p { margin: 0; padding: 0; } - p:last-child { padding-bottom: 0; } - em { font-style: italic; } - strong { font-weight: bold; } - a:visited, a { color: #7092ff; } - a:hover { color: #597be7; } @@ -277,9 +236,9 @@ table.tags, table.tags td, table.tags th { /* Grid ------------------------------------------------------- */ -.col6 { float: left; width: 50.0000%; max-width: 600px; } -.col8 { float: left; width: 66.6666%; } -.col12 { float: left; width: 100.0000%; } +.col6 { float: left; width: 50.0000%; max-width: 600px; } +.col8 { float: left; width: 66.6666%; } +.col12 { float: left; width: 100.0000%; } /* UI Lists ------------------------------------------------------- */ @@ -417,35 +376,10 @@ button.minor { button.minor .icon { opacity: .5; } - button.minor:hover { background-color: #f1f1f1; } -/*.button-wrap { - display: inline-block; - padding-right: 10px; - margin: 0; -} -[dir='rtl'] .button-wrap { - padding-left: 10px; -} -.button-wrap button { - white-space: nowrap; - padding: 0px 8px; -} - -.button-wrap button:only-child { - width: 100%; -} - -.button-wrap:last-of-type { - padding-right: 0; -} -[dir='rtl'] .button-wrap:last-of-type { - padding-left: 0; -}*/ - .joined button { border-radius: 0; border-right: 1px solid rgba(0,0,0,.5); @@ -458,14 +392,12 @@ button.minor:hover { .fillL .joined button { border-right: 1px solid #fff; } - .joined button:first-child { border-radius: 4px 0 0 4px; } [dir='rtl'] .joined button:first-child { border-radius: 0 4px 4px 0; } - .joined button:last-child { border-right-width: 0; border-radius: 0 4px 4px 0; @@ -528,15 +460,12 @@ button.secondary-action:hover { .icon.light { color: #fff; } - .icon.created { color: #00ca07; } - .icon.modified { color: #666; } - .icon.deleted { color: #ea0000; } @@ -586,7 +515,6 @@ button.secondary-action:hover { display: flex; margin: 0 5px; } - .tool-group button { display: flex; flex: 1 1 auto; @@ -594,7 +522,6 @@ button.secondary-action:hover { padding: 0 10px; min-width: 30px; } - .tool-group button .icon { flex: 0 0 20px; } @@ -603,7 +530,6 @@ button.secondary-action:hover { padding: 0 5px; } - button.save .count { visibility: hidden; display: inline-block; @@ -639,7 +565,6 @@ button.save.has-count .label { margin-right: 0; } - .help-wrap svg.icon.pre-text.add-note, button.add-note svg.icon { height: 15px; @@ -662,6 +587,26 @@ button.add-note svg.icon { margin-right: 3px; } +.spinner { + opacity: .5; + display: flex; + flex-shrink: 2; + justify-content: flex-end; +} +.spinner img { + height: 40px; + width: 40px; + border-radius: 4px; + background: black; +} +[dir='rtl'] .spinner img { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; +} /* Header for modals / panes diff --git a/modules/ui/init.js b/modules/ui/init.js index b9136ede8..023ea7208 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -45,7 +45,14 @@ import { uiCmd } from './cmd'; export function uiInit(context) { - var uiInitCounter = 0; + // Selectors for elements that can be collapsed if they overflow + // (can't use a media query for this because it depends on sidebar width, not screen width) + var headerCollapsable = 'button > span.label'; + var footerCollapsable = ''; + + var _initCounter = 0; + var _initCallback; + function render(container) { container @@ -92,7 +99,7 @@ export function uiInit(context) { .call(uiInfo(context)) .call(uiNotice(context)); - // Leading area button group (sidebar toggle) + // Leading area button group (Sidebar toggle) var leadingArea = bar .append('div') .attr('class', 'tool-group leading-area'); @@ -119,7 +126,7 @@ export function uiInit(context) { .call(uiFullScreen(context)); - // Center area button group (mode buttons) + // Center area button group (Point/Line/Area/Note mode buttons) bar .append('div') .attr('class', 'tool-group center-area') @@ -128,7 +135,7 @@ export function uiInit(context) { .call(uiModes(context), bar); - // Center area button group (undo/redo save buttons) + // Trailing area button group (Undo/Redo save buttons) var trailingArea = bar .append('div') .attr('class', 'tool-group trailing-area'); @@ -143,13 +150,15 @@ export function uiInit(context) { .attr('class', 'save-wrap') .call(uiSave(context)); - trailingArea + + // For now, just put spinner at the end + bar .append('div') .attr('class', 'spinner') .call(uiSpinner(context)); - // Map controls + // Map controls (appended to #bar, but absolutely positioned) var controls = bar .append('div') .attr('class', 'map-controls'); @@ -305,7 +314,7 @@ export function uiInit(context) { context.enter(modeBrowse(context)); - if (!uiInitCounter++) { + if (!_initCounter++) { if (!hash.startWalkthrough) { context.container() .call(uiSplash(context)) @@ -330,7 +339,7 @@ export function uiInit(context) { }); } - uiInitCounter++; + _initCounter++; if (hash.startWalkthrough) { hash.startWalkthrough = false; @@ -347,10 +356,8 @@ export function uiInit(context) { } - var renderCallback; - function ui(node, callback) { - renderCallback = callback; + _initCallback = callback; var container = d3_select(node); context.container(container); context.loadLocale(function(err) { @@ -370,7 +377,7 @@ export function uiInit(context) { if (!err) { context.container().selectAll('*').remove(); render(context.container()); - if (renderCallback) renderCallback(); + if (_initCallback) _initCallback(); } }); };