Added icons, changed button style.

This commit is contained in:
Paul Annekov
2015-07-22 00:14:48 +03:00
parent 8a933a5fa5
commit fb1af6afe3
5 changed files with 156 additions and 13 deletions
+20 -1
View File
@@ -70,13 +70,32 @@ body {
background: black;
}
.full-screen {
div.full-screen {
position: absolute;
width: 40px;
right: 10px;
top: 10px;
}
button.full-screen {
width: 100%;
position: relative;
}
button.full-screen, button.full-screen.active {
width: 40px;
height: 40px;
background: transparent url(img/fullscreen_request.svg) no-repeat center;
}
button.full-screen.active {
background-image: url(img/fullscreen_exit.svg);
}
button.full-screen:hover, button.full-screen:focus {
background-color: rgba(0, 0, 0, .8);
}
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;
+64
View File
@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="16"
version="1.1"
viewBox="0 0 16 16"
width="16"
xml:space="preserve"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="fullscreen_exit.svg"><metadata
id="metadata20"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs18" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1149"
id="namedview16"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="7.375"
inkscape:cx="-14.983051"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="Layer_1"
transform="scale(0.5,0.5)"
style="fill:#ffffff" /><g
id="fullscreen_x5F_exit_x5F_alt"
transform="scale(0.5,0.5)"
style="fill:#ffffff"><g
id="g6"
style="fill:#ffffff"><polygon
points="28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 25.414,22.586 "
style="fill:#ffffff"
id="polygon8" /><polygon
points="9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 12,4 "
style="fill:#ffffff"
id="polygon10" /><polygon
points="12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 12,28 "
style="fill:#ffffff"
id="polygon12" /><polygon
points="22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 29.164,0 "
style="fill:#ffffff"
id="polygon14" /></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+64
View File
@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="16"
version="1.1"
viewBox="0 0 16 16"
width="16"
xml:space="preserve"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="fullscreen_request.svg"><metadata
id="metadata20"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs18" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1149"
id="namedview16"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="7.375"
inkscape:cx="-14.983051"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="Layer_1"
transform="scale(0.5,0.5)"
style="fill:#ffffff" /><g
id="fullscreen_x5F_alt"
transform="scale(0.5,0.5)"
style="fill:#ffffff"><g
id="g6"
style="fill:#ffffff"><polygon
points="24,32 32,32 32,24 29.414,26.586 22.828,20 20,22.828 26.586,29.414 "
style="fill:#ffffff"
id="polygon8" /><polygon
points="8,0 0,0 0,8 2.586,5.414 9.172,12 12,9.172 5.414,2.586 "
style="fill:#ffffff"
id="polygon10" /><polygon
points="32,8 32,0 24,0 26.586,2.586 20,9.172 22.828,12 29.414,5.414 "
style="fill:#ffffff"
id="polygon12" /><polygon
points="0,32 8,32 5.414,29.414 12,22.828 9.172,20 2.586,26.586 0,24 "
style="fill:#ffffff"
id="polygon14" /></g></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+1 -2
View File
@@ -431,8 +431,7 @@
}
},
"full_screen": {
"title": "FS",
"tooltip": "Toggle Full Screen mode"
"tooltip": "Toggle Full Screen"
},
"merge_remote_changes": {
"conflict": {
+7 -10
View File
@@ -1,5 +1,5 @@
iD.ui.FullScreen = function(context) {
var element = context.container().node();
var element = context.container().node(), button;
function getFullScreenFn() {
if (element.requestFullscreen) {
@@ -37,8 +37,10 @@ iD.ui.FullScreen = function(context) {
function fullScreen() {
d3.event.preventDefault();
if (!isFullScreen()) {
button.classed('active', true);
getFullScreenFn().apply(element);
} else {
button.classed('active', false);
getExitFullScreenFn().apply(document);
}
}
@@ -48,18 +50,13 @@ iD.ui.FullScreen = function(context) {
return;
var tooltip = bootstrap.tooltip()
.placement('left')
.html(true)
.title(iD.ui.tooltipHtml(t('full_screen.tooltip')));
.placement('left');
var button = selection.append('button')
.attr('class', 'save col12')
button = selection.append('button')
.attr('class', 'full-screen')
.attr('title', t('full_screen.tooltip'))
.attr('tabindex', -1)
.on('click', fullScreen)
.call(tooltip);
button.append('span')
.attr('class', 'label')
.text(t('full_screen.title'));
};
};