mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #468 from juliandescottes/fix-layersoverflow
Issue #467: fix max height for layers & panels lists
This commit is contained in:
Julian Descottes
commit
7e88aeb9a8
|
|
@ -13,6 +13,8 @@
|
|||
.column-wrapper {
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
|
||||
position: absolute;
|
||||
left: 100px; /* Reserve room for tools on the left edge of the screen. */
|
||||
top: 0;
|
||||
|
|
@ -20,10 +22,6 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
vertical-align: top;
|
||||
height: 100%;
|
||||
|
|
@ -36,10 +34,17 @@
|
|||
}
|
||||
|
||||
.right-column {
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
margin-left: 10px;
|
||||
/* Add some padding for the absolutely positioned .cursor-coordinates */
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.drawing-canvas-container {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
*/
|
||||
|
||||
.preview-container {
|
||||
flex-shrink: 0;
|
||||
|
||||
border : 0 Solid black;
|
||||
border-radius:5px 0 0 5px;
|
||||
box-shadow : 0 0 2px rgba(0,0,0,0.2);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,18 @@
|
|||
* Layers container
|
||||
*/
|
||||
.layers-list-container {
|
||||
min-height: 85px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layers title and toggle preview
|
||||
*/
|
||||
|
||||
.layers-title {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.layers-toggle-preview {
|
||||
|
|
@ -30,16 +38,32 @@
|
|||
color : gold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layers buttons
|
||||
*/
|
||||
|
||||
.layers-button {
|
||||
margin: 0;
|
||||
width: 16.66667%;
|
||||
float : left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layers list
|
||||
*/
|
||||
|
||||
.layers-list {
|
||||
font-size : 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
position: relative;
|
||||
height:24px;
|
||||
line-height: 24px;
|
||||
padding : 0 0 0 10px;
|
||||
padding: 0 0 0 10px;
|
||||
border-top: 1px solid #444;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
|
|
@ -55,23 +79,4 @@
|
|||
.current-layer-item:hover {
|
||||
background : #333;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.layers-button-container {
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
.layers-button {
|
||||
margin: 0;
|
||||
width: 16.66667%;
|
||||
float : left;
|
||||
}
|
||||
|
||||
/* @override */
|
||||
.layers-button-container .layers-button {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.layers-button:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
|
@ -1,146 +1,174 @@
|
|||
.palettes-list-container {
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.palettes-title {
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 97%;
|
||||
}
|
||||
.palettes-list-colors {
|
||||
overflow: auto;
|
||||
max-height: 160px;
|
||||
}
|
||||
.palettes-list-color {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0 0 5px 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 97%;
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(-n+10):after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/**
|
||||
* Palettes action buttons
|
||||
*/
|
||||
|
||||
background-color: black;
|
||||
color: gold;
|
||||
|
||||
font-family: Tahoma;
|
||||
font-size: 0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0 0 0 2px;
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(1):after {
|
||||
content: "1";
|
||||
}
|
||||
.palettes-list-color:nth-child(2):after {
|
||||
content: "2";
|
||||
}
|
||||
.palettes-list-color:nth-child(3):after {
|
||||
content: "3";
|
||||
}
|
||||
.palettes-list-color:nth-child(4):after {
|
||||
content: "4";
|
||||
}
|
||||
.palettes-list-color:nth-child(5):after {
|
||||
content: "5";
|
||||
}
|
||||
.palettes-list-color:nth-child(6):after {
|
||||
content: "6";
|
||||
}
|
||||
.palettes-list-color:nth-child(7):after {
|
||||
content: "7";
|
||||
}
|
||||
.palettes-list-color:nth-child(8):after {
|
||||
content: "8";
|
||||
}
|
||||
.palettes-list-color:nth-child(9):after {
|
||||
content: "9";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(-n+5) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.palettes-list-color div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div {
|
||||
width: 29px
|
||||
}
|
||||
.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
display: inline-block;
|
||||
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.palettes-list-primary-color:before {
|
||||
left: 1px;
|
||||
}
|
||||
.palettes-list-secondary-color:before {
|
||||
right: 1px;
|
||||
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
|
||||
}
|
||||
.palettes-list-actions {
|
||||
background-color: #3f3f3f;
|
||||
border-bottom-color: #222;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
.palettes-list-container .toolbox-buttons {
|
||||
background-color: #3f3f3f;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.palettes-list-button,
|
||||
.palettes-list-select {
|
||||
margin: 0;
|
||||
float: left;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.palettes-list-button {
|
||||
width: 16.66667%;
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
.palettes-list-select {
|
||||
width: 66.66667%;
|
||||
height: 100%;
|
||||
padding: 0 5px 0 5px;
|
||||
width: 66.66667%;
|
||||
height: 100%;
|
||||
padding: 0 5px 0 5px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px 0 1px 0;
|
||||
color: #aaa;
|
||||
font-size : 0.75em;
|
||||
|
||||
color: #aaa;
|
||||
font-size : 0.75em;
|
||||
text-align:left;
|
||||
font-weight: normal;
|
||||
|
||||
/*thanks firefox, you suck*/
|
||||
text-align:left;
|
||||
/*text-shadow:none;*/
|
||||
font-weight: normal;
|
||||
|
||||
transition : background-color 0.3s, color 0.3s;
|
||||
cursor:pointer;
|
||||
transition : background-color 0.3s, color 0.3s;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.palettes-list-select:hover {
|
||||
color: white;
|
||||
background-color: #484848;
|
||||
.palettes-list-select:hover,
|
||||
.palettes-list-select:focus {
|
||||
background-color: #484848;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.palettes-list-select:focus {
|
||||
background-color: #484848;
|
||||
color: white;
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palettes-list-no-colors {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
color: grey;
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
line-height: 42px;
|
||||
text-align: center
|
||||
/*
|
||||
* Palette colors list
|
||||
*/
|
||||
|
||||
.palettes-list-colors {
|
||||
height: 100%;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.palettes-list-color {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0 0 5px 5px;
|
||||
width: calc((100% - 30px) / 5);
|
||||
height: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.palettes-list-color div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Placeholder when no color is available in the current palette
|
||||
*/
|
||||
|
||||
.palettes-list-no-colors {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 100%;
|
||||
color: gray;
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary and secondary color markers
|
||||
*/
|
||||
|
||||
.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
display: inline-block;
|
||||
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.palettes-list-primary-color:before {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.palettes-list-secondary-color:before {
|
||||
right: 1px;
|
||||
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
/*
|
||||
* Color index for the 9 first colors
|
||||
*/
|
||||
|
||||
.palettes-list-color:nth-child(-n+10):after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: black;
|
||||
color: gold;
|
||||
|
||||
font-family: Tahoma;
|
||||
font-size: 0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0 0 0 2px;
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(1):after {
|
||||
content: "1";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(2):after {
|
||||
content: "2";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(3):after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(4):after {
|
||||
content: "4";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(5):after {
|
||||
content: "5";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(6):after {
|
||||
content: "6";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(7):after {
|
||||
content: "7";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(8):after {
|
||||
content: "8";
|
||||
}
|
||||
|
||||
.palettes-list-color:nth-child(9):after {
|
||||
content: "9";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
.toolbox-container {
|
||||
border: 4px solid #888;
|
||||
border: 2px solid #888;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
text-align: left;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -13,5 +12,23 @@
|
|||
padding: 8px;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
/* reset for firefox */
|
||||
height: 17px;
|
||||
background: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox-buttons {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #666;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.toolbox-buttons .button {
|
||||
/* Override border propery on .button elements from form.css */
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.toolbox-buttons button:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
.transformations-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.transformations-container .tool-icon {
|
||||
float:left;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
var PRIMARY_COLOR_CLASSNAME = 'palettes-list-primary-color';
|
||||
var SECONDARY_COLOR_CLASSNAME = 'palettes-list-secondary-color';
|
||||
|
||||
var HAS_SCROLL_CLASSNAME = 'palettes-list-has-scrollbar';
|
||||
// well ... I know that if there are more than 20 colors, a scrollbar will be displayed
|
||||
// It's linked to the max-height: 160px; defined in toolbox-palette-list.css !
|
||||
// I apologize to my future self for this one.
|
||||
var NO_SCROLL_MAX_COLORS = 20;
|
||||
|
||||
ns.PalettesListController = function (usedColorService) {
|
||||
this.usedColorService = usedColorService;
|
||||
this.paletteService = pskl.app.paletteService;
|
||||
|
|
@ -67,13 +61,6 @@
|
|||
this.colorListContainer_.innerHTML = html;
|
||||
|
||||
this.highlightSelectedColors();
|
||||
|
||||
var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
|
||||
if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
|
||||
this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
|
||||
} else {
|
||||
this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
|
||||
}
|
||||
} else {
|
||||
this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
data-placement="left"
|
||||
class="layers-toggle-preview piskel-icon-eye"></div>
|
||||
</h3>
|
||||
<div class="layers-button-container">
|
||||
<div class="toolbox-buttons">
|
||||
<button data-action="add"
|
||||
class="button layers-button piskel-icon-plus"
|
||||
title="Create a new layer" rel="tooltip" data-placement="top" ></button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="toolbox-container palettes-list-container">
|
||||
<h3 class="toolbox-title palettes-title">Palettes</h3>
|
||||
<div class="palettes-list-actions">
|
||||
<div class="toolbox-buttons">
|
||||
<button
|
||||
class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
|
||||
title="Create a new palette" rel="tooltip" data-placement="top" ></button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user