Add UI for toggling toolbar items on and off

openstreetmap · Aug 12, 2019 · ead729b · ead729b
1 parent 7386f27
commit ead729b
Show file tree

Hide file tree

Showing 28 changed files with 388 additions and 146 deletions.
diff --git 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
@@ -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,81 +685,66 @@ 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;
     left: 10px;
     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,70 +756,122 @@ 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%;
     width: 100%;
     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;
     background: transparent;
     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
@@ -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
@@ -47,6 +47,9 @@
                     "title": "None"
                 },
                 "key": "S"
+            },
+            "toolbox": {
+                "title": "Tools"
             }
         },
         "assistant": {

diff --git a/docs/statistics.html b/docs/statistics.html
diff --git a/modules/svg/icon.js b/modules/svg/icon.js
@@ -1,6 +1,6 @@
 export function svgIcon(name, svgklass, useklass) {
     return function drawIcon(selection) {
-        selection.selectAll('svg.icon')
+        selection.selectAll('svg.icon' + (svgklass ? '.' + svgklass : ''))
             .data([0])
             .enter()
             .append('svg')