diff --git a/css/style.css b/css/style.css index 63ff2a34..cc008279 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/index.html b/index.html index f6425221..62fba7a2 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,7 @@ - - +
@@ -54,12 +53,20 @@
- +
+
+
+
+
+
+
+
+
+
diff --git a/js/controller/SettingsController.js b/js/controller/SettingsController.js index 7752b145..06c38e06 100644 --- a/js/controller/SettingsController.js +++ b/js/controller/SettingsController.js @@ -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'); + } }); }; })(); \ No newline at end of file