Issue #467: fix max height for layers & panels lists

This commit is contained in:
juliandescottes 2016-05-08 04:12:43 +02:00
parent e5ab4e53d7
commit c1d8c7a20e
7 changed files with 206 additions and 156 deletions

View File

@ -36,10 +36,17 @@
}
.right-column {
box-sizing: border-box;
vertical-align: top;
margin-left: 10px;
height: 100%;
display: inline-flex;
flex-direction: column;
position: relative;
margin-left: 10px;
/* Add some padding for the absolutely positioned .cursor-coordinates */
padding-bottom: 20px;
}
.drawing-canvas-container {

View File

@ -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);

View File

@ -3,10 +3,18 @@
* Layers container
*/
.layers-list-container {
min-height: 83px;
display: flex;
flex-direction: column;
}
/**
* Layers title and toggle preview
*/
.layers-title {
position: relative;
flex-shrink: 0;
}
.layers-toggle-preview {
@ -30,16 +38,43 @@
color : gold;
}
/**
* Layers buttons
*/
.layers-button-container {
overflow : hidden;
flex-shrink: 0;
}
.layers-button {
margin: 0;
width: 16.66667%;
float : left;
/* Override border propery on .button elements from form.css */
border-left-width: 0;
}
.layers-button:last-child {
border-right-width: 0;
}
/**
* 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 {
@ -56,22 +91,3 @@
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;
}

View File

@ -1,21 +1,132 @@
.palettes-list-container {
min-height: 100px;
display: flex;
flex-direction: column;
}
.palettes-title {
flex-shrink: 0;
background-size: 22px;
background-repeat: no-repeat;
background-position: 97%;
}
.palettes-list-colors {
overflow: auto;
max-height: 160px;
/**
* Palettes action buttons
*/
.palettes-list-actions {
flex-shrink: 0;
background-color: #3f3f3f;
border-bottom-color: #222;
height: 24px;
padding: 0;
overflow: hidden;
}
.palettes-list-button,
.palettes-list-select {
margin: 0;
float: left;
}
.palettes-list-button {
width: 16.66667%;
}
.palettes-list-select {
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;
text-align:left;
font-weight: normal;
transition : background-color 0.3s, color 0.3s;
cursor:pointer;
}
.palettes-list-select:hover,
.palettes-list-select:focus {
background-color: #484848;
color: white;
}
.palettes-list-select:focus {
outline: none;
}
/*
* 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: 32px;
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;
@ -35,112 +146,35 @@
.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-button,
.palettes-list-select {
margin: 0;
float: left;
}
.palettes-list-button {
width: 16.66667%;
}
.palettes-list-select {
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;
/*thanks firefox, you suck*/
text-align:left;
/*text-shadow:none;*/
font-weight: normal;
transition : background-color 0.3s, color 0.3s;
cursor:pointer;
}
.palettes-list-select:hover {
color: white;
background-color: #484848;
}
.palettes-list-select:focus {
background-color: #484848;
color: white;
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
}

View File

@ -5,7 +5,6 @@
text-align: left;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 10px;
overflow: hidden;
}
@ -13,5 +12,7 @@
padding: 8px;
margin: 0;
font-size: 15px;
/* reset for firefox */
height: 17px;
background: #222;
}

View File

@ -1,3 +1,6 @@
.transformations-container {
flex-shrink: 0;
}
.transformations-container .tool-icon {
float:left;

View File

@ -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');
}