Commit f555c9c1 authored by Martin Urban's avatar Martin Urban
Browse files

file: update Symbolview jade and less

parent 79506844
.file-view-symbol {
position: absolute;
top: 40px;
left: 0px;
bottom: 0px;
overflow: auto;
-webkit-user-select: none;
}
.file-view-symbol.icon-tiny .file-node {
width: 114px;
}
.file-view-symbol.icon-tiny .symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 24px;
}
.file-view-symbol.icon-small .file-node {
width: 120px;
}
.file-view-symbol.icon-small .symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 30px;
}
.file-view-symbol.icon-medium .file-node {
width: 128px;
}
.file-view-symbol.icon-medium .symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 38px;
}
.file-view-symbol.icon-large .file-node {
width: 136px;
}
.file-view-symbol.icon-large .symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 46px;
}
.file-view-symbol .file-node {
height: 100px;
margin: 10px;
border-radius: 5px;
width: 120px;
float: left;
-webkit-user-select: none;
}
.file-view-symbol .file-node[draggable=true] {
cursor: move;
-khtml-user-drag: element;
}
.file-view-symbol .file-node:hover {
background-color: #f5f5f5;
cursor: pointer;
}
.file-view-symbol .file-node:hover > .file-opt {
visibility: visible;
}
.file-view-symbol .file-node[selected] {
background-color: #D2D2D2;
color: white;
}
.file-view-symbol .file-node[selected] > .file-opt {
visibility: visible;
}
.file-view-symbol .file-node.dragover {
background-color: rgba(92, 184, 92, 0.5) !important;
}
.file-view-symbol .file-selection-p {
display: inline-block;
width: 19px;
margin: 4px 4px 4px 4px;
position: relative;
vertical-align: middle;
visibility: visible;
-webkit-user-select: none;
}
.file-view-symbol .symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 30px;
}
.file-view-symbol .symbol-name {
-webkit-hyphens: auto;
-moz-hyphens: auto;
display: inline-block;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
overflow: hidden;
text-align: center;
width: 120px;
word-wrap: break-word;
-webkit-user-select: none;
}
.file-view-symbol .file-selection-box {
position: absolute;
top: -10px;
left: 30px;
bottom: 0px;
right: 0px;
visibility: hidden;
-webkit-user-select: none;
}
.file-view-symbol .file-selection-box:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 18px;
-webkit-user-select: none;
}
.file-view-symbol .file-selection-box input {
display: none;
}
.file-view-symbol .file-selection-box input:checked + span {
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
}
.file-view-symbol .file-selection-box span {
background: url("../../../../img/white_plus.png");
background-color: green;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
display: block;
height: 16px;
width: 16px;
-webkit-user-select: none;
}
.file-view-symbol .file-opt {
visibility: hidden;
margin-left: 70px;
-webkit-user-select: none;
}
.file-view-symbol .file-opt:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 18px;
}
.file-view-symbol{position:absolute;top:40px;left:0;bottom:0;overflow:auto;-webkit-user-select:none}.file-view-symbol.icon-tiny .file-node{margin:5px}.file-view-symbol.icon-tiny .file-node{width:80px;height:68px}.file-view-symbol.icon-tiny .symbol-icon-p{margin-top:-35px;display:inline-block;text-align:center;z-index:-1;padding:0;-webkit-user-select:none;font-size:24px;width:80px}.file-view-symbol.icon-tiny .symbol-name{width:80px}.file-view-symbol.icon-tiny .file-selection-box{left:12px}.file-view-symbol.icon-tiny .file-properties{margin-top:-9px;top:10px}.file-view-symbol.icon-small .file-node{margin:2px 4px 2px 4px}.file-view-symbol.icon-small .file-node{width:100px;height:85px}.file-view-symbol.icon-small .symbol-icon-p{margin-top:-35px;display:inline-block;text-align:center;z-index:-1;padding:0;-webkit-user-select:none;font-size:30px;width:100px}.file-view-symbol.icon-small .symbol-name{width:100px}.file-view-symbol.icon-small .file-selection-box{left:20px}.file-view-symbol.icon-small .file-properties{margin-top:1px;top:0}.file-view-symbol.icon-medium .file-node{margin:8px}.file-view-symbol.icon-medium .file-node{width:110px;height:90px}.file-view-symbol.icon-medium .symbol-icon-p{margin-top:-23px;display:inline-block;text-align:center;z-index:-1;padding:0;-webkit-user-select:none;font-size:38px;width:110px}.file-view-symbol.icon-medium .symbol-name{width:110px}.file-view-symbol.icon-medium .file-selection-box{left:20px}.file-view-symbol.icon-medium .file-properties{margin-top:1px;top:0}.file-view-symbol.icon-large .file-node{margin:12px}.file-view-symbol.icon-large .file-node{width:116px;height:100px}.file-view-symbol.icon-large .symbol-icon-p{margin-top:-24px;display:inline-block;text-align:center;z-index:-1;padding:0;-webkit-user-select:none;font-size:46px;width:116px}.file-view-symbol.icon-large .symbol-name{width:116px}.file-view-symbol.icon-large .file-selection-box{left:20px}.file-view-symbol.icon-large .file-properties{margin-top:1px;top:0}.file-view-symbol .file-node{border-radius:5px;float:left;-webkit-user-select:none}.file-view-symbol .file-node[draggable=true]{cursor:move;-khtml-user-drag:element}.file-view-symbol .file-node:hover{background-color:#f5f5f5;cursor:pointer}.file-view-symbol .file-node:hover>.file-properties{visibility:visible}.file-view-symbol .file-node[selected]{background-color:#d2d2d2;color:white}.file-view-symbol .file-node[selected]>.file-properties{visibility:visible}.file-view-symbol .file-node.dragstart{opacity:.4}.file-view-symbol .file-node.dragover{background-color:rgba(92,184,92,0.5) !important}.file-view-symbol .file-selection-p{display:inherit;margin:0 0 0 4px;position:relative;visibility:visible;-webkit-user-select:none}.file-view-symbol .symbol-name{-webkit-hyphens:auto;-moz-hyphens:auto;display:inline-block;font-family:'Trebuchet MS',Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;margin-top:-5px;overflow:hidden;text-align:center;word-wrap:break-word;-webkit-user-select:none}.file-view-symbol .file-selection-box{position:absolute;top:2px;visibility:hidden;-webkit-user-select:none;content:''}.file-view-symbol .file-selection-box span{background:url("../../../../img/white_plus.png");background-color:green;background-position:center;background-repeat:no-repeat;border-radius:8px;display:block;height:16px;width:16px;-webkit-user-select:none}.file-view-symbol .file-selection-box input{display:none}.file-view-symbol .file-selection-box input:checked+span{background:url("../../../../img/white_minus.png");background-color:red;background-position:center;background-repeat:no-repeat}.file-view-symbol .file-properties{visibility:hidden;float:right;margin-right:3px;-webkit-user-select:none}
\ No newline at end of file
@symbol-bg-hover: #f5f5f5;
@brand-success: #5cb85c;
@brand-danger: #d9534f;
@default-file-symbol-node-height: 100px;
@file-symbol-node-tiny: @default-file-symbol-node-height - 6;
@file-symbol-node-small: @default-file-symbol-node-height;
@file-symbol-node-medium: @default-file-symbol-node-height + 8;
@file-symbol-node-large: @default-file-symbol-node-height + 16;
@default-file-symbol-height: 30px;
@file-symbol-tiny: @default-file-symbol-height - 6;
@file-symbol-small: @default-file-symbol-height;
@file-symbol-medium: @default-file-symbol-height + 8;
@file-symbol-large: @default-file-symbol-height + 16;
.icon-size (@default-file-symbol-height){
@default-file-symbol-node-width: 100px;
@file-symbol-node-width-tiny: @default-file-symbol-node-width * 0.8;
@file-symbol-node-width-small: @default-file-symbol-node-width;
@file-symbol-node-width-medium: @default-file-symbol-node-width + 10;
@file-symbol-node-width-large: @default-file-symbol-node-width + 16;
@default-file-symbol-node-height: 85px;
@file-symbol-node-height-tiny: @default-file-symbol-node-height * 0.8;
@file-symbol-node-height-small: @default-file-symbol-node-height;
@file-symbol-node-height-medium: @default-file-symbol-node-height + 5;
@file-symbol-node-height-large: @default-file-symbol-node-height + 15;
@default-file-symbol-font-size: 30px;
@file-symbol-font-size-tiny: @default-file-symbol-font-size * 0.8;
@file-symbol-font-size-small: @default-file-symbol-font-size;
@file-symbol-font-size-medium: @default-file-symbol-font-size + 8;
@file-symbol-font-size-large: @default-file-symbol-font-size + 16;
@file-symbol-icon-margin-top-tiny: -35px;
@file-symbol-icon-margin-top-small: -35px;
@file-symbol-icon-margin-top-medium: -23px;
@file-symbol-icon-margin-top-large: -24px;
@file-symbol-selectionbox-left-tiny: 12px;
@file-symbol-selectionbox-left-small: 20px;
@file-symbol-selectionbox-left-medium: 20px;
@file-symbol-selectionbox-left-large: 20px;
.icon-size (@size) {
@font-size: 'file-symbol-font-size-@{size}';
@node-width: 'file-symbol-node-width-@{size}';
@node-height: 'file-symbol-node-height-@{size}';
@margin-top: 'file-symbol-icon-margin-top-@{size}';
.file-node {
width: @@node-width;
height: @@node-height;
}
.symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
margin-top: @@margin-top;
display: inline-block;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: @default-file-symbol-height
font-size: @@font-size;
width: @@node-width;
}
.symbol-name {
width: @@node-width;
}
}
.selectionbox-position (@size) {
@left: 'file-symbol-selectionbox-left-@{size}';
.file-selection-box {
left: @@left;
}
}
.properties-position (@margin) {
.file-properties {
margin-top: @margin;
top: 1 - @margin;
}
}
.file-view-symbol {
position: absolute;
top: 40px;
......@@ -37,33 +68,38 @@
-webkit-user-select: none;
&.icon-tiny {
.file-node {
width: @file-symbol-node-tiny + 20;
margin: 5px;
}
.icon-size(@file-symbol-tiny);
.icon-size(tiny);
.selectionbox-position(tiny);
.properties-position(-9px);
}
&.icon-small {
.file-node {
width: @file-symbol-node-small + 20;
margin: 2px 4px 2px 4px;
}
.icon-size(@file-symbol-small);
.icon-size(small);
.selectionbox-position(small);
.properties-position(1px);
}
&.icon-medium {
.file-node {
width: @file-symbol-node-medium + 20;
margin: 8px;
}
.icon-size(@file-symbol-medium);
.icon-size(medium);
.selectionbox-position(medium);
.properties-position(1px);
}
&.icon-large {
.file-node {
width: @file-symbol-node-large + 20;
margin: 12px;
}
.icon-size(@file-symbol-large);
.icon-size(large);
.selectionbox-position(large);
.properties-position(1px);
}
.file-node {
height: 100px;
margin: 10px;
border-radius: 5px;
// width: 120px;
float: left;
-webkit-user-select: none;
&[draggable=true] {
......@@ -73,14 +109,14 @@
&:hover {
background-color: @symbol-bg-hover;
cursor: pointer;
> .file-opt {
> .file-properties {
visibility: visible;
}
}
&[selected] {
background-color: #D2D2D2;
color: white;
> .file-opt {
> .file-properties {
visibility: visible;
}
}
......@@ -95,11 +131,9 @@
// }
}
.file-selection-p {
display: inline-block;
width: 19px;
margin: 4px 4px 4px 4px;
display: inherit;
margin: 0px 0px 0px 4px;
position: relative;
vertical-align: middle;
visibility: visible;
-webkit-user-select: none;
}
......@@ -110,39 +144,18 @@
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
margin-top: -5px;
overflow: hidden;
text-align: center;
width: 120px;
word-wrap: break-word;
-webkit-user-select: none;
}
.file-selection-box {
position: absolute;
top: -10px;
left: 30px;
bottom: 0px;
right: 0px;
top: 2px;
visibility: hidden;
-webkit-user-select: none;
&:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 18px;
-webkit-user-select: none;
}
input {
display: none;
&:checked + span {
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
}
}
content: '';
span {
background: url("../../../../img/white_plus.png");
background-color: green;
......@@ -154,19 +167,20 @@
width: 16px;
-webkit-user-select: none;
}
input {
display: none;
&:checked + span {
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
}
}
}
.file-opt {
.file-properties {
visibility: hidden;
margin-left: 70px;
float: right;
margin-right: 3px;
-webkit-user-select: none;
&:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 18px
}
}
}
......@@ -4,10 +4,10 @@
<label class="file-selection-box">
<input type="checkbox" class="file-selection-checkbox"/><span></span>
</label>
<p class="glyphicon glyphicon-cog file-properties"></p>
</p>
<p class="file-opt glyphicon glyphicon-cog file-properties"></p>
<p class="symbol-icon-p"><span data-bind="icon"></span>
</p>
<div class="symbol-icon-p"><span data-bind="icon"></span>
</div>
<p data-bind="name" class="symbol-name"></p>
</div>
</div>
......@@ -4,7 +4,8 @@
label.file-selection-box
input(type="checkbox").file-selection-checkbox
span
p.file-opt.glyphicon.glyphicon-cog.file-properties
p.symbol-icon-p
p.glyphicon.glyphicon-cog.file-properties
//- p.symbol-icon-p
.symbol-icon-p
span(data-bind="icon")
p(data-bind="name").symbol-name
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment