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
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; padding-bottom: 5px;
} }
.settings-item { .settings-item {}
.background-picker-wrapper {
overflow: hidden;
padding: 10px 5px 20px 5px;
}
.background-picker {
cursor: pointer; 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 { .canvas-container .canvas-background {
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -154,18 +184,22 @@ body {
left: 0; left: 0;
} }
.light-picker-background,
.light-canvas-background .canvas-background { .light-canvas-background .canvas-background {
background: url(../img/canvas_background/light_canvas_background.png) repeat; background: url(../img/canvas_background/light_canvas_background.png) repeat;
} }
.medium-picker-background,
.medium-canvas-background .canvas-background { .medium-canvas-background .canvas-background {
background: url(../img/canvas_background/medium_canvas_background.png) repeat; background: url(../img/canvas_background/medium_canvas_background.png) repeat;
} }
.lowcont-medium-picker-background,
.lowcont-medium-canvas-background .canvas-background { .lowcont-medium-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
} }
.lowcont-dark-picker-background,
.lowcont-dark-canvas-background .canvas-background { .lowcont-dark-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; 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/bootstrap/bootstrap-tooltip-custom.css">
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head> </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="sticky-section left-sticky-section" id="tool-section">
<div class="wrap"> <div class="wrap">
<ul id="tools-container" class="tools-wrapper"></ul> <ul id="tools-container" class="tools-wrapper"></ul>
@@ -54,12 +53,20 @@
</div> </div>
<div class="settings-item"> <div class="settings-item">
<label>Background:</label> <label>Background:</label>
<select id="canvas-picker"> <div id="background-picker-wrapper" class="background-picker-wrapper">
<option value="light-canvas-background">Light</option> <div class="background-picker light-picker-background" data-background="light-canvas-background"
<option value="lowcont-medium-canvas-background">Medium - low contrast</option> rel="tooltip" data-placement="bottom" title="light / high contrast">
<option value="medium-canvas-background" selected="selected">Medium - high contrast</option> </div>
<option value="lowcont-dark-canvas-background">Dark - low constrast</option> <div class="background-picker medium-picker-background selected" data-background="medium-canvas-background"
</select> 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>
<div class="settings-item"> <div class="settings-item">
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/> <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)); }, this));
// Handle canvas background changes: // Handle canvas background changes:
$('#canvas-picker').change(function(evt) { $('#background-picker-wrapper').click(function(evt) {
$('#canvas-picker option:selected').each(function() { var target = $(evt.target).closest('.background-picker');
console.log($(this).val()); if (target.length) {
$('html')[0].className = $(this).val(); 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');
}
}); });
}; };
})(); })();