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

file: transform symbol view to jade and less. Fix bug in shortcuts

parent e6f8f097
......@@ -5,12 +5,11 @@
bottom: 0px;
overflow: auto;
-webkit-user-select: none;
/*height: 100%;*/
}
.file-view-content-container {
overflow: auto;
.file-view-symbol > .dragstart {
opacity: 0.4;
}
.symbol-item {
.file-view-symbol .file-node {
height: 100px;
margin: 10px;
border-radius: 5px;
......@@ -18,16 +17,28 @@
float: left;
-webkit-user-select: none;
}
.symbol-item:hover {
/*-webkit-box-shadow: inset 0px 0px 5px 0px #898989;
-moz-box-shadow: inset 0px 0px 5px 0px #898989;*/
/*box-shadow: inset 0px 0px 5px 0px #898989;*/
background-color: rgba(51, 131, 187, 0.7);
color: white;
.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-selection-p {
.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;
......@@ -36,85 +47,58 @@
visibility: visible;
-webkit-user-select: none;
}
.symbol-icon-p {
.file-view-symbol .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%);
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
font-size: 30px;
}
.symbol-name {
.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;
/* hyphens: auto; */
overflow: hidden;
text-align: center;
width: 120px;
word-wrap: break-word;
/*height 10px*/
-webkit-user-select: none;
}
.file-selection-box {
.file-view-symbol .file-selection-box {
position: absolute;
top: -10px;
left: 30px;
bottom: 0px right: 0px;
bottom: 0px;
right: 0px;
visibility: hidden;
-webkit-user-select: none;
}
.file-selection-box:after {
.file-view-symbol .file-selection-box:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px;
-webkit-user-select: none;
}
.file-symlink {
.file-view-symbol .file-selection-box input {
display: none;
}
.symbol-item .file-symlink-file {
display: block;
height: 0;
left: -42px;
position: relative;
right: 5px;
text-align: right;
top: -42px;
}
.symbol-item .file-symlink-dir {
display: block;
height: 0;
left: -51px;
position: relative;
right: 5px;
text-align: right;
top: -27px;
}
.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-selection-box span {
.file-view-symbol .file-selection-box span {
background: url("../../../../img/white_plus.png");
background-color: green;
background-position: center;
......@@ -124,45 +108,18 @@
height: 16px;
width: 16px;
-webkit-user-select: none;
/*margin-left: 20px;*/
/*margin-top: 4px;*/
}
.file-selection-box input:checked + span {
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
}
.symbol-item[selected] {
background-color: #D2D2D2;
color: white;
}
.file-warning {
background-color: red;
text-align: center;
-webkit-user-select: none;
}
/* opt icon */
.symbol-item[selected] > .file-opt {
visibility: visible;
}
.symbol-item:hover > .file-opt {
visibility: visible;
}
.file-opt {
.file-view-symbol .file-opt {
visibility: hidden;
margin-left: 70px;
-webkit-user-select: none;
}
.file-opt:after {
.file-view-symbol .file-opt:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px
border-radius: 18px;
}
@symbol-bg-hover: #f5f5f5;
@brand-success: #5cb85c;
@brand-danger: #d9534f;
@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;
.file-view-symbol {
position: absolute;
top: 40px;
left: 0px;
bottom: 0px;
overflow: auto;
-webkit-user-select: none;
.file-node {
height: 100px;
margin: 10px;
border-radius: 5px;
width: 120px;
float: left;
-webkit-user-select: none;
&[draggable=true] {
cursor: move;
-khtml-user-drag: element;
}
&:hover {
background-color: @symbol-bg-hover;
cursor: pointer;
> .file-opt {
visibility: visible;
}
}
&[selected] {
background-color: #D2D2D2;
color: white;
> .file-opt {
visibility: visible;
}
}
&.dragstart {
opacity: 0.4;
}
&.dragover {
background-color: fade(@brand-success, 50%) !important;
}
// &.dragover-denied {
// background-color: fade(@brand-danger, 50%) !important;
// }
}
.file-selection-p {
display: inline-block;
width: 19px;
margin: 4px 4px 4px 4px;
position: relative;
vertical-align: middle;
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;
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-selection-box {
position: absolute;
top: -10px;
left: 30px;
bottom: 0px;
right: 0px;
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;
}
}
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-opt {
visibility: hidden;
margin-left: 70px;
-webkit-user-select: none;
&:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 18px
}
}
}
<div class="file-view-symbol file-list">
<div draggable="true" class="file-node symbol-item" data-bind="data">
<p class="file-selection-p">
<label class="file-selection-box">
<input type="checkbox" class="file-selection-checkbox">
<span></span>
</label>
</p>
<p class="file-opt glyphicon glyphicon-cog file-properties"></p>
<p class="symbol-icon-p">
<span data-bind="icon">
<!-- <img data-bind="icon"> -->
<!-- <span class="glyphicon glyphicon-new-window" data-bind="syml"></span> -->
</p>
<p data-bind="name" class="symbol-name"></p>
</div>
</div>
\ No newline at end of file
<div draggable="true" data-bind="data" class="file-node symbol-item">
<p class="file-selection-p">
<label class="file-selection-box">
<input type="checkbox" class="file-selection-checkbox"/><span></span>
</label>
</p>
<p class="file-opt glyphicon glyphicon-cog file-properties"></p>
<p class="symbol-icon-p"><span data-bind="icon"></span>
</p>
<p data-bind="name" class="symbol-name"></p>
</div>
</div>
.file-view-symbol.file-list
.file-node(draggable="true", data-bind="data")
p.file-selection-p
label.file-selection-box
input(type="checkbox").file-selection-checkbox
span
p.file-opt.glyphicon.glyphicon-cog.file-properties
p.symbol-icon-p
span(data-bind="icon")
p(data-bind="name").symbol-name
......@@ -82,8 +82,9 @@ function getShortcuts() {
if (this.fb.workflow.currentView.type == "Table") {
this.fb.selections.selectNextNode();
} else {
var item = $(".symbol-item");
var widthContent = $(".file-list", this.fb.view.fileContentContainer).width();
var item = $(".file-node");
// one pixel offset due to the border of the scroll area
var widthContent = $(".file-list", this.fb.view.fileContentContainer)[0].scrollWidth -1;
var widthItem = item.width() + parseInt(item.css("marginLeft"), 10) + parseInt(item.css(
"marginRight"), 10);
var elementsPerRow = Math.floor(widthContent / widthItem);
......@@ -99,8 +100,9 @@ function getShortcuts() {
if (this.fb.workflow.currentView.type == "Table") {
this.fb.selections.selectPrevNode();
} else {
var item = $(".symbol-item");
var widthContent = $(".file-list", this.fb.view.fileContentContainer).width();
var item = $(".file-node");
// one pixel offset due to the border of the scroll area
var widthContent = $(".file-list", this.fb.view.fileContentContainer)[0].scrollWidth -1;
var widthItem = item.width() + parseInt(item.css("marginLeft"), 10) + parseInt(item.css(
"marginRight"), 10);
var elementsPerRow = Math.floor(widthContent / widthItem);
......
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