Commit 2c14ccd8 authored by Martin Urban's avatar Martin Urban
Browse files

File: Unify top menu and right click menu. Update less and jade templates for menu

parent 281375f4
.file-rightclickmenu-itemhide {
display: none;
visibility: hidden;
}
.file-rightclickmenu-itemshow {
display: block;
visibility: visible;
}
/* main template */
.file-content {
-moz-user-select: none;
......@@ -26,20 +34,94 @@
top: 55px;
}
/* right click menu */
.actionmenu {
.file-rightclickmenu {
position: absolute;
}
.file-rightclickmenu .glyphicon {
margin: 0 10px 0 0 !important;
}
.file-rightclickmenu.filemenu .openFile,
.file-rightclickmenu.filemenu .rename,
.file-rightclickmenu.filemenu .copy,
.file-rightclickmenu.filemenu .cut,
.file-rightclickmenu.filemenu .remove,
.file-rightclickmenu.filemenu .download,
.file-rightclickmenu.filemenu .compress,
.file-rightclickmenu.filemenu .divider,
.file-rightclickmenu.filemenu .info {
display: block;
visibility: visible;
}
.file-rightclickmenu.filemenu .openFolder,
.file-rightclickmenu.filemenu .createFile,
.file-rightclickmenu.filemenu .createFolder,
.file-rightclickmenu.filemenu .upload,
.file-rightclickmenu.filemenu .paste {
display: none;
visibility: hidden;
}
.file-menu {
height: 0px;
overflow: auto;
.file-rightclickmenu.foldermenu .openFolder,
.file-rightclickmenu.foldermenu .rename,
.file-rightclickmenu.foldermenu .copy,
.file-rightclickmenu.foldermenu .cut,
.file-rightclickmenu.foldermenu .remove,
.file-rightclickmenu.foldermenu .compress,
.file-rightclickmenu.foldermenu .divider,
.file-rightclickmenu.foldermenu .info {
display: block;
visibility: visible;
}
.file-rightclickmenu.foldermenu .openFile,
.file-rightclickmenu.foldermenu .createFile,
.file-rightclickmenu.foldermenu .createFolder,
.file-rightclickmenu.foldermenu .download,
.file-rightclickmenu.foldermenu .upload,
.file-rightclickmenu.foldermenu .paste {
display: none;
visibility: hidden;
}
.file-rightclickmenu.bkgmenu .createFile,
.file-rightclickmenu.bkgmenu .createFolder,
.file-rightclickmenu.bkgmenu .upload {
display: block;
visibility: visible;
}
.file-rightclickmenu.bkgmenu .openFile,
.file-rightclickmenu.bkgmenu .openFolder,
.file-rightclickmenu.bkgmenu .rename,
.file-rightclickmenu.bkgmenu .copy,
.file-rightclickmenu.bkgmenu .cut,
.file-rightclickmenu.bkgmenu .remove,
.file-rightclickmenu.bkgmenu .compress,
.file-rightclickmenu.bkgmenu .info,
.file-rightclickmenu.bkgmenu .download {
display: none;
visibility: hidden;
}
.file-rightclickmenu.selectionmenu .copy,
.file-rightclickmenu.selectionmenu .cut,
.file-rightclickmenu.selectionmenu .remove,
.file-rightclickmenu.selectionmenu .compress,
.file-rightclickmenu.selectionmenu .divider,
.file-rightclickmenu.selectionmenu .info {
display: block;
visibility: visible;
}
.file-rightclickmenu.selectionmenu .download,
.file-rightclickmenu.selectionmenu .openFile,
.file-rightclickmenu.selectionmenu .openFolder,
.file-rightclickmenu.selectionmenu .rename,
.file-rightclickmenu.selectionmenu .createFile,
.file-rightclickmenu.selectionmenu .createFolder,
.file-rightclickmenu.selectionmenu .upload,
.file-rightclickmenu.selectionmenu .paste {
display: none;
visibility: hidden;
}
/* info dialog - temporary: this leaves, when template of table view is used */
.table-info-dialog > tbody > tr > td {
border: none;
border: 0px;
border-top: 0px;
border: 0;
}
.table-info-dialog-width {
width: 114px;
......
@gray-dark: lighten(#000, 20%);
@gray-lighter: lighten(#000, 93.5%);
@table-bg-hover: #f5f5f5;
@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
@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-brown: #4A1402;
@icon-red: #96281B;
@icon-red: #96281B;
@icon-blue-dark: #3A539B;
@icon-blue: #3A539B;
@icon-blue-light: #59ABE3;
@icon-blue-dark: #3A539B;
@icon-blue: #3A539B;
@icon-blue-light: #59ABE3;
@icon-purple: #913D88;
@icon-purple-light: #913D88;
@icon-purple: #913D88;
@icon-purple-light: #913D88;
@icon-green-dark: #003B0B;
@icon-green-light: #008A1A;
@icon-green-dark: #003B0B;
@icon-green-light: #008A1A;
@icon-yellow: #D99305;
@icon-orange: #D16D00;
@icon-yellow: #D99305;
@icon-orange: #D16D00;
.file-rightclickmenu-itemhide {
display: none;
visibility: hidden;
}
.file-rightclickmenu-itemshow {
display: block;
visibility: visible;
}
/* main template */
.file-content {
......@@ -52,33 +62,65 @@
}
/* right click menu */
.actionmenu {
.file-rightclickmenu {
position: absolute;
display: none;
}
.file-menu {
height: 0px;
overflow: auto;
visibility: hidden;
.glyphicon {
margin: 0 10px 0 0 !important;
}
&.filemenu {
.openFile, .rename, .copy, .cut, .remove, .download, .compress, .divider, .info {
.file-rightclickmenu-itemshow;
}
.openFolder, .createFile, .createFolder, .upload, .paste {
.file-rightclickmenu-itemhide;
}
}
&.foldermenu {
.openFolder, .rename, .copy, .cut, .remove, .compress, .divider, .info {
.file-rightclickmenu-itemshow;
}
.openFile, .createFile, .createFolder, .download, .upload, .paste {
.file-rightclickmenu-itemhide;
}
}
&.bkgmenu {
.createFile, .createFolder, .upload {
.file-rightclickmenu-itemshow;
}
.openFile, .openFolder, .rename, .copy, .cut, .remove, .compress, .info, .download {
.file-rightclickmenu-itemhide;
}
}
&.selectionmenu {
.copy, .cut, .remove, .compress, .divider, .info {
.file-rightclickmenu-itemshow;
}
.download, .openFile, .openFolder, .rename, .createFile, .createFolder, .upload, .paste {
.file-rightclickmenu-itemhide;
}
}
}
/* info dialog - temporary: this leaves, when template of table view is used */
.table-info-dialog > tbody > tr > td {
border: none;
border: 0px;
border-top: 0px;
border: 0;
}
.table-info-dialog-width {
width: 114px;
}
.table-info-dialog {
overflow: hidden;
table-layout: fixed;
word-wrap: break-word;
}
.file-info-dialog-header {
margin-bottom: 20px;
}
.filterField {
bottom: 5px;
right: 5px;
......@@ -91,11 +133,11 @@
/* font for file icons */
@font-face {
font-family: 'file_icons';
src:url('../../fonts/file_icons.eot');
src:url('../../fonts/file_icons.eot') format('embedded-opentype'),
url('../../fonts/file_icons.woff') format('woff'),
url('../../fonts/file_icons.ttf') format('truetype'),
url('../../fonts/file_icons.svg#file_icons') format('svg');
src: url('../../fonts/file_icons.eot');
src: url('../../fonts/file_icons.eot') format('embedded-opentype'),
url('../../fonts/file_icons.woff') format('woff'),
url('../../fonts/file_icons.ttf') format('truetype'),
url('../../fonts/file_icons.svg#file_icons') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -111,168 +153,223 @@
.icon-bmp:before {
content: "\e600";
}
.icon-c:before {
content: "\e601";
}
.icon-cc:before {
content: "\e602";
}
.icon-conf:before {
content: "\e603";
}
.icon-cpp:before {
content: "\e604";
}
.icon-csh:before {
content: "\e605";
}
.icon-css:before {
content: "\e606";
}
.icon-default:before {
content: "\e607";
}
.icon-default-alt:before {
content: "\e608";
}
.icon-default-symlink:before {
content: "\e609";
}
.icon-eps:before {
content: "\e60a";
}
.icon-f:before {
content: "\e60b";
}
.icon-f03:before {
content: "\e60c";
}
.icon-f90:before {
content: "\e60d";
}
.icon-f95:before {
content: "\e60e";
}
.icon-F:before {
content: "\e60f";
}
.icon-F03:before {
content: "\e610";
}
.icon-F90:before {
content: "\e611";
}
.icon-F95:before {
content: "\e612";
}
.icon-folder:before {
content: "\e613";
}
.icon-folder-open:before {
content: "\e614";
}
.icon-folder-symlink:before {
content: "\e615";
}
.icon-gif:before {
content: "\e616";
}
.icon-h:before {
content: "\e617";
}
.icon-html:before {
content: "\e618";
}
.icon-ico:before {
content: "\e619";
}
.icon-ini:before {
content: "\e61a";
}
.icon-jade:before {
content: "\e61b";
}
.icon-jpeg:before {
content: "\e61c";
}
.icon-jpg:before {
content: "\e61d";
}
.icon-js:before {
content: "\e61e";
}
.icon-less:before {
content: "\e61f";
}
.icon-lnk:before {
content: "\e620";
}
.icon-log:before {
content: "\e621";
}
.icon-mako:before {
content: "\e622";
}
.icon-pdf:before {
content: "\e623";
}
.icon-png:before {
content: "\e624";
}
.icon-ps:before {
content: "\e625";
}
.icon-pxlio:before {
content: "\e626";
}
.icon-py:before {
content: "\e627";
}
.icon-pyc:before {
content: "\e628";
}
.icon-rar:before {
content: "\e629";
}
.icon-raw:before {
content: "\e62a";
}
.icon-root:before {
content: "\e62b";
}
.icon-sh:before {
content: "\e62c";
}
.icon-svg:before {
content: "\e62d";
}
.icon-tar:before {
content: "\e62e";
}
.icon-targz:before {
content: "\e62f";
}
.icon-tex:before {
content: "\e630";
}
.icon-tif:before {
content: "\e631";
}
.icon-tiff:before {
content: "\e632";
}
.icon-txt:before {
content: "\e633";
}
.icon-xml:before {
content: "\e634";
}
.icon-yaml:before {
content: "\e635";
}
.icon-yml:before {
content: "\e636";
}
.icon-zip:before {
content: "\e637";
}
......@@ -282,37 +379,47 @@
.icon-bmp, .icon-gif, .icon-ico, .icon-jpeg, .icon-jpg, .icon-png, .icon-raw, .icon-svg, .icon-tif, .icon-tiff {
color: @icon-green-dark;
}
// coding
.icon-c, .icon-cc, .icon-cpp, .icon-h {
color: @icon-blue-dark;
}
.icon-f, .icon-f03, .icon-f90, .icon-f95, .icon-F, .icon-F03, .icon-F90, .icon-F95 {
color: @icon-blue-dark;
}
.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;
color: @icon-purple-light;
}
.icon-py, .icon-pyc {
color: @icon-yellow;
}
// pxlio
.icon-pxlio {
color: @icon-blue-light;
}
// root
.icon-root {
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;
......
<div class="actionmenu dropdown clearfix">
<ul style="display:block;position:static;margin-bottom:5px;" class="dropdown-menu">
<li class="openFolder"><a href="#">Open Folder</a></li>
<li class="openFile"><a href="#">Open File</a></li>
<li class="rename"><a href="#">Rename</a></li>
<li class="copy"><a href="#">Copy</a></li>
<li class="cut"><a href="#">Cut</a></li>
<li class="paste"><a href="#">Paste</a></li>
<li class="remove"><a href="#">Remove</a></li>
<li class="download"><a href="#">Download</a></li>
<li class="compress"><a href="#">Compress</a></li>
<li class="createFile"><a href="#">New File</a></li>
<li class="createFolder"><a href="#">New Folder</a></li>
<div class="file-rightclickmenu btn-group"><span data-toggle="dropdown"></span>
<ul role="menu" class="dropdown-menu">
<li class="openFolder"><a href="#" tabindex="1"><i class="glyphicon glyphicon-folder-open"></i>Open Folder</a>
</li>
<li class="openFile"><a href="#" tabindex="2"><i class="glyphicon glyphicon-file"></i>Open File</a>
</li>
<li class="rename"><a href="#" tabindex="3"><i class="glyphicon glyphicon-pencil"></i>Rename</a>
</li>
<li class="copy"><a href="#" tabindex="4"><i class="glyphicon glyphicon-tags"></i>Copy</a>
</li>
<li class="cut"><a href="#" tabindex="5"><i class="glyphicon glyphicon-minus"></i>Cut</a>
</li>
<li class="remove"><a href="#" tabindex="6"><i class="glyphicon glyphicon-remove"></i>Remove</a>
</li>
<li class="download"><a href="#" tabindex="7"><i class="glyphicon glyphicon-download"></i>Download</a>
</li>
<li class="compress"><a href="#" tabindex="8"><i class="glyphicon glyphicon-compressed"></i>Compress</a>
</li>
<li class="createFile"><a href="#" tabindex="9"><i class="glyphicon glyphicon-file"></i>New File</a>
</li>
<li class="createFolder"><a href="#" tabindex="10"><i class="glyphicon glyphicon-folder-close"></i>New Folder</a>
</li>
<li class="upload"><a href="#" tabindex="11"><i class="glyphicon glyphicon-upload"></i>Upload</a>
</li>
<li class="divider"></li>
<li class="info"><a href="#">Info</a></li>
<li class="select"><a href="#">Select</a></li>
<li class="paste"><a href="#" tabindex="12"><i class="glyphicon glyphicon-share-alt"></i>Paste</a>
</li>
<li class="info"><a href="#" tabindex="13"><i class="glyphicon glyphicon-info-sign"></i>Info</a>
</li>
</ul>
</div>
\ No newline at end of file
</div>
.actionmenu.dropdown.clearfix
ul.dropdown-menu(style="display:block;position:static;margin-bottom:5px;")
.file-rightclickmenu.btn-group
span(data-toggle="dropdown")
ul.dropdown-menu(role="menu")
li.openFolder
a(href="#") Open Folder
a(href="#", tabindex=1)
i.glyphicon.glyphicon-folder-open
| Open Folder
li.openFile
a(href="#") Open File
a(href="#", tabindex=2)
i.glyphicon.glyphicon-file
| Open File
li.rename
a(href="#") Rename
a(href="#", tabindex=3)
i.glyphicon.glyphicon-pencil
| Rename
li.copy
a(href="#") Copy
a(href="#", tabindex=4)
i.glyphicon.glyphicon-tags
| Copy
li.cut
a(href="#") Cut
li.paste
a(href="#") Paste
a(href="#", tabindex=5)
i.glyphicon.glyphicon-minus
| Cut
li.remove
a(href="#") Remove
a(href="#", tabindex=6)
i.glyphicon.glyphicon-remove
| Remove
li.download
a(href="#") Download
a(href="#", tabindex=7)
i.glyphicon.glyphicon-download
| Download
li.compress
a(href="#") Compress
a(href="#", tabindex=8)
i.glyphicon.glyphicon-compressed
| Compress
li.createFile
a(href="#") New File
a(href="#", tabindex=9)
i.glyphicon.glyphicon-file
| New File