CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-20 23:44:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Flexbox buttons in top bar

Browse Source 
- Makes the "Sidebar" toggle button permanent but removes the label
- Did some things to the "Save" button to make it the same width whether there
  is a count or not (prevents the buttons from jumping when pressing undo/redo)
- Removes a lot of the floated col rules that aren't used much anymore
This commit is contained in:
Bryan Housel
2018-11-01 23:42:26 -04:00
parent 3e03102731
commit 26e63d64e3
13 changed files with 180 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+29 -22
View File
@@ -74,6 +74,7 @@ export function uiInit(context) {
.attr('id', 'content')
.attr('class', 'active');
// Top toolbar
var bar = content
.append('div')
.attr('id', 'bar')
@@ -90,56 +91,62 @@ 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'));
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));
// .append('span')
// .attr('class', 'label')
// .text(t('sidebar_button.title'));
leadingArea
.append('div')
.attr('class', 'full-screen bar-group')
.call(uiFullScreen(context));
// Center area button group (mode buttons)
bar
.append('div')
.attr('class', 'center-area')
.attr('class', 'tool-group center-area')
.append('div')
.attr('class', 'modes button-wrap joined')
.attr('class', 'modes joined')
.call(uiModes(context), bar);
// Center area button group (undo/redo save buttons)
var trailingArea = bar
.append('div')
.attr('class', 'trailing-area');
.attr('class', 'tool-group trailing-area');
trailingArea
.append('div')
.attr('class', 'full-screen')
.call(uiFullScreen(context));
.attr('class', 'joined')
.call(uiUndoRedo(context));
trailingArea
.append('div')
.attr('class', 'save-wrap')
.call(uiSave(context));
trailingArea
.append('div')
.attr('class', 'spinner')
.call(uiSpinner(context));
trailingArea
.append('div')
.attr('class', 'button-wrap joined')
.call(uiUndoRedo(context));
trailingArea
.append('div')
.attr('class', 'button-wrap save-wrap')
.call(uiSave(context));
// Map controls
var controls = bar
.append('div')
.attr('class', 'map-controls');
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
+1 -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
@@ -136,8 +136,6 @@ export function uiModes(context) {
// 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/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/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);