CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-11 12:17:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5455 from openstreetmap/flexbox-buttons

Browse Source 
Flexbox buttons in top bar
This commit is contained in:
Bryan Housel
2018-11-07 10:15:03 -05:00
committed by GitHub
parent cf02ee6dd5 a1dbdea725
commit 378a067035
23 changed files with 441 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+171 -238
View File
@@ -16,7 +16,6 @@ body {
sans-serif;
margin: 0;
padding: 0;
min-width: 768px;
color: #333;
overflow: hidden;
-ms-user-select: none;
@@ -32,7 +31,6 @@ body {
.id-container {
height: 100%;
width: 100%;
min-width: 768px;
}
#content {
@@ -55,22 +53,6 @@ body {
transition-duration: 200ms;
}
/* 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 */
@-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 {
/* Can't be display: none or the clippaths are ignored. */
position: absolute;
@@ -78,35 +60,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;
margin-right: 10px;
background: black;
}
[dir='rtl'] .spinner img {
margin-left: 10px;
margin-right: auto;
-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;
@@ -142,7 +95,6 @@ h3 {
font-weight: bold;
margin-bottom: 10px;
}
h4, h5 {
font-size: 12px;
font-weight: bold;
@@ -170,23 +122,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;
}
@@ -278,19 +225,9 @@ table.tags, table.tags td, table.tags th {
/* Grid
------------------------------------------------------- */
.col0 { float: left; width: 04.1666%; }
.col1 { float: left; width: 08.3333%; }
.col2 { float: left; width: 16.6666%; }
.col3 { float: left; width: 25.0000%; max-width: 300px; }
.col4 { float: left; width: 33.3333%; max-width: 400px; }
.col5 { float: left; width: 41.6666%; max-width: 500px; }
.col6 { float: left; width: 50.0000%; max-width: 600px; }
.col7 { float: left; width: 58.3333%; }
.col8 { float: left; width: 66.6666%; }
.col9 { float: left; width: 75.0000%; }
.col10 { float: left; width: 83.3333%; }
.col11 { float: left; width: 91.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
------------------------------------------------------- */
@@ -326,7 +263,7 @@ ul li { list-style: none;}
}
.toggle-list > label.active {
background: #E8EBFF;
background: #e8ebff;
}
@@ -424,35 +361,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);
@@ -465,14 +377,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;
@@ -485,18 +395,15 @@ button.action {
background: #7092ff;
color: #fff;
}
button[disabled].action,
button[disabled].action:hover {
background: #cccccc;
color: #888;
}
button.action:focus,
button.action:hover {
background: #597BE7;
background: #597be7;
}
button.secondary-action {
background: #ececec;
}
@@ -505,61 +412,6 @@ button.secondary-action:focus,
button.secondary-action:hover {
background: #cccccc;
}
.button-wrap.sidebar-collapse,
.button-wrap.save-wrap {
min-width: 33.3333%;
}
.button-wrap.modes {
width: 100%;
}
button.undo-button,
button.redo-button {
width: 44px;
}
button.save {
padding: 0;
display: flex;
}
button.save .save-inner-wrap {
flex: 1;
}
button.save .count {
display: none;
}
button.save.has-count .count {
display: inline-block;
color: #333;
border: 0px solid rgba(51, 51, 51, 0.2);
border-left-width: 1px;
padding: 0px 12px;
}
[dir='rtl'] button.save.has-count .count {
border-left-width: 0px;
border-right-width: 1px;
}
.help-wrap svg.icon.pre-text.add-note,
button.add-note svg.icon {
height: 15px;
width: 15px;
color: rgba(0,0,0,0.25);
stroke: #333;
stroke-width: 60px;
margin-top: 3px;
}
button.add-note svg.icon {
margin-left: unset;
margin-right: 7px;
}
[dir='rtl'] button.add-note svg.icon {
margin-left: 7px;
margin-right: unset;
}
.help-wrap svg.icon.pre-text.add-note {
margin-left: 3px;
margin-right: 3px;
}
/* Icons
@@ -593,15 +445,12 @@ button.add-note svg.icon {
.icon.light {
color: #fff;
}
.icon.created {
color: #00ca07;
}
.icon.modified {
color: #666;
}
.icon.deleted {
color: #ea0000;
}
@@ -618,6 +467,9 @@ button.add-note svg.icon {
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
#bar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: absolute;
padding: 10px;
left: 0;
@@ -625,50 +477,133 @@ button.add-note svg.icon {
right: 0;
height: 60px;
z-index: 9;
min-width: 600px;
}
[dir='rtl'] #bar .button-wrap button {
float: right;
.tool-group {
display: flex;
flex: 0 1 auto;
flex-flow: row nowrap;
width: 100%;
}
#bar .center-area,
#bar .trailing-area {
min-width: 50%;
.tool-group.leading-area {
flex-shrink: 2;
justify-content: flex-start;
}
.sidebar-collapsed #bar .leading-area,
.sidebar-collapsed #bar .center-area,
.sidebar-collapsed #bar .trailing-area {
min-width: 33.3333%;
.tool-group.center-area {
justify-content: center;
}
#bar .center-area {
float: left;
.tool-group.trailing-area {
justify-content: flex-start;
}
[dir='rtl'] #bar .center-area {
float: right;
.tool-group > div {
display: flex;
margin: 0 5px;
}
.sidebar-collapsed #bar .center-area {
position: absolute;
left: 50%;
transform: translateX(-50%);
float: none;
.tool-group button {
display: flex;
flex: 1 1 auto;
flex-flow: row nowrap;
padding: 0 10px;
min-width: 30px;
}
#bar .leading-area {
float: left;
.tool-group button .icon {
flex: 0 0 20px;
}
.tool-group button .label {
flex: 0 1 auto;
padding: 0 5px;
}
button.save .count {
visibility: hidden;
display: inline-block;
border: 0px solid #ccc;
border-left-width: 1px;
padding: 0px 8px;
min-width: 32px;
text-align: center;
}
[dir='rtl'] button.save .count {
border-left-width: 0px;
border-right-width: 1px;
}
button.save.has-count .count {
visibility: visible;
}
/* if no count, shift label over where the count would be, preserving width */
button.save .label {
margin-right: -12px;
margin-left: 15px;
}
[dir='rtl'] button.save .label {
margin-left: -12px;
margin-right: 15px;
}
button.save.has-count .label {
margin-right: 3px;
margin-left: 0;
}
[dir='rtl'] button.save.has-count .label {
margin-left: 3px;
margin-right: 0;
}
.help-wrap svg.icon.pre-text.add-note,
button.add-note svg.icon {
height: 15px;
width: 15px;
color: rgba(0,0,0,0.25);
stroke: #333;
stroke-width: 60px;
margin-top: 3px;
}
button.add-note svg.icon {
margin-left: unset;
margin-right: 4px;
}
[dir='rtl'] button.add-note svg.icon {
margin-left: 4px;
margin-right: unset;
}
.help-wrap svg.icon.pre-text.add-note {
margin-left: 3px;
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";
}
#bar.narrow .tool-group {
width: unset;
}
#bar.narrow .spinner,
#bar.narrow button .label {
display: none;
}
[dir='rtl'] #bar .leading-area {
float: right;
}
.sidebar-collapsed #bar .leading-area {
display: inline-block;
}
#bar .trailing-area {
float: right;
text-align: right;
}
[dir='rtl'] #bar .trailing-area {
float: left;
text-align: left;
#bar.narrow button .count {
border-left-width: 0;
border-right-width: 0;
}
@@ -767,14 +702,6 @@ button.add-note svg.icon {
justify-content: center;
}
.sidebar-component .body {
width: 100%;
overflow: auto;
top: 60px;
bottom: 0;
position: absolute;
}
/* Hide/Toggle collapsable sections (aka Disclosure)
------------------------------------------------------- */
@@ -797,26 +724,6 @@ a.hide-toggle {
padding-bottom: 5px;
}
#sidebar-resizer {
position: absolute;
top: 0;
right: -6px;
height: 100%;
width: 6px;
cursor: col-resize;
}
.sidebar-collapsed #sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
right: -10px;
}
[dir='rtl'] #sidebar-resizer {
right: auto;
left: -6px;
}
.sidebar-collapsed[dir='rtl'] #sidebar-resizer {
left: -10px;
}
/* Sidebar / Inspector
------------------------------------------------------- */
@@ -836,6 +743,28 @@ a.hide-toggle {
border-left-width: 1px;
}
#sidebar-resizer {
position: absolute;
top: 0;
right: -6px;
height: 100%;
width: 6px;
cursor: col-resize;
}
[dir='rtl'] #sidebar-resizer {
right: auto;
left: -6px;
}
#sidebar.collapsed #sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
right: -10px;
}
[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
left: -10px;
}
.sidebar-component {
position: absolute;
top: 0;
@@ -844,6 +773,14 @@ a.hide-toggle {
right: 0;
}
.sidebar-component .body {
width: 100%;
overflow: auto;
top: 60px;
bottom: 0;
position: absolute;
}
.panewrap {
position: absolute;
width: 200%;
@@ -931,6 +868,7 @@ a.hide-toggle {
}
/* Feature List / Search Results
------------------------------------------------------- */
.feature-list {
@@ -3005,6 +2943,8 @@ div.full-screen > button:hover {
top: 60px;
bottom: 30px;
right: 0;
width: 33.3333%;
max-width: 400px;
padding-bottom: 50px;
overflow: hidden;
z-index: -1;
@@ -3014,6 +2954,11 @@ div.full-screen > button:hover {
right: auto !important;
}
.map-pane.help-wrap {
width: 50.0000%;
max-width: 600px;
}
.pane-heading {
display: flex;
flex-flow: row nowrap;
@@ -3812,6 +3757,10 @@ img.tile-debug {
text-align: center;
}
.modal-section.buttons button {
min-width: 130px;
}
.modal-section.buttons .action {
display: inline-block;
margin: 0 10px;
@@ -4089,9 +4038,6 @@ svg.mouseclick use.right {
.settings-modal textarea {
height: 70px;
}
.settings-modal .buttons .button.col3 {
float: none; /* undo float left */
}
.settings-custom-background .instructions-template {
margin-bottom: 20px;
@@ -4494,12 +4440,12 @@ svg.mouseclick use.right {
}
/* Move over tooltips that are near the edge of screen */
.add-point .tooltip .tooltip-arrow {
left: 60px;
button.sidebar-toggle .tooltip .tooltip-arrow {
left: 32px;
}
[dir='rtl'] .add-point .tooltip .tooltip-arrow {
[dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
left: auto;
right: 60px;
right: 32px;
}
li:first-of-type .badge .tooltip,
@@ -4616,19 +4562,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
}
/* Media Queries
------------------------------------------------------- */
@media screen and (max-width: 1200px) {
.user-list { display: none !important; }
}
@media screen and (max-width: 1000px) {
#userLink { display: none !important; }
}
@media screen and (max-width: 900px) {
#scale-block { display: none !important; }
}
/* Scrollbars
----------------------------------------------------- */
::-webkit-scrollbar {
data/core.yaml
+4 -3
View File
@@ -302,9 +302,9 @@ en:
loading_auth: "Connecting to OpenStreetMap..."
report_a_bug: Report a bug
help_translate: Help translate
sidebar_button:
title: Sidebar
tooltip: Open the sidebar.
sidebar:
key: '`'
tooltip: Toggle the sidebar.
feature_info:
hidden_warning: "{count} hidden features"
hidden_details: "These features are currently hidden: {details}"
@@ -1159,6 +1159,7 @@ en:
background_switch: "Switch back to last background"
map_data: "Show map data options"
fullscreen: "Enter full screen mode"
sidebar: "Toggle sidebar"
wireframe: "Toggle wireframe mode"
minimap: "Toggle minimap"
selecting:
data/shortcuts.json
+4
View File
@@ -66,6 +66,10 @@
"shortcuts": ["F", "F11"],
"text": "shortcuts.browsing.display_options.fullscreen"
},
{
"shortcuts": ["sidebar.key"],
"text": "shortcuts.browsing.display_options.sidebar"
},
{
"shortcuts": ["area_fill.wireframe.key"],
"text": "shortcuts.browsing.display_options.wireframe"
dist/locales/en.json
Vendored
+4 -3
View File
@@ -383,9 +383,9 @@
"loading_auth": "Connecting to OpenStreetMap...",
"report_a_bug": "Report a bug",
"help_translate": "Help translate",
"sidebar_button": {
"title": "Sidebar",
"tooltip": "Open the sidebar."
"sidebar": {
"key": "`",
"tooltip": "Toggle the sidebar."
},
"feature_info": {
"hidden_warning": "{count} hidden features",
@@ -1339,6 +1339,7 @@
"background_switch": "Switch back to last background",
"map_data": "Show map data options",
"fullscreen": "Enter full screen mode",
"sidebar": "Toggle sidebar",
"wireframe": "Toggle wireframe mode",
"minimap": "Toggle minimap"
},
modules/geo/extent.js
-1
View File
@@ -20,7 +20,6 @@ export function geoExtent(min, max) {
}
}
// $FlowFixMe
geoExtent.prototype = new Array(2);
_extend(geoExtent.prototype, {
modules/modes/select_data.js
+11 -7
View File
@@ -1,3 +1,6 @@
import { geoBounds as d3_geoBounds } from 'd3-geo';
import {
event as d3_event,
select as d3_select
@@ -12,11 +15,8 @@ import {
behaviorSelect
} from '../behavior';
import {
modeDragNode,
modeDragNote
} from '../modes';
import { geoExtent } from '../geo';
import { modeDragNode, modeDragNote } from '../modes';
import { modeBrowse } from './browse';
import { uiDataEditor } from '../ui';
@@ -69,8 +69,12 @@ export function modeSelectData(context, selectedDatum) {
selectData();
context.ui().sidebar
.show(dataEditor.datum(selectedDatum));
var sidebar = context.ui().sidebar;
sidebar.show(dataEditor.datum(selectedDatum));
// expand the sidebar, avoid obscuring the data if needed
var extent = geoExtent(d3_geoBounds(selectedDatum));
sidebar.expand(sidebar.intersects(extent));
context.map()
.on('drawn.select-data', selectData);
modules/modes/select_note.js
+5 -2
View File
@@ -105,8 +105,11 @@ export function modeSelectNote(context, selectedNoteID) {
selectNote();
context.ui().sidebar
.show(noteEditor.note(note));
var sidebar = context.ui().sidebar;
sidebar.show(noteEditor.note(note));
// expand the sidebar, avoid obscuring the note if needed
sidebar.expand(sidebar.intersects(note.extent()));
context.map()
.on('drawn.select', selectNote);
modules/renderer/map.js
-2
View File
@@ -662,13 +662,11 @@ export function rendererMap(context) {
map.dimensions = function(_) {
if (!arguments.length) return dimensions;
var center = map.center();
dimensions = _;
drawLayers.dimensions(dimensions);
context.background().dimensions(dimensions);
projection.clipExtent([[0, 0], dimensions]);
mouse = utilFastMouse(supersurface.node());
setCenter(center);
scheduleRedraw();
return map;
modules/services/mapillary.js
+1 -1
View File
@@ -372,7 +372,7 @@ export default {
defs.call(svgDefs(context).addSprites, ['mapillary-sprite']);
// Register viewer resize handler
context.ui().on('photoviewerResize', function() {
context.ui().photoviewer.on('resize', function() {
if (_mlyViewer) {
_mlyViewer.resize();
}
modules/services/openstreetcam.js
+1 -1
View File
@@ -327,7 +327,7 @@ export default {
// Register viewer resize handler
context.ui().on('photoviewerResize', function(dimensions) {
context.ui().photoviewer.on('resize', function(dimensions) {
imgZoom = d3_zoom()
.extent([[0, 0], dimensions])
.translateExtent([[0, 0], dimensions])
modules/services/streetside.js
+1 -1
View File
@@ -626,7 +626,7 @@ export default {
// Register viewer resize handler
context.ui().on('photoviewerResize', function() {
context.ui().photoviewer.on('resize', function() {
if (_pannellumViewer) {
_pannellumViewer.resize();
}
modules/ui/background.js
+1 -1
View File
@@ -340,7 +340,7 @@ export function uiBackground(context) {
var pane = selection
.append('div')
.attr('class', 'fillL map-pane col4 hide');
.attr('class', 'fillL map-pane hide');
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
modules/ui/confirm.js
+1 -1
View File
@@ -23,7 +23,7 @@ export function uiConfirm(selection) {
modalSelection.okButton = function() {
buttons
.append('button')
.attr('class', 'button ok-button action col4')
.attr('class', 'button ok-button action')
.on('click.confirm', function() {
modalSelection.remove();
})
modules/ui/help.js
+1 -1
View File
@@ -384,7 +384,7 @@ export function uiHelp(context) {
var pane = selection.append('div')
.attr('class', 'help-wrap map-pane fillL col6 hide');
.attr('class', 'help-wrap map-pane fillL hide');
var tooltipBehavior = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
modules/ui/init.js
+85 -36
View File
@@ -37,6 +37,7 @@ import { uiSidebar } from './sidebar';
import { uiSpinner } from './spinner';
import { uiSplash } from './splash';
import { uiStatus } from './status';
import { uiTooltipHtml } from './tooltipHtml';
import { uiUndoRedo } from './undo_redo';
import { uiVersion } from './version';
import { uiZoom } from './zoom';
@@ -44,7 +45,10 @@ import { uiCmd } from './cmd';
export function uiInit(context) {
var uiInitCounter = 0;
var _initCounter = 0;
var _initCallback;
var _needWidth = {};
function render(container) {
container
@@ -74,6 +78,7 @@ export function uiInit(context) {
.attr('id', 'content')
.attr('class', 'active');
// Top toolbar
var bar = content
.append('div')
.attr('id', 'bar')
@@ -90,56 +95,66 @@ export function uiInit(context) {
.call(uiInfo(context))
.call(uiNotice(context));
// Leading area button group (Sidebar toggle)
var leadingArea = bar
.append('div')
.attr('class', 'leading-area');
.attr('class', 'tool-group leading-area');
var sidebarButton = leadingArea
.append('div')
.attr('class', 'button-wrap sidebar-collapse')
.append('button')
.attr('class', 'col12')
.attr('class', 'sidebar-toggle')
.attr('tabindex', -1)
.on('click', ui.sidebar.toggleCollapse)
.call(tooltip().title(t('sidebar_button.tooltip')).placement('bottom'));
.on('click', ui.sidebar.toggle)
.call(tooltip()
.placement('bottom')
.html(true)
.title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
);
var iconSuffix = textDirection === 'rtl' ? 'right' : 'left';
sidebarButton
.call(svgIcon('#iD-icon-sidebar-'+iconSuffix, 'pre-text'))
.append('span')
.attr('class', 'label')
.text(t('sidebar_button.title'));
.call(svgIcon('#iD-icon-sidebar-' + iconSuffix));
bar
leadingArea
.append('div')
.attr('class', 'center-area')
.append('div')
.attr('class', 'modes button-wrap joined')
.call(uiModes(context), bar);
var trailingArea = bar
.append('div')
.attr('class', 'trailing-area');
trailingArea
.append('div')
.attr('class', 'full-screen')
.attr('class', 'full-screen bar-group')
.call(uiFullScreen(context));
trailingArea
// Center area button group (Point/Line/Area/Note mode buttons)
bar
.append('div')
.attr('class', 'spinner')
.call(uiSpinner(context));
.attr('class', 'tool-group center-area')
.append('div')
.attr('class', 'modes joined')
.call(uiModes(context), bar);
// Trailing area button group (Undo/Redo save buttons)
var trailingArea = bar
.append('div')
.attr('class', 'tool-group trailing-area');
trailingArea
.append('div')
.attr('class', 'button-wrap joined')
.attr('class', 'joined')
.call(uiUndoRedo(context));
trailingArea
.append('div')
.attr('class', 'button-wrap save-wrap')
.attr('class', 'save-wrap')
.call(uiSave(context));
// For now, just put spinner at the end
bar
.append('div')
.attr('class', 'spinner')
.call(uiSpinner(context));
// Map controls (appended to #bar, but absolutely positioned)
var controls = bar
.append('div')
.attr('class', 'map-controls');
@@ -280,6 +295,7 @@ export function uiInit(context) {
var pa = 80; // pan amount
var keybinding = d3_keybinding('main')
.on('⌫', function() { d3_event.preventDefault(); })
.on(t('sidebar.key'), ui.sidebar.toggle)
.on('←', pan([pa, 0]))
.on('↑', pan([0, pa]))
.on('→', pan([-pa, 0]))
@@ -294,7 +310,7 @@ export function uiInit(context) {
context.enter(modeBrowse(context));
if (!uiInitCounter++) {
if (!_initCounter++) {
if (!hash.startWalkthrough) {
context.container()
.call(uiSplash(context))
@@ -319,7 +335,7 @@ export function uiInit(context) {
});
}
uiInitCounter++;
_initCounter++;
if (hash.startWalkthrough) {
hash.startWalkthrough = false;
@@ -336,10 +352,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) {
@@ -359,7 +373,7 @@ export function uiInit(context) {
if (!err) {
context.container().selectAll('*').remove();
render(context.container());
if (renderCallback) renderCallback();
if (_initCallback) _initCallback();
}
});
};
@@ -369,13 +383,48 @@ export function uiInit(context) {
ui.photoviewer = uiPhotoviewer(context);
ui.onResize = function() {
ui.onResize = function(withPan) {
var map = context.map();
var content = d3_select('#content');
var mapDimensions = utilGetDimensions(content, true);
context.map().dimensions(mapDimensions);
if (withPan !== undefined) {
map.redrawEnable(false);
map.pan(withPan);
map.redrawEnable(true);
}
map.dimensions(mapDimensions);
ui.photoviewer.onMapResize();
// check if header or footer have overflowed
ui.checkOverflow('#bar');
ui.checkOverflow('#footer');
};
// Call checkOverflow when resizing or whenever the contents change.
ui.checkOverflow = function(selector, reset) {
if (reset) {
delete _needWidth[selector];
}
var element = d3_select(selector);
var scrollWidth = element.property('scrollWidth');
var clientWidth = element.property('clientWidth');
var needed = _needWidth[selector] || scrollWidth;
if (scrollWidth > clientWidth) { // overflow happening
element.classed('narrow', true);
if (!_needWidth[selector]) {
_needWidth[selector] = scrollWidth;
}
} else if (scrollWidth >= needed) {
element.classed('narrow', false);
}
};
return ui;
}
modules/ui/map_data.js
+1 -1
View File
@@ -578,7 +578,7 @@ export function uiMapData(context) {
var pane = selection
.append('div')
.attr('class', 'fillL map-pane col4 hide');
.attr('class', 'fillL map-pane hide');
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
modules/ui/modes.js
+6 -3
View File
@@ -125,7 +125,7 @@ export function uiModes(context) {
buttonsEnter
.each(function(d) {
d3_select(this)
.call(svgIcon('#iD-icon-' + d.button, 'pre-text'));
.call(svgIcon('#iD-icon-' + d.button));
});
buttonsEnter
@@ -133,11 +133,14 @@ export function uiModes(context) {
.attr('class', 'label')
.text(function(mode) { return mode.title; });
// if we are adding/removing the buttons, check if toolbar has overflowed
if (buttons.enter().size() || buttons.exit().size()) {
context.ui().checkOverflow('#bar', true);
}
// update
buttons = buttons
.merge(buttonsEnter)
.classed('col3', showNotes) // 25%
.classed('col4', !showNotes) // 33%
.property('disabled', function(d) {
return d.id === 'add-note' ? !notesEditable() : !editable();
});
modules/ui/photoviewer.js
+5 -5
View File
@@ -11,7 +11,7 @@ import { services } from '../services';
export function uiPhotoviewer(context) {
var dispatch = d3_dispatch('photoviewerResize');
var dispatch = d3_dispatch('resize');
function photoviewer(selection) {
selection
@@ -30,7 +30,7 @@ export function uiPhotoviewer(context) {
.attr('class', 'resize-handle-xy')
.on(
'mousedown',
buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnX: true, resizeOnY: true })
buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true, resizeOnY: true })
);
selection
@@ -38,7 +38,7 @@ export function uiPhotoviewer(context) {
.attr('class', 'resize-handle-x')
.on(
'mousedown',
buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnX: true })
buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true })
);
selection
@@ -46,7 +46,7 @@ export function uiPhotoviewer(context) {
.attr('class', 'resize-handle-y')
.on(
'mousedown',
buildResizeListener(selection, 'photoviewerResize', dispatch, { resizeOnY: true })
buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
);
@@ -117,7 +117,7 @@ export function uiPhotoviewer(context) {
.style('width', setPhotoDimensions[0] + 'px')
.style('height', setPhotoDimensions[1] + 'px');
dispatch.call('photoviewerResize', photoviewer, setPhotoDimensions);
dispatch.call('resize', photoviewer, setPhotoDimensions);
}
};
modules/ui/save.js
+4 -4
View File
@@ -80,15 +80,15 @@ export function uiSave(context) {
var button = selection
.append('button')
.attr('class', 'save col12 disabled')
.attr('class', 'save disabled')
.attr('tabindex', -1)
.on('click', save)
.call(tooltipBehavior);
button
.append('div')
.attr('class', 'save-inner-wrap')
.call(svgIcon('#iD-icon-save', 'pre-text'))
.call(svgIcon('#iD-icon-save'));
button
.append('span')
.attr('class', 'label')
.text(t('save.title'));
modules/ui/settings/custom_background.js
+2 -4
View File
@@ -41,12 +41,12 @@ export function uiSettingsCustomBackground(context) {
.property('value', _currSettings.template);
// insert a cancel button, and adjust the button widths
// insert a cancel button
var buttonSection = modal.select('.modal-section.buttons');
buttonSection
.insert('button', '.ok-button')
.attr('class', 'button col3 cancel-button secondary-action')
.attr('class', 'button cancel-button secondary-action')
.text(t('confirm.cancel'));
@@ -54,8 +54,6 @@ export function uiSettingsCustomBackground(context) {
.on('click.cancel', clickCancel);
buttonSection.select('.ok-button')
.classed('col3', true)
.classed('col4', false)
.attr('disabled', isSaveDisabled)
.on('click.save', clickSave);
modules/ui/settings/custom_data.js
+2 -4
View File
@@ -70,12 +70,12 @@ export function uiSettingsCustomData(context) {
.property('value', _currSettings.url);
// insert a cancel button, and adjust the button widths
// insert a cancel button
var buttonSection = modal.select('.modal-section.buttons');
buttonSection
.insert('button', '.ok-button')
.attr('class', 'button col3 cancel-button secondary-action')
.attr('class', 'button cancel-button secondary-action')
.text(t('confirm.cancel'));
@@ -83,8 +83,6 @@ export function uiSettingsCustomData(context) {
.on('click.cancel', clickCancel);
buttonSection.select('.ok-button')
.classed('col3', true)
.classed('col4', false)
.attr('disabled', isSaveDisabled)
.on('click.save', clickSave);
modules/ui/sidebar.js
+130 -64
View File
@@ -1,6 +1,8 @@
import _throttle from 'lodash-es/throttle';
import { drag as d3_drag } from 'd3-drag';
import { interpolateNumber as d3_interpolateNumber } from 'd3-interpolate';
import {
select as d3_select,
event as d3_event,
@@ -32,43 +34,68 @@ export function uiSidebar(context) {
function sidebar(selection) {
var container = d3_select('#id-container');
var minWidth = 280;
var sidebarWidth;
var containerWidth;
var dragOffset;
var resizer = selection
.append('div')
.attr('id', 'sidebar-resizer');
// set the initial width constraints
selection.style('min-width', '280px');
selection.style('max-width', '400px');
selection.style('width', '33.3333%');
// Set the initial width constraints
selection
.style('min-width', minWidth + 'px')
.style('max-width', '400px')
.style('width', '33.3333%');
var container = d3_select('#id-container');
resizer.call(d3_drag()
.container(container.node())
.on('start', function() {
// offset from edge of sidebar-resizer
dragOffset = d3_event.sourceEvent.offsetX - 1;
sidebarWidth = selection.node().getBoundingClientRect().width;
containerWidth = container.node().getBoundingClientRect().width;
var widthPct = (sidebarWidth / containerWidth) * 100;
selection
.style('width', widthPct + '%') // lock in current width
.style('max-width', '85%'); // but allow larger widths
})
.on('drag', function() {
var isRTL = (textDirection === 'rtl');
var xMarginProperty = isRTL ? 'margin-right' : 'margin-left';
var containerWidthPx = container.node().getBoundingClientRect().width;
var x = d3_event.x - dragOffset;
sidebarWidth = isRTL ? containerWidth - x : x;
var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
var isCollapsed = selection.classed('collapsed');
var shouldCollapse = sidebarWidth < minWidth;
// subtact 1px so the mouse stays in the div and maintains the col-resize cursor
var newWidthPx = textDirection === 'rtl' ? containerWidthPx - d3_event.x-1 : d3_event.x-1;
selection.classed('collapsed', shouldCollapse);
var shouldCollapse = newWidthPx < 280;
container.classed('sidebar-collapsed', shouldCollapse);
// allow large widths
selection.style('max-width', '85%');
if (shouldCollapse) {
selection.style(xMarginProperty,'-400px')
.style('width', '400px');
}
else {
if (!isCollapsed) {
selection
.style(xMarginProperty, '-400px')
.style('width', '400px');
var newWidthPercent = (newWidthPx / containerWidthPx) * 100;
selection.style(xMarginProperty, null)
.style('width', newWidthPercent+'%');
context.ui().onResize([sidebarWidth - d3_event.dx, 0]);
}
} else {
var widthPct = (sidebarWidth / containerWidth) * 100;
selection
.style(xMarginProperty, null)
.style('width', widthPct + '%');
if (isCollapsed) {
context.ui().onResize([-sidebarWidth, 0]);
} else {
context.ui().onResize([-d3_event.dx, 0]);
}
}
context.ui().onResize();
})
);
@@ -138,10 +165,23 @@ export function uiSidebar(context) {
sidebar.hover = _throttle(hover, 200);
sidebar.intersects = function(extent) {
var rect = selection.node().getBoundingClientRect();
return extent.intersects([
context.projection.invert([0, rect.height]),
context.projection.invert([rect.width, 0])
]);
};
sidebar.select = function(id, newFeature) {
if (!_current && id) {
// uncollapse the sidebar to show the editor
sidebar.toggleCollapse(false);
// uncollapse the sidebar
if (selection.classed('collapsed')) {
var entity = context.entity(id);
var extent = entity.extent(context.graph());
sidebar.expand(sidebar.intersects(extent));
}
featureListWrap
.classed('inspector-hidden', true);
@@ -195,59 +235,85 @@ export function uiSidebar(context) {
_current = null;
};
sidebar.toggleCollapse = function(shouldCollapse) {
if (d3_event && typeof d3_event.preventDefault === 'function') {
d3_event.preventDefault();
}
var container = d3_select('#id-container');
var collapsing;
var isCollapsed = container.classed('sidebar-collapsed');
if (typeof shouldCollapse !== 'undefined') {
if (shouldCollapse === isCollapsed) {
return;
}
collapsing = shouldCollapse;
} else {
collapsing = !isCollapsed;
}
var sidebar = d3_select('#sidebar');
var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
if (collapsing) {
var preSidebarWidthInPx = sidebar.node().getBoundingClientRect().width;
sidebar.style('width', preSidebarWidthInPx+'px');
sidebar.transition()
.style('width', '400px')
.style(xMarginProperty,'-400px')
.on('end',function(){
context.ui().onResize();
});
container.classed('sidebar-collapsed', true);
} else {
var containerWidthPx = container.node().getBoundingClientRect().width;
var postSidebarWidthInPx = Math.max(containerWidthPx*0.333333, 280);
sidebar.transition()
.style('width', postSidebarWidthInPx)
.style(xMarginProperty, '0px')
.on('end',function(){
sidebar.style('width', '33.3333%');
context.ui().onResize();
});
container.classed('sidebar-collapsed', false);
sidebar.expand = function(moveMap) {
if (selection.classed('collapsed')) {
sidebar.toggle(moveMap);
}
};
sidebar.collapse = function(moveMap) {
if (!selection.classed('collapsed')) {
sidebar.toggle(moveMap);
}
};
sidebar.toggle = function(moveMap) {
var e = d3_event;
if (e && e.sourceEvent) {
e.sourceEvent.preventDefault();
} else if (e) {
e.preventDefault();
}
var isCollapsed = selection.classed('collapsed');
var isCollapsing = !isCollapsed;
var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
sidebarWidth = selection.node().getBoundingClientRect().width;
// switch from % to px
selection.style('width', sidebarWidth + 'px');
var startMargin, endMargin, lastMargin;
if (isCollapsing) {
startMargin = lastMargin = 0;
endMargin = -sidebarWidth;
} else {
startMargin = lastMargin = -sidebarWidth;
endMargin = 0;
}
selection.transition()
.style(xMarginProperty, endMargin + 'px')
.tween('panner', function() {
var i = d3_interpolateNumber(startMargin, endMargin);
return function(t) {
var dx = lastMargin - Math.round(i(t));
lastMargin = lastMargin - dx;
context.ui().onResize(moveMap ? undefined : [dx, 0]);
};
})
.on('end', function() {
selection.classed('collapsed', isCollapsing);
// switch back from px to %
if (!isCollapsing) {
var containerWidth = container.node().getBoundingClientRect().width;
var widthPct = (sidebarWidth / containerWidth) * 100;
selection
.style(xMarginProperty, null)
.style('width', widthPct + '%');
}
});
};
// toggle the sidebar collapse when double-clicking the resizer
resizer.on('dblclick', sidebar.toggleCollapse);
resizer.on('dblclick', sidebar.toggle);
}
sidebar.hover = function() {};
sidebar.hover.cancel = function() {};
sidebar.intersects = function() {};
sidebar.select = function() {};
sidebar.show = function() {};
sidebar.hide = function() {};
sidebar.toggleCollapse = function() {};
sidebar.expand = function() {};
sidebar.collapse = function() {};
sidebar.toggle = function() {};
return sidebar;
}
modules/ui/undo_redo.js
+1 -1
View File
@@ -48,7 +48,7 @@ export function uiUndoRedo(context) {
.data(commands)
.enter()
.append('button')
.attr('class', function(d) { return 'col6 disabled ' + d.id + '-button'; })
.attr('class', function(d) { return 'disabled ' + d.id + '-button'; })
.on('click', function(d) { return d.action(); })
.call(tooltipBehavior);