mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Adding simple backgorund picker (without persistence)

Browse Source
This commit is contained in:
Vince 2013-06-17 11:36:56 +02:00
parent cc3bd72b86
commit 97ddc6ecc1
3 changed files with 63 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/style.css
View File

@ -127,8 +127,39 @@ body {
padding-bottom: 5px;
}
.settings-item {
.settings-item {}
.background-picker-wrapper {
overflow: hidden;
padding: 10px 5px 20px 5px;
}
.background-picker {
cursor: pointer;
float: left;
height: 35px;
width: 35px;
background-color: transparent;
margin-right: 15px;
padding: 1px;
position: relative;
}
.background-picker:after {
content: " ";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
}
.background-picker:hover:after {
border: #eee 1px solid;
}
.background-picker.selected:after {
border: gold 1px solid;
}
/**
@ -146,7 +177,6 @@ body {
}
.canvas-container .canvas-background {
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
position: absolute;
top: 0;
right: 0;
@ -154,18 +184,22 @@ body {
left: 0;
}
.light-picker-background,
.light-canvas-background .canvas-background {
background: url(../img/canvas_background/light_canvas_background.png) repeat;
}
.medium-picker-background,
.medium-canvas-background .canvas-background {
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
}
.lowcont-medium-picker-background,
.lowcont-medium-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
}
.lowcont-dark-picker-background,
.lowcont-dark-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
}

23
index.html
View File

@ -15,8 +15,7 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head>
<body>
<body class="medium-canvas-background" data-current-background="medium-canvas-background">
<div class="sticky-section left-sticky-section" id="tool-section">
<div class="wrap">
<ul id="tools-container" class="tools-wrapper"></ul>
@ -54,12 +53,20 @@
</div>
<div class="settings-item">
<label>Background:</label>
<select id="canvas-picker">
<option value="light-canvas-background">Light</option>
<option value="lowcont-medium-canvas-background">Medium - low contrast</option>
<option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
<option value="lowcont-dark-canvas-background">Dark - low constrast</option>
</select>
<div id="background-picker-wrapper" class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background selected" data-background="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
<div class="settings-item">
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>

17
js/controller/SettingsController.js
View File

@ -35,11 +35,18 @@
}, this));
// Handle canvas background changes:
$('#canvas-picker').change(function(evt) {
$('#canvas-picker option:selected').each(function() {
console.log($(this).val());
$('html')[0].className = $(this).val();
});
$('#background-picker-wrapper').click(function(evt) {
var target = $(evt.target).closest('.background-picker');
if (target.length) {
var backgroundClass = target.data('background');
var body = $('body');
body.removeClass(body.data('current-background'));
body.addClass(backgroundClass);
body.data('current-background', backgroundClass);
$('.background-picker').removeClass('selected');
target.addClass('selected');
}
});
};
})();