Skip to content

GitLab

Commit ca494fcb authored by asseldonk's avatar asseldonk
Browse files

filebrowser: major code refactoring

parent 28207ce6
Hide whitespace changes
Inline Side-by-side
vispa/extensions/file/__init__.py
View file @ ca494fcb
......@@ -29,7 +29,8 @@ class FileBrowserExtension(AbstractExtension):
self.add_js('js/base/helper.js')
self.add_js('js/base/view.js')
self.add_js('js/base/sort.js')
self.add_js('js/base/bookmark.js')
self.add_js('js/base/pathbar.js')
#self.add_js('js/base/bookmark.js')
self.add_js('js/base/selections.js')
self.add_js('js/base/views/symbol/view.js')
self.add_js('js/base/views/table/view.js')
......@@ -54,6 +55,7 @@ class FileBrowserExtension(AbstractExtension):
self.add_js('js/menuentries.js')
self.add_css('css/base/base.css')
self.add_css('css/base/pathbar.css')
self.add_css('css/base/bookmark.css')
self.add_css('css/base/views/symbol/symbol.css')
self.add_css('css/base/views/table/table.css')
vispa/extensions/file/static/css/base/base.less
View file @ ca494fcb
@brand-success: #5cb85c;
@gray-dark: lighten(#000, 20%);
@gray-lighter: lighten(#000, 93.5%);
@table-bg-hover: #f5f5f5;
@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
@brand-success: #5cb85c;
@gray-dark: lighten(#000, 20%);
@gray-lighter: lighten(#000, 93.5%);
@table-bg-hover: #f5f5f5;
@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
@breadcrumb-padding-vertical: 8px;
@icon-brown: #4A1402;
@icon-red: #780500;
@icon-dark-blue: #001059;
@icon-light-blue: #2F7DAD;
@icon-purple: #340252;
@icon-dark-green: #003B0B;
@icon-light-green: #008A1A;
@icon-yellow: #D99305;
@icon-orange: #D16D00;
@icon-brown: #4A1402;
@icon-red: #96281B;
@icon-blue-dark: #3A539B;
@icon-blue: #3A539B;
@icon-blue-light: #59ABE3;
@icon-purple: #913D88;
@icon-purple-light: #913D88;
@icon-green-dark: #003B0B;
@icon-green-light: #008A1A;
@icon-yellow: #D99305;
@icon-orange: #D16D00;
/* main template */
.file-content {
......@@ -24,19 +30,18 @@
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
position: absolute;
height: 100%;
bottom: 0px;
right: 0px;
top: 0px;
left: 0px;
overflow: hidden;
}
/* file selector - temporary: this leaves, when template of table view is used */
/* file selector */
.fileselector {
> .file-content {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
> .file-view-content-container {
max-height: 250px;
}
height: 300px;
}
/* right click menu */
......@@ -89,46 +94,7 @@
-khtml-user-drag: element;
}
/* path bar */
.file-path-bar {
line-height: 15px !important;
width: 100% !important;
position: absolute !important;
left: 0px !important;
top: 0px !important;
height: 32px !important;
background-color: #fff;
overflow-x: auto;
overflow-y: hidden;
> .bookmark-opener {
//block has to be removed, when bookmarks leave this place
left: 0px;
bottom: 0px;
width: 32px;
height: 32px;
position: absolute;
padding: @breadcrumb-padding-vertical 0px;
cursor: pointer;
border-right: 1px solid @table-border-color;
border-bottom: 1px solid @table-border-color;
&:hover {
background-color: darken(#fff, 10%);
}
}
> .breadcrumb {
border-radius: 0px;
background-color: #fff;
left: 32px; // entry has to be removed, when bookamrks leave this place
top: 0px; // entry has to be removed, when bookamrks leave this place
position: absolute; // entry has to be removed, when bookamrks leave this place
> li, li:before {
color: @gray-dark;
}
}
}
// font for fileicons
/* font for file icons */
@font-face {
font-family: 'file_icons';
src:url('../../fonts/file_icons.eot');
......@@ -142,22 +108,12 @@
[class^="icon-"], [class*=" icon-"] {
font-family: 'file_icons';
/* speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;*/
font-size: 40px;
color: #444;
// cursor: pointer;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bmp:before {
content: "\e600";
}
......@@ -327,57 +283,43 @@
content: "\e637";
}
// folder
.icon-folder, .icon-folder-open {
font-size: 30px;
}
// colors for icons
// pictures
.icon-bmp, .icon-gif, .icon-ico, .icon-jpeg, .icon-jpg, .icon-png, .icon-raw, .icon-svg, .icon-tif, .icon-tiff {
color: @icon-dark-green;
color: @icon-green-dark;
}
// coding
.icon-c, .icon-cc, .icon-cpp, .icon-h {
color: @icon-dark-blue;
color: @icon-blue-dark;
}
.icon-f, .icon-f03, .icon-f90, .icon-f95, .icon-F, .icon-F03, .icon-F90, .icon-F95 {
color: @icon-dark-blue;
color: @icon-blue-dark;
}
.icon-css, .icon-html, .icon-jade, .icon-js, .icon-less, .icon-mako, .icon-tex, .icon-xml, .icon-yaml, .icon-yml {
.icon-sh, .icon-csh {
color: @icon-blue;
}
.icon-css, .icon-html, .icon-jade, .icon-js, .icon-less, .icon-mako {
color: @icon-purple;
}
.icon-tex, .icon-xml, .icon-yaml, .icon-yml {
color: @icon-purple-light;
}
.icon-py, .icon-pyc {
color: @icon-yellow;
}
// pxlio
.icon-pxlio {
color: @icon-light-blue;
color: @icon-blue-light;
}
// root
.icon-root {
color: @icon-light-green;
color: @icon-green-light;
}
// adobe
.icon-eps, .icon-pdf, .icon-ps {
color: @icon-red;
}
// packed
.icon-rar, .icon-tar, .icon-targz, .icon-zip {
color: @icon-brown;
}
.icon-sh, .icon-csh {
color: @icon-dark-blue;
}
vispa/extensions/file/static/css/base/pathbar.css 0 → 100644
View file @ ca494fcb
.parh-bar-icon{width:44px;text-align:center;border-right:2px solid #ddd}.parh-bar-icon>.dropdown-toggle{width:100%;cursor:pointer;padding:8px 14px 4px 14px}.parh-bar-icon .dropdown-menu{margin-top:4px}.parh-bar-icon .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%;height:36px}.file-path-bar>.bookmarks{width:44px;text-align:center;border-right:2px solid #ddd}.file-path-bar>.bookmarks>.dropdown-toggle{width:100%;cursor:pointer;padding:8px 14px 4px 14px}.file-path-bar>.bookmarks .dropdown-menu{margin-top:4px}.file-path-bar>.bookmarks .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar>.options{width:44px;text-align:center;border-right:2px solid #ddd}.file-path-bar>.options>.dropdown-toggle{width:100%;cursor:pointer;padding:8px 14px 4px 14px}.file-path-bar>.options .dropdown-menu{margin-top:4px}.file-path-bar>.options .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar>.path-list{position:relative;margin-left:15px;width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}.file-path-bar>.path-list>.path-bar-item+.path-bar-item:before{content:"/";padding:0 7px;text-align:left}.file-path-bar>.path-list>.path-bar-item{text-decoration:none}.file-path-bar>.path-list .glyphicon{display:inline}.file-path-bar>.path-list>.active{pointer-events:none;color:#333}
\ No newline at end of file
vispa/extensions/file/static/css/base/pathbar.less 0 → 100644
View file @ ca494fcb
@gray-dark: lighten(#000, 20%);
@table-border-color: #ddd;
.parh-bar-icon {
width: 44px;
text-align: center;
border-right: 2px solid @table-border-color;
> .dropdown-toggle {
width: 100%;
cursor: pointer;
padding: 8px 14px 4px 14px;
}
.dropdown-menu {
margin-top: 4px;
.glyphicon {
margin-right: 10px;
}
}
}
.file-path-bar {
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // TWEENER - IE 10
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 36px;
> .bookmarks {
.parh-bar-icon;
}
> .options {
.parh-bar-icon;
}
> .path-list {
position: relative;
margin-left: 15px;
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
> .path-bar-item + .path-bar-item:before {
content: "/";
padding: 0 7px;
text-align: left;
}
> .path-bar-item {
text-decoration: none;
}
.glyphicon {
display: inline;
}
> .active {
pointer-events: none;
color: @gray-dark;
}
}
}
vispa/extensions/file/static/css/base/views/symbol/symbol.css
View file @ ca494fcb
.file-view-symbol {
/*position: absolute;*/
margin-top: 40px;
overflow: auto;
-webkit-user-select: none;
height: 100%;
}
.filebrowser .file-content {
position: absolute;
height: 100%;
bottom: 0px;
right: 0px;
top: 0px;
top: 40px;
left: 0px;
overflow: hidden;
bottom: 0px;
overflow: auto;
-webkit-user-select: none;
/*height: 100%;*/
}
.file-view-content-container {
overflow: auto;
}
.symbol-item {
height: 80px;
height: 100px;
margin: 10px;
border-radius: 5px;
width: 120px;
......@@ -45,7 +38,68 @@
}
.symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
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%);
.bookmark-container {
position: absolute;
left: 0px;
top: 32px;
overflow: hidden;
padding: 0px;
border-top: 1px solid @table-border-color;
border-right: 1px solid @table-border-color;
background-color: @breadcrumb-bg;
z-index: @zindex-dropdown;
visibility: hidden;
& .bookmark-button {
background-color: @breadcrumb-bg;
margin: @padding-base-vertical @padding-base-horizontal;
&:hover {
background-color: darken(@breadcrumb-bg, 10%);
}
}
> .bookmarks {
overflow: auto;
white-space: nowrap;
> .bookmark {
padding: @padding-base-vertical @padding-base-horizontal;
margin: 0px;
cursor: pointer;
&:hover{
background-color: darken(@breadcrumb-bg, 10%);
> a {
color: @gray-dark;
}
}
> .bookmark-glyphicon-symbol {
color: @gray-dark;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-edit {
color: @breadcrumb-bg;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-remove {
color: @breadcrumb-bg;
&:hover {
color: @gray-base !important;
}
}
}
}
}
text-align: center;
z-index: -1;
padding: 0px;
......
vispa/extensions/file/static/css/base/views/table/table.css
View file @ ca494fcb
.file-table-select-column{width:70px;text-align:center}.file-table-icon-column{width:70px;text-align:left}.file-table-size-column{width:120px;text-align:right}.file-table-time-column{width:215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;text-align:center}.file-view-table .file-table-first-row{position:absolute;top:38px;left:0;display:-webkit-flex;display:flex;height:36px;padding-top:7px;border-bottom:3px solid #ddd}.file-view-table .file-table-first-row>.select{width:70px;text-align:center}.file-view-table .file-table-first-row>.icon{width:70px;text-align:left}.file-view-table .file-table-first-row>.size{width:120px;text-align:right}.file-view-table .file-table-first-row>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table-first-row>.options{width:50px;text-align:center}.file-view-table .file-table-first-row>.name,.file-view-table .file-table-first-row>.size,.file-view-table .file-table-first-row>.time{cursor:pointer}.file-view-table .file-table{position:absolute;bottom:0;right:0;top:74px;left:0;overflow-y:auto}.file-view-table .file-table>.node{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%;height:40px}.file-view-table .file-table>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-table>.node:hover{background-color:#f5f5f5}.file-view-table .file-table>.node:not(:hover) .edit-tools{visibility:collapse}.file-view-table .file-table>.node[selected]{background-color:#f5f5f5}.file-view-table .file-table>.node>.select{width:70px;text-align:center}.file-view-table .file-table>.node>.icon{width:70px;text-align:left}.file-view-table .file-table>.node>.icon>[class^="icon-"],.file-view-table .file-table>.node>.icon [class*=" icon-"]{font-size:30px}.file-view-table .file-table>.node>.icon>.icon-folder,.file-view-table .file-table>.node>.icon .icon-folder-open,.file-view-table .file-table>.node>.icon .icon-folder-symlink{font-size:24px}.file-view-table .file-table>.node>.name{-webkit-flex:1;flex:1}.file-view-table .file-table>.node>.name>.input-filename{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s}.file-view-table .file-table>.node>.name>.input-filename:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.file-view-table .file-table>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-table>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-table>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-table>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-table>.node>.edit-tools{font-size:12px;width:320px;text-align:right}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-table>.node>.edit-tools{width:160px}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:20px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-table>.node>.size{width:120px;text-align:right}.file-view-table .file-table>.node>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table>.node>.options{width:50px;text-align:center;cursor:pointer}
\ No newline at end of file
.file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .icon{width:30px}.file-view-table.row-tiny .icon [class^="icon-"],.file-view-table.row-tiny .icon [class*=" icon-"]{font-size:24px}.file-view-table.row-tiny .icon .icon-folder,.file-view-table.row-tiny .icon .icon-folder-open,.file-view-table.row-tiny .icon .icon-folder-symlink{font-size:18px}.file-view-table.row-small .node{height:40px}.file-view-table.row-small .icon{width:45px}.file-view-table.row-small .icon [class^="icon-"],.file-view-table.row-small .icon [class*=" icon-"]{font-size:30px}.file-view-table.row-small .icon .icon-folder,.file-view-table.row-small .icon .icon-folder-open,.file-view-table.row-small .icon .icon-folder-symlink{font-size:24px}.file-view-table.row-medium .node{height:48px}.file-view-table.row-medium .icon{width:60px}.file-view-table.row-medium .icon [class^="icon-"],.file-view-table.row-medium .icon [class*=" icon-"]{font-size:38px}.file-view-table.row-medium .icon .icon-folder,.file-view-table.row-medium .icon .icon-folder-open,.file-view-table.row-medium .icon .icon-folder-symlink{font-size:32px}.file-view-table.row-large .node{height:56px}.file-view-table.row-large .icon{width:75px}.file-view-table.row-large .icon [class^="icon-"],.file-view-table.row-large .icon [class*=" icon-"]{font-size:46px}.file-view-table.row-large .icon .icon-folder,.file-view-table.row-large .icon .icon-folder-open,.file-view-table.row-large .icon .icon-folder-symlink{font-size:40px}.file-table-select-column{width:70px;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;text-align:right}.file-table-time-column{width:215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;text-align:center}.file-view-table{width:100%}.file-view-table .file-table-head{position:absolute;top:44px;left:0;display:-webkit-flex;display:flex;width:100%;height:36px;padding-top:7px;border-bottom:3px solid #ddd}.file-view-table .file-table-head .glyphicon{margin-left:4px}.file-view-table .file-table-head>.select{width:70px;text-align:center}.file-view-table .file-table-head>.icon{text-align:left}.file-view-table .file-table-head>.name{webkit-flex:1;flex:1}.file-view-table .file-table-head>.size{width:120px;text-align:right}.file-view-table .file-table-head>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width:50px;text-align:center}.file-view-table .file-table-head>.name,.file-view-table .file-table-head>.size,.file-view-table .file-table-head>.time{cursor:pointer}.file-view-table .file-table{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-table>.node{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%}.file-view-table .file-table>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-table>.node:hover{background-color:#f5f5f5}.file-view-table .file-table>.node:not(:hover) .edit-tools{visibility:collapse}.file-view-table .file-table>.node[selected]{background-color:#f5f5f5}.file-view-table .file-table>.node>.select{width:70px;text-align:center}.file-view-table .file-table>.node>.icon{text-align:left}.file-view-table .file-table>.node>.name{-webkit-flex:1;flex:1}.file-view-table .file-table>.node>.name>.input-filename{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s}.file-view-table .file-table>.node>.name>.input-filename:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.file-view-table .file-table>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-table>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-table>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-table>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-table>.node>.edit-tools{font-size:12px;width:320px;text-align:right}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-table>.node>.edit-tools{width:160px}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:20px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-table>.node>.size{width:120px;text-align:right}.file-view-table .file-table>.node>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table>.node>.options{width:50px;text-align:center;cursor:pointer}.fileselector .node{height:38px}.fileselector .icon{width:40px}.fileselector .icon [class^="icon-"],.fileselector .icon [class*=" icon-"]{font-size:26px}.fileselector .icon .icon-folder,.fileselector .icon .icon-folder-open,.fileselector .icon .icon-folder-symlink{font-size:22px}.fileselector .edit-tools{display:none !important;visibility:hidden !important}.fileselector .size{display:none !important;visibility:hidden !important}.fileselector .time{display:none !important;visibility:hidden !important}
\ No newline at end of file
vispa/extensions/file/static/css/base/views/table/table.less
View file @ ca494fcb
/* define variables and classes */
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xs-max: @screen-xs;
@screen-sm-max: @screen-sm;
@screen-md-max: @screen-md;
@screen-lg-max: @screen-lg;
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@table-bg: transparent;
@table-bg-accent: #f9f9f9;
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd;
@width-edit-tool-small: 160px;
@width-edit-tool-large: 320px;
@width-select-column: 70px;
@width-icon-column: 70px;
@width-size-column: 120px;
@width-time-column: 215px;
@width-options-column: 50px;
@border-radius-base: 4px;
@input-bg: #fff;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: #999;
/* define variables and classes from bootstrap */
@screen-md: 992px;
@gray: lighten(#000, 33.5%); // #555
@table-bg-accent: #f9f9f9;
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd;
@border-radius-base: 4px;
@input-bg: #fff;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: #999;
/* some own variables */
@width-edit-tool-small: 160px;
@width-edit-tool-large: 320px;
@width-select-column: 70px;
@width-icon-column: 45px;
@width-size-column: 120px;
@width-time-column: 215px;
@width-options-column: 50px;
// size of icons
@default-file-table-height: 40px;
@file-table-tiny: @default-file-table-height - 6;
@file-table-small: @default-file-table-height;
@file-table-medium: @default-file-table-height + 8;
@file-table-large: @default-file-table-height + 16;
.file-table-icon-size (@default-file-table-height) {
[class^="icon-"], [class*=" icon-"] {
font-size: @default-file-table-height - 10;
}
.icon-folder, .icon-folder-open, .icon-folder-symlink {
font-size: @default-file-table-height - 16;
}
}
.file-view-table {
&.row-tiny {
.node {
height: @file-table-tiny;
}
.icon {
width: @width-icon-column - 15;
.file-table-icon-size(@file-table-tiny);
}
}
&.row-small {
.node {
height: @file-table-small;
}
.icon {
width: @width-icon-column;
.file-table-icon-size(@file-table-small);
}
}
&.row-medium {
.node {
height: @file-table-medium;
}
.icon {
width: @width-icon-column + 15;
.file-table-icon-size(@file-table-medium);
}
}
&.row-large {
.node {
height: @file-table-large;
}
.icon {
width: @width-icon-column + 30;
.file-table-icon-size(@file-table-large);
}
}
}
/* some classes for columns */
.file-table-select-column {
width: @width-select-column;
text-align: center;
}
.file-table-icon-column {
width: @width-icon-column;
text-align: left;
}
.file-table-size-column {
......@@ -70,23 +105,34 @@
text-align: center;
}
/* tale view */
.file-view-table {
/* first row of the filelist */
.file-table-first-row {
width: 100%;
/* table head of filelist */
.file-table-head {
position: absolute;
top: 38px;
top: 44px;
left: 0px;
display: -webkit-flex;
display: flex;
width: 100%;
height: 36px;
padding-top: 7px;
border-bottom: 3px solid @table-border-color;
.glyphicon {
margin-left: 4px;
}
> .select {
.file-table-select-column;
}
> .icon {
.file-table-icon-column;
}
> .name {
webkit-flex: 1;
flex: 1;</