diff --git a/build_data.js b/build_data.js index 7d4e8ed934..af3e1cecca 100644 --- a/build_data.js +++ b/build_data.js @@ -66,7 +66,9 @@ module.exports = function buildData() { 'fas-i-cursor': {}, 'fas-lock': {}, 'fas-long-arrow-alt-right': {}, - 'fas-th-list': {} + 'fas-th-list': {}, + 'fas-toolbox': {}, + 'fas-clock': {} }; // The Noun Project icons used diff --git a/css/80_app.css b/css/80_app.css index 623278c0d8..b5f4dbf193 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -551,19 +551,23 @@ button.bar-button .label { flex: 0 1 auto; padding: 0 5px; } -.toolbar-item.add-feature button.bar-button > .icon { - width: 33px; - height: 33px; -} .toolbar-item button.bar-button .disclosure-icon { width: 18px; color: rgba(0, 0, 0, 0.5); } [dir='ltr'] .toolbar-item .disclosure-icon { - margin-left: 2px; + margin-left: 6px; margin-right: -2px; } [dir='rtl'] .toolbar-item .disclosure-icon { + margin-left: -2px; + margin-right: 6px; +} +[dir='ltr'] .toolbar-item.add-feature .disclosure-icon { + margin-left: 2px; + margin-right: -2px; +} +[dir='rtl'] .toolbar-item.add-feature .disclosure-icon { margin-left: -2px; margin-right: 2px; } @@ -642,16 +646,16 @@ button.add-note svg.icon { display: none; } -/* Preset browser +/* Popover ------------------------------------------------------- */ -.preset-browser.popover { +.popover { border: 0.5px solid #DCDCDC; border-radius: 6px; position: absolute; max-height: 600px; top: 44px; width: 200%; - min-width: 300px; + min-width: 160px; max-width: 325px; margin: auto; left: auto; @@ -663,22 +667,14 @@ button.add-note svg.icon { -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.29); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.29); } -[dir='ltr'] .preset-browser.popover { +[dir='ltr'] .popover { left: 0; } -[dir='rtl'] .preset-browser.popover { +[dir='rtl'] .popover { right: 0; } -.assistant .preset-browser.popover { - top: 84px; -} -[dir='ltr'] .assistant .preset-browser.popover { - left: 20px; -} -[dir='rtl'] .assistant .preset-browser.popover { - right: 20px; -} -.preset-browser input[type='search'] { + +.popover input[type='search'] { position: relative; width: 100%; height: 100%; @@ -689,11 +685,11 @@ button.add-note svg.icon { border-top-left-radius: 6px; border-top-right-radius: 6px; } -.preset-browser input[type='search'], -.preset-browser input[type='search']:focus { +.popover input[type='search'], +.popover input[type='search']:focus { background: #f6f6f6; } -.preset-browser .search-icon { +.popover .search-icon { color: #333; display: block; position: absolute; @@ -701,69 +697,54 @@ button.add-note svg.icon { top: 10px; pointer-events: none; } -[dir='rtl'] .preset-browser .search-icon { +[dir='rtl'] .popover .search-icon { left: auto; right: 10px; } -.preset-browser .popover-content { +.popover .popover-content { overflow-y: auto; max-height: 60vh; } -/* ensure corners are rounded in Chrome -.preset-browser, -.preset-browser .popover-content { - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -}*/ -.preset-browser .popover-header { - height: 40px; - border-bottom: 2px solid #DCDCDC; - flex: 0 0 auto; -} -.preset-browser .popover-footer { - padding: 5px 10px 5px 10px; - background: #f6f6f6; - border-top: 1px solid #DCDCDC; - flex: 0 0 auto; - display: flex; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; -} -.preset-browser .popover-footer .message { - color: #666666; - flex-grow: 1; -} -.preset-browser .popover-footer button.filter { - height: 20px; - background: transparent; - color: #666; -} -.preset-browser .popover-footer button.filter.active { - color: #7092ff; +.popover-content:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; } -.preset-browser .popover-footer button.filter:hover { - color: #333; +.popover-content:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; } -.preset-browser .popover-footer button.filter.active:hover { - color: #597be7; +/* ensure corners are rounded in Chrome +.popover .popover-content { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } -.preset-browser::-webkit-scrollbar { + */ +.popover::-webkit-scrollbar { /* don't overlap rounded corners */ background: transparent; } -.preset-browser .list { +.popover .list { height: 100%; } -.preset-browser .list-item > .row { +.popover .list-item > .row { display: flex; position: relative; padding: 2px; + min-height: 40px; + align-items: center; } -.preset-browser .list-item:not(:last-of-type) .row, -.preset-browser .subsection.subitems .list-item .row, -.preset-browser .subsection > .tag-reference-body { +.popover .list-item:not(:last-of-type) .row, +.popover .subsection.subitems .list-item .row { border-bottom: 1px solid #DCDCDC; } -.preset-browser .list-item .label { +.popover .list-item .item-icon { + flex: 0 0 auto; + position: relative; + padding: 0 8px; +} +.popover .list-item .item-icon.icon-30 { + padding: 0 3px; +} +.popover .list-item .label { font-weight: bold; font-size: 12px; padding-left: 2px; @@ -775,23 +756,23 @@ button.add-note svg.icon { line-height: 1.3em; width: 100%; } -.preset-browser .list-item .label .namepart:nth-child(2) { +.popover .list-item .label .namepart:nth-child(2) { font-weight: normal; } -.preset-browser .list-item.disabled .preset-icon-container, -.preset-browser .list-item.disabled .label { +.popover .list-item.disabled .preset-icon-container, +.popover .list-item.disabled .label { opacity: 0.55; } -[dir='ltr'] .preset-browser .list-item .label .icon.inline { +[dir='ltr'] .popover .list-item .label .icon.inline { margin-left: 0; } -[dir='rtl'] .preset-browser .list-item .label .icon.inline { +[dir='rtl'] .popover .list-item .label .icon.inline { margin-right: 0; } -.preset-browser .list-item .row > *:not(button) { +.popover .list-item .row > *:not(button) { pointer-events: none; } -.preset-browser .list-item button.choose { +.popover .list-item button.choose { position: absolute; border-radius: 0; height: 100%; @@ -799,24 +780,20 @@ button.add-note svg.icon { top: 0; left: 0; } -.preset-browser .list-item button.choose:hover, -.preset-browser .list-item button.choose:focus { +.popover .list-item button.choose:hover, +.popover .list-item button.choose:focus { background: #fff; } -.preset-browser .list-item.focused:not(.disabled) button.choose { +.popover .list-item.focused:not(.disabled) button.choose { background: #e8ebff; } -.preset-browser .list-item button.choose.disabled { +.popover .list-item button.choose.disabled { background-color: #ececec; } -.preset-browser .subsection .list-item button.choose { +.popover .subsection .list-item button.choose { opacity: 0.85; } -.preset-browser .subsection .tag-reference-body { - background: rgba(255, 255, 255, 0.85); - padding: 10px; -} -.preset-browser .list-item button.accessory { +.popover .list-item .accessory { position: relative; flex: 0 0 auto; color: #808080; @@ -824,21 +801,77 @@ button.add-note svg.icon { padding-right: 3px; padding-left: 3px; } -.preset-browser .list-item button.accessory:hover { +.popover .list-item button.accessory:hover { color: #666; } -.preset-browser .list-item button.tag-reference-open path { - fill: #000; +.popover .list-item .checkmark { + color: #7092ff; } -.preset-browser .subsection { +.popover .subsection { background-color: #CBCBCB; } -[dir='ltr'] .preset-browser .subitems { +[dir='ltr'] .popover .subitems { padding-left: 6px; } -[dir='rtl'] .preset-browser .subitems { +[dir='rtl'] .popover .subitems { padding-right: 6px; } +/* Preset browser +------------------------------------------------------- */ +.preset-browser.popover { + min-width: 300px; +} +.assistant .preset-browser.popover { + top: 84px; +} +[dir='ltr'] .assistant .preset-browser.popover { + left: 20px; +} +[dir='rtl'] .assistant .preset-browser.popover { + right: 20px; +} +.preset-browser .popover-header { + height: 40px; + border-bottom: 2px solid #DCDCDC; + flex: 0 0 auto; +} +.preset-browser .popover-footer { + padding: 5px 10px 5px 10px; + background: #f6f6f6; + border-top: 1px solid #DCDCDC; + flex: 0 0 auto; + display: flex; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.preset-browser .popover-footer .message { + color: #666666; + flex-grow: 1; +} +.preset-browser .popover-footer button.filter { + height: 20px; + background: transparent; + color: #666; +} +.preset-browser .popover-footer button.filter.active { + color: #7092ff; +} +.preset-browser .popover-footer button.filter:hover { + color: #333; +} +.preset-browser .popover-footer button.filter.active:hover { + color: #597be7; +} +.preset-browser .subsection .tag-reference-body { + background: rgba(255, 255, 255, 0.85); + padding: 10px; +} +.preset-browser .list-item button.tag-reference-open path { + fill: #000; +} +.preset-browser .subsection > .tag-reference-body { + border-bottom: 1px solid #DCDCDC; +} /* Add a preset mode buttons ------------------------------------------------------- */ @@ -5577,17 +5610,12 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { fill: #eee; } -.toolbar-item.center-zoom button use { - fill: #79f; -} -.toolbar-item.operation button use, -.edit-menu-item use { +.operation-icon { fill: #222; color: #79f; pointer-events: none; } -.toolbar-item.operation button.disabled use, -.edit-menu-item.disabled use { +.disabled .operation-icon { fill: rgba(32,32,32,.2); color: rgba(40,40,40,.2); } diff --git a/data/core.yaml b/data/core.yaml index da4f9e3a88..aa3d4d6f6b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -37,6 +37,8 @@ en: none: title: None key: S + toolbox: + title: Tools assistant: mode: adding: Adding diff --git a/dist/locales/en.json b/dist/locales/en.json index dc5fc45a15..530fb65f36 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -47,6 +47,9 @@ "title": "None" }, "key": "S" + }, + "toolbox": { + "title": "Tools" } }, "assistant": { diff --git a/docs/statistics.html b/docs/statistics.html index 019eda968e..21d47cf36c 100644 --- a/docs/statistics.html +++ b/docs/statistics.html @@ -125,7 +125,7 @@