CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-18 22:48:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

restyling default list + toggle lists.

Browse Source
This commit is contained in:
Saman Bemel-Benrud
2013-06-20 13:06:12 -04:00
parent 2bc39ffdab
commit 4c471ca255
4 changed files with 79 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+49 -70
View File
@@ -182,6 +182,12 @@ input:focus {
background-color: #F1F1F1;
}
input[type="checkbox"],
input[type="radio"] {
width: 20px;
vertical-align: middle;
}
/* remove bottom border radius when combobox is open */
.combobox + * textarea:focus,
.combobox + * input:focus {
@@ -234,57 +240,42 @@ ul li { list-style: none;}
border: 1px solid #CCC;
}
.toggle-list > button {
font-weight: normal;
text-align: left;
.toggle-list > label {
position: relative;
padding: 5px 10px 5px 30px;
padding: 5px 10px;
display:block;
border-radius: 0;
width: 100%;
border-bottom: 1px solid #ccc;
background-color: white;
height: 30px;
color: #7092FF;
cursor: pointer;
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
}
.toggle-list > button:first-child {
.toggle-list > label:hover {
background-color: #ececec;
}
.toggle-list > label:first-child {
border-radius: 3px 3px 0 0;
}
.toggle-list > button:last-child {
.toggle-list > label:last-child {
border-radius: 0 0 3px 3px;
border-bottom-width: 0;
}
.toggle-list > button:only-child {
.toggle-list > label:only-child {
border-radius: 3px;
}
.toggle-list > button.active {
.toggle-list > label.active {
background: #E8EBFF;
}
.toggle-list > button::before {
content: "";
display: inline-block;
border-radius: 50%;
height: 10px;
width: 10px;
margin-right: 10px;
background: #808080;
position: absolute;
left: 10px;
top: 10px;
}
.toggle-list > button.active::before {
background: #7092ff;
}
.toggle-list.check-list > button::before {
border-radius: 2px;
}
.link-list li {
float: right;
border-left: 1px solid rgba(255,255,255,.5);
@@ -518,8 +509,11 @@ button.save.has-count .count::before {
/* Definitions for every icon */
.icon.browse { background-position: 0 0;}
.icon.point,
.icon.add-point { background-position: -20px 0;}
.icon.line,
.icon.add-line { background-position: -40px 0;}
.icon.area,
.icon.add-area { background-position: -60px 0;}
.icon.undo { background-position: -80px 0;}
.icon.redo { background-position: -100px 0;}
@@ -741,28 +735,18 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.feature-list {
width:100%;
padding: 20px 20px 10px 20px;
border-bottom: 1px solid #ccc;
}
.feature-list-item {
width: 100%;
height: 60px;
margin-bottom: 10px;
position: relative;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-radius: 0;
}
.feature-list-item .label {
background-color: #f6f6f6;
text-align: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 5px 10px;
left: 60px;
line-height: 50px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -770,15 +754,27 @@ a:hover .icon.out-link { background-position: -500px -14px;}
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
border-radius: 0 3px 3px 0;
}
.feature-list-item .label .icon {
opacity: .5;
}
.feature-list-item:hover .label {
background-color: #ececec;
}
.feature-list-item .entity-type {
color:#7092ff;
}
.feature-list-item:hover .entity-type {
color:#597be7;
}
.feature-list-item .entity-name {
font-weight: normal;
color: #666;
padding-left: 10px;
}
@@ -1030,10 +1026,6 @@ a:hover .icon.out-link { background-position: -500px -14px;}
}
/* Preset form (hover mode) */
.inspector-hover .header {
background-color: #f6f6f6;
}
.inspector-hover textarea,
.inspector-hover input,
.inspector-hover .form-label,
@@ -1047,11 +1039,11 @@ a:hover .icon.out-link { background-position: -500px -14px;}
/* hide and remove from layout */
.inspector-hidden,
.inspector-hover .checkselect label input[type="checkbox"],
.inspector-hover .toggle-list button::before,
.inspector-hover .toggle-list button:not(.active),
.inspector-hover .checkselect label input[type="radio"],
.inspector-hover .toggle-list label:not(.active),
.inspector-hover .inspector-inner .add-tag,
.inspector-hover .inspector-inner .add-relation,
.inspector-hover .toggle-list button.remove .icon {
.inspector-hover .toggle-list label.remove .icon {
height: 0;
width: 0;
overflow: hidden;
@@ -1097,7 +1089,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
}
/* Unstyle button fields */
.inspector-hover .toggle-list button.active,
.inspector-hover .toggle-list label.active,
.inspector-hover .entity-editor-pane a.hide-toggle {
opacity: 1;
background-color: transparent;
@@ -1120,7 +1112,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
}
/* Hide placeholder for radio buttons if another is active, or not in hover state */
.toggle-list button.active ~ .placeholder,
.toggle-list label.active ~ .placeholder,
.toggle-list .placeholder {
padding: 0;
opacity: 0;
@@ -1135,14 +1127,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
}
/* first phase hover-to-active animations */
.header {
-webkit-transition: background-color 200ms;
-moz-transition: background-color 200ms;
-o-transition: background-color 200ms;
transition: background-color 200ms;
}
header,
textarea,
.form-label,
.preset-input-wrap,
@@ -1171,8 +1156,8 @@ input,
.more-buttons,
.view-on-osm,
.hide-toggle:before,
.entity-editor-pane .toggle-list button::before,
.entity-editor-pane .toggle-list button.remove .icon {
.entity-editor-pane .toggle-list label::before,
.entity-editor-pane .toggle-list label.remove .icon {
-webkit-transition: opacity 200ms 200ms;
-moz-transition: opacity 200ms 200ms;
-o-transition: opacity 200ms 200ms;
@@ -1186,14 +1171,14 @@ input,
transition: padding-left 200ms 200ms, color 200ms 200ms;
}
.entity-editor-pane .toggle-list button:not(.active) {
.entity-editor-pane .toggle-list label:not(.active) {
-webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
-moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
-o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
}
.entity-editor-pane .toggle-list button {
.entity-editor-pane .toggle-list label {
-webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
@@ -1361,12 +1346,6 @@ input[type=number] {
color: inherit;
}
.checkselect input[type="checkbox"] {
margin-right: 5px;
width: 20px;
vertical-align: middle;
}
.checkselect label:not(.set) input[type="checkbox"] {
opacity: .5;
}
@@ -1605,7 +1584,7 @@ div.combobox {
height: 31px;
right: 10%;
border: 1px solid #CCC;
border-top-width: 0;
border-top-width: 0;
border-left-width: 0;
}
js/id/ui/background.js
+14 -9
View File
@@ -33,7 +33,7 @@ iD.ui.Background = function(context) {
}
function selectLayer() {
content.selectAll('button.layer')
content.selectAll('label.layer')
.classed('active', function(d) {
var overlay = context.map().layers[2].source();
return d.data.name === context.background().source().data.name ||
@@ -85,16 +85,15 @@ iD.ui.Background = function(context) {
function drawList(layerList, click, filter) {
var layerLinks = layerList.selectAll('button.layer')
var layerLinks = layerList.selectAll('label.layer')
.data(getSources().filter(filter), function(d) {
return d.data.name;
});
var layerInner = layerLinks.enter()
.append('button');
.append('label');
layerInner
.attr('href', '#')
.attr('class', 'layer')
.on('click.set-source', click);
@@ -106,6 +105,11 @@ iD.ui.Background = function(context) {
.placement('right')
);
layerInner.insert('input')
.attr('type','radio')
.attr('name','layers')
.attr('value',function(d) { return d.data.name;});
layerInner.insert('span').text(function(d) {
return d.data.name;
});
@@ -113,7 +117,7 @@ iD.ui.Background = function(context) {
layerLinks.exit()
.remove();
layerList.style('display', layerList.selectAll('button.layer').data().length > 0 ? 'block' : 'none');
layerList.style('display', layerList.selectAll('label.layer').data().length > 0 ? 'block' : 'none');
}
function update() {
@@ -165,11 +169,12 @@ iD.ui.Background = function(context) {
.title(iD.ui.tooltipHtml(t('background.description'), key));
function hide() { setVisible(false); }
function toggle() {
if (d3.event) d3.event.preventDefault();
tooltip.hide(button);
setVisible(!button.classed('active'));
content.selectAll('.toggle-list button:first-child').node().focus();
content.selectAll('.toggle-list label:first-child').node().focus();
}
function setVisible(show) {
@@ -239,13 +244,13 @@ iD.ui.Background = function(context) {
var overlayList = content
.append('div')
.attr('class', 'toggle-list layer-list check-list');
.attr('class', 'toggle-list layer-list');
var gpxLayerItem = content
.append('div')
.style('display', iD.detect().filedrop ? 'block' : 'none')
.attr('class', 'toggle-list layer-list check-list')
.append('button')
.attr('class', 'toggle-list layer-list')
.append('label')
.classed('layer-toggle-gpx', true)
.on('click.set-gpx', clickGpx);
js/id/ui/feature_list.js
+5 -5
View File
@@ -1,7 +1,7 @@
iD.ui.FeatureList = function(context) {
function featureList(selection) {
var header = selection.append('div')
.attr('class', 'header fillL cf');
.attr('class', 'header cf');
header.append('h3')
.text(t('inspector.feature_list'));
@@ -33,7 +33,7 @@ iD.ui.FeatureList = function(context) {
.attr('class', 'inspector-body');
var list = listWrap.append('div')
.attr('class', 'feature-list fillL cf');
.attr('class', 'feature-list cf');
context.map()
.on('drawn.feature-list', mapDrawn);
@@ -90,9 +90,6 @@ iD.ui.FeatureList = function(context) {
var enter = items.enter().append('button')
.attr('class', 'feature-list-item')
.call(iD.ui.PresetIcon()
.geometry(function(d) { return d.geometry })
.preset(function(d) { return d.preset; }))
.on('mouseover', function(d) { mouseover(d.entity); })
.on('mouseout', function(d) { mouseout(); })
.on('click', function(d) { click(d.entity); });
@@ -100,6 +97,9 @@ iD.ui.FeatureList = function(context) {
var label = enter.append('div')
.attr('class', 'label');
label.append('span')
.attr('class', function(d) { return d.geometry + ' icon icon-pre-text'; });
label.append('span')
.attr('class', 'entity-type')
.text(function(d) { return d.preset.name(); });
js/id/ui/preset/radio.js
+11 -4
View File
@@ -12,10 +12,17 @@ iD.ui.preset.radio = function(field) {
var buttonWrap = wrap.enter().append('div')
.attr('class', 'preset-input-wrap toggle-list');
buttons = wrap.selectAll('button')
buttons = wrap.selectAll('label')
.data(field.options || field.keys);
buttons.enter().append('button')
var button = buttons.enter().append('label');
button.append('input')
.attr('type','radio')
.attr('name',field.label)
.attr('value', function(d) { return field.t('options.' + d, { 'default': d }); });
button.append('span')
.text(function(d) { return field.t('options.' + d, { 'default': d }); });
buttons
@@ -29,10 +36,10 @@ iD.ui.preset.radio = function(field) {
.attr('class','placeholder')
.text(field.placeholder());
var remove = wrap.selectAll('button.remove')
var remove = wrap.selectAll('label.remove')
.data([0]);
remove.enter().append('button')
remove.enter().append('label')
.attr('class', 'remove')
.text(t('inspector.remove'))
.append('span')