mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Horizontal frames (WIP) + Inital DnD + color tuning
Adding dnd state: - DnD state + DnD handle - horizontal frames experiment WIP - try out gold color for selected tools
This commit is contained in:
Vince
parent
0d0aedc93a
commit
5ff471e58f
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body class="grid-mode">
|
||||
<body class="hor-list-mode">
|
||||
<div class="main-wrapper">
|
||||
<div class="tools">
|
||||
<div class="tool pen"></div>
|
||||
|
|
@ -18,81 +18,96 @@
|
|||
<div class="tool pen"></div>
|
||||
<div class="tool bucket has-group"></div>
|
||||
</div>
|
||||
<div class="canvas">
|
||||
<img class="pusher" src="img/transparent_background.png"/>
|
||||
<div id="canvas" class="canvas">
|
||||
<div class="draw-area draw-area-5"></div>
|
||||
</div>
|
||||
<div id="previewlist" class="previewlist">
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">1</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item selected">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="preview-item">
|
||||
<div class="tile-count preview-item-overlay">2</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">3</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">4</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">5</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">6</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
</div>
|
||||
<div class="drop-target preview-item">
|
||||
<div class="preview-item drag-target">
|
||||
<div class="tile-count preview-item-overlay">15</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">7</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">8</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">9</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">10</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">11</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">12</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">13</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<img src="img/preview-state-1.png">
|
||||
<div class="tile-count preview-item-overlay">14</div>
|
||||
<div class="tile-close preview-item-overlay"></div>
|
||||
<div class="tile-dnd preview-item-overlay"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="animpreview">
|
||||
<div class="animpreview-inner">
|
||||
|
|
@ -101,10 +116,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ux-options">
|
||||
Tile view mode:
|
||||
<button id="toggle-mode">grid</button>
|
||||
<button id="toggle-frame-mode">Toggle tile modes</button>
|
||||
<br/>
|
||||
Draw canvas background:
|
||||
Toggle canvas background:
|
||||
<select id="change-draw-area">
|
||||
<option value="1">rich-texture-1</value>
|
||||
<option value="2">falloutjacket</value>
|
||||
|
|
@ -112,6 +126,8 @@
|
|||
<option value="4">rich-texture-2</value>
|
||||
<option value="5">sober</value>
|
||||
</select>
|
||||
<br/>
|
||||
<button id="toggle-dnd-state">DnD states</button>
|
||||
</div>
|
||||
<script src="jquery-1.8.0.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
|
|
|||
|
|
@ -49,12 +49,20 @@ body {
|
|||
.tool.pen { background-image: url(img/pen-icon.png); }
|
||||
.tool.eyedropper { background-image: url(img/eyedropper-icon.png);}
|
||||
|
||||
.tool.selected,
|
||||
.tool:hover {
|
||||
cursor: pointer;
|
||||
background-color: #6b5f68; /*rgba(240,200,230, .3);*/
|
||||
}
|
||||
|
||||
.tool.selected {
|
||||
cursor: default;
|
||||
background-color: #444;
|
||||
cursor: normal;
|
||||
border: 1px gold solid;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.tool.has-group:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
|
|
@ -85,16 +93,6 @@ body {
|
|||
position: absolute;
|
||||
top:0; right: 0; bottom: 0; left: 0;
|
||||
box-shadow: 0 0 8px 5px #444;
|
||||
/*
|
||||
background: repeat url(img/transparent_background.png);
|
||||
*/
|
||||
/*
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
|
||||
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
|
||||
background-size:60px 60px;
|
||||
background-position:0 0, 30px 30px
|
||||
*/
|
||||
}
|
||||
|
||||
.canvas .draw-area-1 {
|
||||
|
|
@ -141,12 +139,6 @@ body {
|
|||
background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
|
||||
}
|
||||
|
||||
.canvas .pusher {
|
||||
height: 100%;
|
||||
float: left;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.previewlist {
|
||||
float: left;
|
||||
background-color: #111;
|
||||
|
|
@ -157,12 +149,15 @@ body {
|
|||
|
||||
.preview-item {
|
||||
position: relative;
|
||||
border: #444 6px solid;
|
||||
border: #444 3px solid;
|
||||
border-radius: 3px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 0;
|
||||
background: no-repeat url(img/preview-state-1.png);
|
||||
background-size: 90px;
|
||||
}
|
||||
|
||||
.preview-item.selected {
|
||||
|
|
@ -195,6 +190,7 @@ body {
|
|||
left: 0;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.preview-item-overlay.tile-close {
|
||||
|
|
@ -217,10 +213,64 @@ body {
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.preview-item-overlay.tile-dnd {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-top-right-radius: 3px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.preview-item-overlay.tile-dnd:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
background: no-repeat url(img/dragndrop.png) 5px 5px;
|
||||
background-size: 20px 20px;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preview-item img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drop-target.preview-item {
|
||||
width: 0;
|
||||
border: none;
|
||||
background-image: none;
|
||||
margin-right: 0;
|
||||
background-color: #333;
|
||||
opacity: 0;
|
||||
transition-property: width, opacity;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.drag-target.preview-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dnd-state1 .drop-target.preview-item {
|
||||
border: #444 3px dashed;
|
||||
margin-right: 5px;
|
||||
width: 90px;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.dnd-state1 .drag-target.preview-item {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
opacity: 0.6;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/** Grid mode */
|
||||
|
||||
.grid-mode .previewlist {
|
||||
float: none;
|
||||
width: auto;
|
||||
|
|
@ -236,6 +286,47 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/** Horizontal list mode */
|
||||
|
||||
.hor-list-mode .main-wrapper {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.hor-list-mode .previewlist {
|
||||
float: none;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 115px;
|
||||
right: 0;
|
||||
height: 115px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.hor-list-mode .preview-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hor-list-mode .preview-item:last-child {
|
||||
margin-right: 1000px;
|
||||
}
|
||||
|
||||
.hor-list-mode .preview-item.selected:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
border: transparent 4px solid;
|
||||
left: 38px;
|
||||
border-bottom-color: gold;
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.animpreview {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
|
@ -270,4 +361,4 @@ body {
|
|||
border: #fff solid 3px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,75 @@
|
|||
$().ready(function(){
|
||||
|
||||
var body = $('body');
|
||||
var mainWrapper = $(".main-wrapper");
|
||||
var canvas = $("#canvas");
|
||||
|
||||
var resizeCanvas = function() {
|
||||
canvas.height(mainWrapper.height());
|
||||
canvas.width(mainWrapper.height());
|
||||
};
|
||||
|
||||
var selectTile = function(tileElement) {
|
||||
$('.preview-item').removeClass('selected');
|
||||
tileElement.addClass('selected');
|
||||
if(body.hasClass('hor-list-mode')) {
|
||||
var index = $('.preview-item:not(.drop-target)').index(tileElement);
|
||||
console.log(index);
|
||||
$('.previewlist').animate({
|
||||
scrollLeft: -100 + 100 * index
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
selectTile($('.preview-item').eq(4));
|
||||
|
||||
$(document).on('click', '.tile-close', function(evt) {
|
||||
$(evt.target).closest('.preview-item').remove();
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-item', function(evt) {
|
||||
$('.preview-item').removeClass('selected');
|
||||
$(evt.target).closest('.preview-item').addClass('selected');
|
||||
selectTile($(evt.target).closest('.preview-item'));
|
||||
});
|
||||
|
||||
$(document).on('click', '#toggle-mode', function(evt) {
|
||||
$('body').toggleClass('grid-mode');
|
||||
$(document).on('click', '.tool', function(evt) {
|
||||
$('.tool').removeClass('selected');
|
||||
$(evt.target).closest('.tool').addClass('selected');
|
||||
});
|
||||
/*
|
||||
$(document).on('click', '#change-draw-area', function(evt) {
|
||||
$('body').toggleClass('grid-mode');
|
||||
});*/
|
||||
|
||||
$(window).resize(resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
/**
|
||||
* Admin stuff
|
||||
*/
|
||||
|
||||
$(document).on('click', '#toggle-frame-mode', function(evt) {
|
||||
if(body.hasClass('grid-mode')) {
|
||||
$('body').removeClass('grid-mode');
|
||||
$('body').addClass('hor-list-mode');
|
||||
} else if (body.hasClass('hor-list-mode')) {
|
||||
$('body').removeClass('hor-list-mode');
|
||||
$('body').addClass('vert-list-mode');
|
||||
}
|
||||
else if (body.hasClass('vert-list-mode')) {
|
||||
$('body').removeClass('vert-list-mode');
|
||||
$('body').addClass('grid-mode');
|
||||
}
|
||||
resizeCanvas();
|
||||
});
|
||||
|
||||
$(document).on('click', '#toggle-dnd-state', function(evt) {
|
||||
|
||||
body.toggleClass('dnd-state1');
|
||||
});
|
||||
|
||||
$("#change-draw-area").change(function () {
|
||||
var str = "";
|
||||
$("#change-draw-area option:selected").each(function () {
|
||||
str = $(this).val();
|
||||
});
|
||||
$(".canvas .draw-area").attr('class', 'draw-area draw-area-'+ str);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user