Commit 78b7c3de authored by Martin Urban's avatar Martin Urban
Browse files

file: prepare different icon sizes for symbol view

parent beb316bc
......@@ -6,8 +6,57 @@
overflow: auto;
-webkit-user-select: none;
}
.file-view-symbol > .dragstart {
opacity: 0.4;
.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;
......
@symbol-bg-hover: #f5f5f5;
@symbol-bg-hover: #f5f5f5;
@brand-success: #5cb85c;
@brand-danger: #d9534f;
@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;
@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){
.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: @default-file-symbol-height
}
}
.file-view-symbol {
position: absolute;
......@@ -16,12 +35,35 @@
bottom: 0px;
overflow: auto;
-webkit-user-select: none;
&.icon-tiny {
.file-node {
width: @file-symbol-node-tiny + 20;
}
.icon-size(@file-symbol-tiny);
}
&.icon-small {
.file-node {
width: @file-symbol-node-small + 20;
}
.icon-size(@file-symbol-small);
}
&.icon-medium {
.file-node {
width: @file-symbol-node-medium + 20;
}
.icon-size(@file-symbol-medium);
}
&.icon-large {
.file-node {
width: @file-symbol-node-large + 20;
}
.icon-size(@file-symbol-large);
}
.file-node {
height: 100px;
margin: 10px;
border-radius: 5px;
width: 120px;
// width: 120px;
float: left;
-webkit-user-select: none;
&[draggable=true] {
......@@ -52,7 +94,6 @@
// background-color: fade(@brand-danger, 50%) !important;
// }
}
.file-selection-p {
display: inline-block;
width: 19px;
......@@ -62,26 +103,6 @@
visibility: visible;
-webkit-user-select: none;
}
.symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
@zindex-dropdown: 1000;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@gray-base: #000;
@gray-dark: lighten(@gray-base, 20%);
@gray-light: lighten(@gray-base, 46.7%);
@gray-lighter: lighten(@gray-base, 93.5%);
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: @default-file-symbol-height
}
.symbol-name {
-webkit-hyphens: auto;
-moz-hyphens: auto;
......@@ -95,7 +116,6 @@
word-wrap: break-word;
-webkit-user-select: none;
}
.file-selection-box {
position: absolute;
top: -10px;
......
<div class="file-view-symbol file-list">
<div draggable="true" data-bind="data" class="file-node symbol-item">
<div class="file-view-symbol file-list icon-tiny">
<div draggable="true" data-bind="data" class="file-node">
<p class="file-selection-p">
<label class="file-selection-box">
<input type="checkbox" class="file-selection-checkbox"/><span></span>
......
.file-view-symbol.file-list
.file-view-symbol.file-list.icon-tiny
.file-node(draggable="true", data-bind="data")
p.file-selection-p
label.file-selection-box
......
......@@ -42,10 +42,23 @@ var Symbolview = Class.extend({
// render the content
$(".file-view-symbol", this.fileContentContainer).render(data.filelist, this.FileBase.view.directives);
// set icon size
self.setIconSize();
$(".symbol-name", this.fileContentContainer).ellipsis({
row: 2,
position: "middle"
// onlyFullWords: true
});
}
},
setIconSize: function() {
"use strict";
var iconSize = this.FileBase.instance.getPreference("IconSize");
var container = $(".file-view-symbol", this.fileContentContainer);
["tiny", "small", "medium", "large"].forEach(function(size) {
container.toggleClass("icon-" + size, size == iconSize);
});
},
});
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