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

Horizontal frames (WIP) + Inital DnD + color tuning

Browse Source 
Adding dnd state:
  - DnD state + DnD handle
  - horizontal frames experiment WIP
  - try out gold color for selected tools
This commit is contained in:
Vince 2013-06-07 00:58:39 +02:00
parent 0d0aedc93a
commit 5ff471e58f
3 changed files with 204 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
resources/proto-ui-1/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body class="grid-mode"> <body class="hor-list-mode">
<div class="main-wrapper"> <div class="main-wrapper">
<div class="tools"> <div class="tools">
<div class="tool pen"></div> <div class="tool pen"></div>
@ -18,81 +18,96 @@
<div class="tool pen"></div> <div class="tool pen"></div>
<div class="tool bucket has-group"></div> <div class="tool bucket has-group"></div>
</div> </div>
<div class="canvas"> <div id="canvas" class="canvas">
<img class="pusher" src="img/transparent_background.png"/>
<div class="draw-area draw-area-5"></div> <div class="draw-area draw-area-5"></div>
</div> </div>
<div id="previewlist" class="previewlist"> <div id="previewlist" class="previewlist">
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">1</div> <div class="tile-count preview-item-overlay">1</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item selected"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">2</div> <div class="tile-count preview-item-overlay">2</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">3</div> <div class="tile-count preview-item-overlay">3</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">4</div> <div class="tile-count preview-item-overlay">4</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">5</div> <div class="tile-count preview-item-overlay">5</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">6</div> <div class="tile-count preview-item-overlay">6</div>
<div class="tile-close preview-item-overlay"></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>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">7</div> <div class="tile-count preview-item-overlay">7</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">8</div> <div class="tile-count preview-item-overlay">8</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">9</div> <div class="tile-count preview-item-overlay">9</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">10</div> <div class="tile-count preview-item-overlay">10</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">11</div> <div class="tile-count preview-item-overlay">11</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">12</div> <div class="tile-count preview-item-overlay">12</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">13</div> <div class="tile-count preview-item-overlay">13</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
<div class="preview-item"> <div class="preview-item">
<img src="img/preview-state-1.png">
<div class="tile-count preview-item-overlay">14</div> <div class="tile-count preview-item-overlay">14</div>
<div class="tile-close preview-item-overlay"></div> <div class="tile-close preview-item-overlay"></div>
<div class="tile-dnd preview-item-overlay"></div>
</div> </div>
</div> </div>
<div class="animpreview"> <div class="animpreview">
<div class="animpreview-inner"> <div class="animpreview-inner">
@ -101,10 +116,9 @@
</div> </div>
</div> </div>
<div class="ux-options"> <div class="ux-options">
Tile view mode: <button id="toggle-frame-mode">Toggle tile modes</button>
<button id="toggle-mode">grid</button>
<br/> <br/>
Draw canvas background: Toggle canvas background:
<select id="change-draw-area"> <select id="change-draw-area">
<option value="1">rich-texture-1</value> <option value="1">rich-texture-1</value>
<option value="2">falloutjacket</value> <option value="2">falloutjacket</value>
@ -112,6 +126,8 @@
<option value="4">rich-texture-2</value> <option value="4">rich-texture-2</value>
<option value="5">sober</value> <option value="5">sober</value>
</select> </select>
<br/>
<button id="toggle-dnd-state">DnD states</button>
</div> </div>
<script src="jquery-1.8.0.js"></script> <script src="jquery-1.8.0.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

129
resources/proto-ui-1/main.css
View File

@ -49,12 +49,20 @@ body {
.tool.pen { background-image: url(img/pen-icon.png); } .tool.pen { background-image: url(img/pen-icon.png); }
.tool.eyedropper { background-image: url(img/eyedropper-icon.png);} .tool.eyedropper { background-image: url(img/eyedropper-icon.png);}
.tool.selected,
.tool:hover { .tool:hover {
cursor: pointer; cursor: pointer;
background-color: #6b5f68; /*rgba(240,200,230, .3);*/ 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 { .tool.has-group:after {
content: " "; content: " ";
position: absolute; position: absolute;
@ -85,16 +93,6 @@ body {
position: absolute; position: absolute;
top:0; right: 0; bottom: 0; left: 0; top:0; right: 0; bottom: 0; left: 0;
box-shadow: 0 0 8px 5px #444; 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 { .canvas .draw-area-1 {
@ -141,12 +139,6 @@ body {
background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px; background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
} }
.canvas .pusher {
height: 100%;
float: left;
background-color: red;
}
.previewlist { .previewlist {
float: left; float: left;
background-color: #111; background-color: #111;
@ -157,12 +149,15 @@ body {
.preview-item { .preview-item {
position: relative; position: relative;
border: #444 6px solid; border: #444 3px solid;
border-radius: 3px; border-radius: 3px;
width: 90px; width: 90px;
height: 90px;
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
font-size: 0; font-size: 0;
background: no-repeat url(img/preview-state-1.png);
background-size: 90px;
} }
.preview-item.selected { .preview-item.selected {
@ -195,6 +190,7 @@ body {
left: 0; left: 0;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
cursor: default;
} }
.preview-item-overlay.tile-close { .preview-item-overlay.tile-close {
@ -217,10 +213,64 @@ body {
z-index: 10; 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 { .preview-item img {
width: 100%; 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 { .grid-mode .previewlist {
float: none; float: none;
width: auto; width: auto;
@ -236,6 +286,47 @@ body {
display: none; 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 { .animpreview {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -270,4 +361,4 @@ body {
border: #fff solid 3px; border: #fff solid 3px;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
} }

66
resources/proto-ui-1/main.js
View File

@ -1,27 +1,75 @@
$().ready(function(){ $().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) { $(document).on('click', '.tile-close', function(evt) {
$(evt.target).closest('.preview-item').remove(); $(evt.target).closest('.preview-item').remove();
}); });
$(document).on('click', '.preview-item', function(evt) { $(document).on('click', '.preview-item', function(evt) {
$('.preview-item').removeClass('selected'); selectTile($(evt.target).closest('.preview-item'));
$(evt.target).closest('.preview-item').addClass('selected');
}); });
$(document).on('click', '#toggle-mode', function(evt) { $(document).on('click', '.tool', function(evt) {
$('body').toggleClass('grid-mode'); $('.tool').removeClass('selected');
$(evt.target).closest('.tool').addClass('selected');
}); });
/*
$(document).on('click', '#change-draw-area', function(evt) { $(window).resize(resizeCanvas);
$('body').toggleClass('grid-mode'); 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 () { $("#change-draw-area").change(function () {
var str = ""; var str = "";
$("#change-draw-area option:selected").each(function () { $("#change-draw-area option:selected").each(function () {
str = $(this).val(); str = $(this).val();
}); });
$(".canvas .draw-area").attr('class', 'draw-area draw-area-'+ str); $(".canvas .draw-area").attr('class', 'draw-area draw-area-'+ str);
}) });
}); });