CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-06-03 13:38:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

progress on preset ui styling.

Browse Source
This commit is contained in:
Saman Bemel-Benrud
2013-02-20 17:44:46 -05:00
parent edbbc810f0
commit 1c7add8e42
4 changed files with 92 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+54 -91
View File
@@ -30,7 +30,7 @@ div, textarea, input, form, span, ul, li, ol, a, button {
box-sizing: border-box;
}
a, button, input, textarea, .preset-grid .grid-inner {
a, button, input, textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-touch-callout:none;
cursor:url(../img/cursor-pointer.png) 6 1, auto;
@@ -56,8 +56,7 @@ h3 {
h4 {
font-size: 12px;
font-weight: normal;
font-style: italic;
font-weight: bold;
padding-bottom: 10px;
}
@@ -96,12 +95,6 @@ a:hover {
/* Forms
------------------------------------------------------- */
input[type=text] {
padding:5px 10px;
height:30px;
resize: none;
}
.fillD textarea,
.fillD input[type=text] {
background-color: black;
@@ -115,11 +108,6 @@ input[type=text] {
border:1px solid rgba(255, 255, 255, .5);
}
.fillL textarea,
.fillL input[type=text],
.fillL input[type=url],
.fillL input[type=tel],
.fillL input[type=email],
textarea,
input[type=text],
input[type=url],
@@ -131,13 +119,27 @@ input[type=email] {
resize: vertical;
}
.fillL textarea:focus,
.fillL input[type=text]:focus,
textarea:focus,
input[type=text]:focus {
background-color: #ececec;
}
input[type=text] {
padding:5px 10px;
height:30px;
resize: none;
}
input[type=text].major {
width: 100%;
padding:5px 10px;
font-size: 18px;
font-weight: bold;
height:40px;
resize: none;
}
/* tables */
table {
@@ -524,62 +526,25 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
position: relative;
}
.inspector {
min-height: 60px;
position: relative;
border-radius: 0 0 0 10px;
.inspector-body {
overflow: auto;
max-height: 440px;
}
.inspector-inner {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.inspector-inner.message {
height: 60px;
border-bottom: 1px solid #ccc;
}
.inspector-inner.message h3 {
line-height: 40px;
}
.inspector-inner.type {
border: 1px solid #eee;
z-index:1;
position:relative;
}
.inspector-inner.type .preset-icon {
width: 24px;
height: 24px;
}
.inspector-inner.type .preset-label-wrap {
height: 50px;
display: inline-block;
padding: 10px;
}
.inspector-inner.type .preset-name {
margin: 0;
}
.inspector-inner .name-help,
.inspector-inner .type-help {
float: right;
}
.inspector-inner.head {
border: 1px solid #eee;
z-index:1;
position:relative;
}
.inspector-inner.head a {
text-decoration:none;
margin-right: 10px;
display: inline-block
}
.head label { display: block;}
.inspector-toggle {
color:#fff;
@@ -589,11 +554,21 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
border: 0;
}
.inspector-body {
overflow: auto;
max-height: 440px;
/* preset form */
.inspector-body .name-help,
.inspector-body .type-help {
position: absolute;
right: -10px;
}
.inspector-body .head .name {
padding-left: 10px;
}
.preset-input { padding-left: 10px;}
/* tag editor */
.tag-row {
width: 80%;
padding-right: 0px;
@@ -669,45 +644,40 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
}
/* Preset grid */
/* temp */
.preset-grid .grid-entry {
padding-bottom: 25%;
.grid-entry {
padding-bottom: 16.6666%;
min-height: 60px;
height: auto;
position: relative;
margin-bottom: 20px;
border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
border-radius: 0;
}
.preset-grid .grid-entry .grid-inner:hover {
background: #ececec;
.grid-inner {
position: absolute;
}
.grid-entry .grid-inner {
.grid-entry .icon {
position: absolute;
border: 1px solid #ccc;
left: 10px; right: 10px; top: 10px; bottom: 10px;
border-radius: 4px;
}
.preset-grid .grid-entry .icon {
left: 0; right: 0; top: 0; bottom: 0;
position: absolute;
display: block;
top: 20%;left: 0; right: 0;
margin: auto;
}
.preset-grid .grid-entry .label {
.grid-entry .label {
text-align: center;
display: block;
position: absolute;
bottom: -15px;
width: 100%;
top: 60%;
width: 80%;
left: 0; right: 0;
margin: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.preset-grid-search-wrap {
border-top: 1px solid #ccc;
padding: 20px;
}
.preset-grid-search {
@@ -715,6 +685,9 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
height: 20px;
}
/* Preset form */
/* Map Controls */
.map-control {
@@ -1493,16 +1466,6 @@ a.success-action {
stroke-dasharray: 5, 5;
}
.inspector-preset.cf,
.preset-section-input.cf {
width: 100%;
}
.preset-section.cf {
width: 100%;
margin-top: 10px;
}
.preset-search-input {
width:100%;
}
js/id/ui/preset.js
+5 -5
View File
@@ -114,14 +114,14 @@ iD.ui.preset = function() {
.data(preset.form)
.enter()
.append('div')
.attr('class', 'preset-section cf');
.attr('class', 'preset-section inspector-inner col12');
sections.each(function(d) {
var s = d3.select(this);
var wrap = s.append('div')
.attr('class', 'preset-section-input cf');
.attr('class', 'preset-section-input');
wrap.append('div')
.attr('class', 'col4 preset-label')
.attr('class', 'col3 preset-label')
.append('label')
.attr('for', 'input-' + d.key)
.text(d.title || d.key);
@@ -129,13 +129,13 @@ iD.ui.preset = function() {
// Single input element
if (d.key) {
input.call(wrap.append('div')
.attr('class', 'col8 preset-input'), d);
.attr('class', 'col9 preset-input'), d);
// Multiple elements, eg, address
} else {
if (d.type === 'address') {
wrap.append('div')
.attr('class', 'col8 preset-input', d)
.attr('class', 'col9 preset-input', d)
.call(iD.ui.preset.address()
.context(context)
.entity(entity));
js/id/ui/presetgrid.js
+4 -6
View File
@@ -12,11 +12,11 @@ iD.ui.PresetGrid = function() {
event.message('What kind of ' + entity.geometry(context.graph()) + ' are you adding?');
var grid = selection.append('div')
.attr('class', 'preset-grid fillL2 inspector-body pad1')
.attr('class', 'preset-grid fillD inspector-body')
.call(drawGrid, filter(''));
var searchwrap = selection.append('div')
.attr('class', 'preset-grid-search-wrap');
.attr('class', 'preset-grid-search-wrap pad2');
var search = searchwrap.append('input')
.attr('class', 'preset-grid-search')
@@ -47,16 +47,14 @@ iD.ui.PresetGrid = function() {
.data(presets.slice(0, 12), name);
var entered = entries.enter()
.append('div')
.append('button')
.attr('class', 'grid-entry col3')
.on('click', function(d) {
event.choose(d);
});
entered.append('div')
.attr('class','grid-inner fillL')
.append('div')
.attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; });
.attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; });
entered.append('span').attr('class','label').text(name);
entries.exit().remove();
js/id/ui/tageditor.js
+29 -27
View File
@@ -25,44 +25,46 @@ iD.ui.TagEditor = function() {
selection.html('');
var editorwrap = selection.append('div')
.attr('class', 'inspector-inner tag-wrap inspector-body');
.attr('class', 'tag-wrap inspector-body');
var typewrap = editorwrap.append('div')
.attr('class', 'type inspector-inner fillL')
var headerwrap = editorwrap.append('div').attr('class','col12 head inspector-inner');
typewrap = headerwrap.append('div')
.attr('class','col3');
typewrap.append('h4').text('Type');
typelabel = typewrap.append('button')
.attr('class','type col12')
.on('click', function() {
event.choose();
});
typewrap.append('h4')
.text('Type');
// typewrap.append('em')
// .attr('class', 'preset-geometry')
// .text(entity.geometry(context.graph()));
typewrap.append('div')
.attr('class', 'preset-icon' + (presetMatch ? ' maki-' + presetMatch.icon + '-24' : ''));
typelabel.append('div')
.attr('class', 'icon icon-pre-text' + (presetMatch ? ' maki-' + presetMatch.icon + '-24' : ''));
var typelabel = typewrap.append('div')
.attr('class', 'preset-label-wrap');
typelabel.append('h3')
.attr('class', 'preset-name')
.text(presetMatch ? presetMatch.name : 'Unknown type');
typelabel.append('span')
.attr('class', 'preset-geometry')
.text(entity.geometry(context.graph()));
typewrap.append('button')
typelabel.append('button')
.attr('tabindex', -1)
.attr('class', 'minor type-help')
.append('span')
.attr('class', 'icon inspect');
var namewrap = editorwrap.append('div')
.attr('class', 'head inspector-inner fillL'),
namelabel = namewrap.append('h4')
.text('Name');
var namewrap = headerwrap.append('div')
.attr('class', 'name col9');
typelabel.append('span')
.attr('class','label')
.text(presetMatch ? presetMatch.name : 'Unknown type');
namewrap.append('h4').text('Name');
var name = namewrap.append('input')
.attr('placeholder', 'name')
.attr('placeholder', 'unkown')
.attr('class', 'major')
.attr('type', 'text')
.property('value', function() {
return entity.tags.name || '';
@@ -85,7 +87,6 @@ iD.ui.TagEditor = function() {
name.property('value', tags.name);
});
presetUI = iD.ui.preset()
.context(context)
.entity(entity)
@@ -100,7 +101,7 @@ iD.ui.TagEditor = function() {
});
var tageditorpreset = editorwrap.append('div')
.attr('class', 'inspector-preset cf');
.attr('class', 'inspector-preset');
if (presetMatch && !tagview) {
tageditorpreset.call(presetUI
@@ -109,7 +110,8 @@ iD.ui.TagEditor = function() {
event.message('Edit ' + (presetMatch && presetMatch.name || ''));
var taglistwrap = editorwrap.append('div').call(tagList, !tagview);
var taglistwrap = editorwrap.append('div')
.attr('class','inspector-inner col12 fillL2').call(tagList, !tagview);
tageditor.tags(tags);
}