Sidebar and such
Henrique Dias
parent
1fb4fab095
commit
ad0368b745
|
|
@ -242,12 +242,16 @@ fieldset h3,
|
|||
.action {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
color: #546E7A;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
box-shadow: 0 0 0 0;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action.disabled {
|
||||
|
|
@ -262,7 +266,7 @@ fieldset h3,
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.action:hover i {
|
||||
.action:hover {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
|
|
@ -395,6 +399,30 @@ header>div div {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* SIDEBAR */
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 20%;
|
||||
}
|
||||
#sidebar .action {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
font-size: 1.1em;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#sidebar .action > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 78%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* TOP BAR *
|
||||
|
|
@ -791,9 +819,9 @@ header>div div {
|
|||
#listing.list .item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 1em;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#listing.list h2 {
|
||||
|
|
@ -840,13 +868,15 @@ header>div div {
|
|||
|
||||
#listing.list .item.header {
|
||||
display: flex !important;
|
||||
background: #fafafa;
|
||||
background: #f8f8f8;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
width: 78%;
|
||||
top: 7.8em;
|
||||
left: 0;
|
||||
left: 20%;
|
||||
z-index: 999;
|
||||
padding: .85em;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#listing.list .item.header>div:first-child {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
{{ define "right-side-actions" }}
|
||||
{{- if .IsDir }}
|
||||
<a aria-label="Switch View" href="?display={{- if eq .Display "mosaic" }}list{{ else }}mosaic{{ end }}" class="action">
|
||||
<i class="material-icons">{{- if eq .Display "mosaic" }}view_list{{ else }}view_module{{ end }}</i>
|
||||
<span>Switch view</span>
|
||||
</a>
|
||||
|
||||
<button aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
|
||||
<i class="material-icons">check_circle</i>
|
||||
<span>Select</span>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
||||
{{- if and (.User.AllowNew) (.IsDir) }}
|
||||
<button aria-label="Upload" title="Upload" class="action" id="upload">
|
||||
<i class="material-icons">file_upload</i>
|
||||
<span>Upload</span>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
||||
{{- if and .User.AllowEdit (not .IsDir) }}
|
||||
<button aria-label="Delete" title="Delete" class="action" id="delete">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
||||
<button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
|
||||
{{- if not .IsDir}}<a href="?download=true">{{ end }}
|
||||
<i class="material-icons">file_download</i><span>Download</span>
|
||||
{{- if not .IsDir}}</a>{{ end }}
|
||||
|
||||
{{- if .IsDir }}
|
||||
<ul class="dropdown" id="download-drop">
|
||||
<a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
|
||||
<a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
|
||||
</ul>
|
||||
{{- end }}
|
||||
</button>
|
||||
|
||||
<button title="Info" aria-label="Info" class="action" id="info">
|
||||
<i class="material-icons">info</i>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ define "left-side-actions" }}
|
||||
{{- if and (not .IsDir) (.User.AllowEdit) }}
|
||||
{{- if .Editor}}
|
||||
|
||||
{{- if eq .Data.Mode "markdown" }}
|
||||
<button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
|
||||
<i class="material-icons" title="Preview">remove_red_eye</i>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
||||
{{- if eq .Data.Visual true }}
|
||||
<button aria-label="Toggle edit source" class="action" id="edit-source">
|
||||
<i class="material-icons" title="Toggle edit source">code</i>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
||||
{{/* end if editor */}}
|
||||
{{- end }}
|
||||
|
||||
<button aria-label="Save" class="action" id="save">
|
||||
<i class="material-icons" title="Save">save</i>
|
||||
</button>
|
||||
|
||||
{{/* end if not dir and AllowEdit */}}
|
||||
{{- end }}
|
||||
|
||||
{{- if and .IsDir .User.AllowEdit }}
|
||||
<button aria-label="Edit" class="action" id="rename">
|
||||
<i class="material-icons" title="Edit">mode_edit</i>
|
||||
<span>Rename</span>
|
||||
</button>
|
||||
|
||||
<button aria-label="Move" class="action" id="move">
|
||||
<i class="material-icons" title="Move">forward</i>
|
||||
<span>Move file</span>
|
||||
</button>
|
||||
|
||||
<button aria-label="Delete" class="action" id="delete">
|
||||
<i class="material-icons" title="Delete">delete</i><span>Delete</span>
|
||||
</button>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
|
@ -62,101 +62,15 @@
|
|||
</div>
|
||||
|
||||
<div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
|
||||
{{- if and (not .IsDir) (.User.AllowEdit) }}
|
||||
{{- if .Editor}}
|
||||
|
||||
{{- if eq .Data.Mode "markdown" }}
|
||||
<div tabindex="0" role="button" aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
|
||||
<i class="material-icons" title="Preview">remove_red_eye</i>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if eq .Data.Visual true }}
|
||||
<div tabindex="0" role="button" aria-label="Toggle edit source" class="action" id="edit-source">
|
||||
<i class="material-icons" title="Toggle edit source">code</i>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
<div tabindex="0" role="button" aria-label="Save" class="action" id="save">
|
||||
<i class="material-icons" title="Save">save</i>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if and (.User.AllowEdit) (.IsDir) }}
|
||||
<div tabindex="0" role="button" aria-label="Move" class="action" id="move">
|
||||
<i class="material-icons" title="Move">forward</i>
|
||||
<span>Move file</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if and .IsDir .User.AllowEdit }}
|
||||
<div tabindex="0" role="button" aria-label="Edit" class="action" id="rename">
|
||||
<i class="material-icons" title="Edit">mode_edit</i>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if and .User.AllowEdit .IsDir }}
|
||||
<div tabindex="0" role="button" aria-label="Delete" class="action" id="delete">
|
||||
<i class="material-icons" title="Delete">delete</i><span>Delete</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- template "left-side-actions" . -}}
|
||||
</div>
|
||||
|
||||
<div tabindex="0" role="button" aria-label="Moew" class="action mobile-only" id="more">
|
||||
<button aria-label="More" class="action mobile-only" id="more">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="actions" id="main-actions">
|
||||
{{- if .IsDir }}
|
||||
<div role="button" class="action" id="view">
|
||||
{{- if eq .Display "mosaic" }}
|
||||
<a tabindex="0" aria-label="Switch to list" title="Switch View" href="?display=list">
|
||||
<i class="material-icons">view_list</i><span>Switch view</span>
|
||||
</a>
|
||||
{{- else }}
|
||||
<a tabindex="0" aria-label="Switch to Mosaic" title="Switch View" href="?display=mosaic">
|
||||
<i class="material-icons">view_module</i><span>Switch view</span>
|
||||
</a>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div tabindex="0" role="button" aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
|
||||
<i class="material-icons">check_circle</i><span>Select</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if and (.User.AllowNew) (.IsDir) }}
|
||||
<div tabindex="0" aria-label="Upload" role="button" class="action" id="upload">
|
||||
<i class="material-icons" title="Upload">file_upload</i><span>Upload</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if and .User.AllowEdit (not .IsDir) }}
|
||||
<div tabindex="0" role="button" aria-label="Delete" class="action" id="delete">
|
||||
<i class="material-icons" title="Delete">delete</i><span>Delete</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
<div {{ if .IsDir }}data-dropdown{{ end }} tabindex="0" role="button" aria-label="Download" class="action" id="download">
|
||||
{{- if not .IsDir}}<a href="?download=true">{{ end }}
|
||||
<i class="material-icons" title="Download">file_download</i><span>Download</span>
|
||||
{{- if not .IsDir}}</a>{{ end }}
|
||||
|
||||
{{- if .IsDir }}
|
||||
<ul class="dropdown" id="download-drop">
|
||||
<a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
|
||||
<a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
|
||||
<a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
|
||||
</ul>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div tabindex="0" role="button" aria-label="Info" class="action" id="info">
|
||||
<i class="material-icons" title="Info">info</i><span>Info</span>
|
||||
</div>
|
||||
{{- template "right-side-actions" . -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -170,6 +84,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<nav id="sidebar">
|
||||
<a class="action" href="{{ .BaseURL }}">
|
||||
<i class="material-icons">folder</i>
|
||||
<span>My Files</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
{{- template "content" . }}
|
||||
</main>
|
||||
|
|
|
|||
1
page.go
1
page.go
|
|
@ -103,6 +103,7 @@ func (p page) PreviousLink() string {
|
|||
|
||||
// PrintAsHTML formats the page in HTML and executes the template
|
||||
func (p page) PrintAsHTML(w http.ResponseWriter, m *FileManager, templates ...string) (int, error) {
|
||||
templates = append(templates, "actions")
|
||||
templates = append(templates, "templates")
|
||||
|
||||
if p.minimal {
|
||||
|
|
|
|||
Loading…
Reference in New Issue