Skip to content

Commit

Permalink
feat: Adding tagging for file only for now
Browse files Browse the repository at this point in the history 
Signed-off-by: Vincent Boutour <[email protected]>
  • Loading branch information
@ViBiOh
ViBiOh committed Dec 31, 2022
1 parent bb7de5e commit b9d0e70
Show file tree
Hide file tree
Showing 25 changed files with 188 additions and 140 deletions.
7 changes: 7 additions & 0 deletions cmd/fibr/templates/edit-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ <h2 class="header">Rename</h2>
<input id="name-{{ .ID }}" type="text" name="newName" value="{{ .Name }}" />
</p>

{{ if not .IsDir }}
<p class="padding no-margin">
<label for="tags-{{ .ID }}" class="block">Tags, blank separated</label>
<input id="tags-{{ .ID }}" type="text" name="tags" value="{{ join .Tags " " }}" />
</p>
{{ end }}

{{ if .HasThumbnail }}
<p class="padding no-margin center">
<input id="cover-{{ .ID }}" type="checkbox" name="cover" value="true" {{ if .IsCover }}checked{{ end }} />
Expand Down
4 changes: 2 additions & 2 deletions cmd/fibr/templates/exif.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{ define "exif-modal-btn" }}
{{ if .Exif.HasData }}
<a href="#exif-modal" class="button button-icon exif-button" title="Show exif">
<img class="icon exif" src="{{ url "/svg/info" }}?fill=black" alt="Exif">
<a href="#exif-modal" class="button button-icon exif-button" title="Show exif metadatas">
<img class="icon exif" src="{{ url "/svg/info" }}?fill=black" alt="info">
</a>
{{ end }}
{{ end }}
Expand Down
2 changes: 1 addition & 1 deletion cmd/fibr/templates/file.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</video>
{{ else }}
{{ if .File.IsImage }}
<img src="{{ $url }}" alt="{{ .File.Name }}" />
<img src="{{ $url }}" alt="Image {{ .File.Name }}" />
{{ else }}
<object data="{{ $url }}" type="{{ .File.Mime }}"></object>
{{ end }}
Expand Down
78 changes: 44 additions & 34 deletions cmd/fibr/templates/files.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

{{ if .Request.CanEdit }}
<link rel="preload" as="image" href="{{ url "/svg/upload?fill=aliceblue" }}">
<link rel="preload" as="image" href="{{ url "/svg/folder-solid?fill=aliceblue" }}">
<link rel="preload" as="image" href="{{ url "/svg/folder?fill=aliceblue" }}">
<link rel="preload" as="image" href="{{ url "/svg/times?fill=crimson" }}">
<link rel="preload" as="image" href="{{ url "/svg/pencil-alt?fill=aliceblue" }}">

Expand Down Expand Up @@ -161,65 +161,65 @@

<div class="content">
<div id="menu" class="flex flex-center">
<a id="list-display" class="button button-icon" href="?d=list">
<img class="icon" src="{{ url "/svg/list?fill=aliceblue" }}" alt="List">
<a id="list-display" class="button button-icon" href="?d=list" title="List layout">
<img class="icon" src="{{ url "/svg/list?fill=aliceblue" }}" alt="list">
</a>
<a id="grid-display" class="button button-icon" href="?d=grid">
<img class="icon" src="{{ url "/svg/grid?fill=aliceblue" }}" alt="Grid">
<a id="grid-display" class="button button-icon" href="?d=grid" title="Grid layout">
<img class="icon" src="{{ url "/svg/grid?fill=aliceblue" }}" alt="grid">
</a>
{{ if .HasStory }}
<a id="story-display" class="button button-icon" href="?d=story">
<img class="icon" src="{{ url "/svg/image?fill=aliceblue" }}" alt="Image story">
<a id="story-display" class="button button-icon" href="?d=story" title="Story layout">
<img class="icon" src="{{ url "/svg/image?fill=aliceblue" }}" alt="picture">
</a>
{{ end }}

<span class="padding-left {{ if .Request.CanEdit }}hide-s{{ end }}">{{ len .Files }}<span {{ if .Request.CanEdit }}class="hide-xs"{{ end }}> element{{ if gt (len .Files) 1 }}s{{ end }}</span></span>
<span class="flex-grow"></span>

{{ if .Request.CanEdit }}
<a id="upload-button-link" href="#upload-modal" class="button button-icon">
<img class="icon" src="{{ url "/svg/upload?fill=aliceblue" }}" alt="Upload">
<a id="upload-button-link" href="#upload-modal" class="button button-icon" title="Upload file">
<img class="icon" src="{{ url "/svg/upload?fill=aliceblue" }}" alt="upload">
</a>
<a href="#folder-modal" class="button button-icon">
<img class="icon" src="{{ url "/svg/folder-plus?fill=aliceblue" }}" alt="Create folder">
<a href="#folder-modal" class="button button-icon" title="Create folder">
<img class="icon" src="{{ url "/svg/folder-plus?fill=aliceblue" }}" alt="folder with a plus">
</a>
{{ end }}

{{ if .Request.CanShare }}
<a href="#share-list" class="button button-icon">
<img class="icon" src="{{ url "/svg/share?fill=aliceblue" }}" alt="Share">
<a href="#share-list" class="button button-icon" title="Share">
<img class="icon" src="{{ url "/svg/share?fill=aliceblue" }}" alt="share">
</a>
{{ end }}

{{ if .Request.CanWebhook }}
<a href="#webhook-list" class="button button-icon">
<img class="icon" src="{{ url "/svg/webhook?fill=aliceblue" }}" alt="Webhook">
<a href="#webhook-list" class="button button-icon" title="Webhook">
<img class="icon" src="{{ url "/svg/webhook?fill=aliceblue" }}" alt="webhook">
</a>
{{ end }}

{{ if gt (len .Files) 0 }}
<a class="padding" href="?download" download>
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="Download">
<a class="padding" href="?download" title="Download files in an archive" download>
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="download">
</a>
{{ end }}

{{ if .HasMap }}
<a class="padding" href="#map" download>
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="View on map">
<a class="padding" href="#map" title="View on map">
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="map">
</a>
{{ end }}
</div>

<ul id="files" class="no-margin no-padding">
{{ range .SavedSearches }}
<li class="file relative padding-half">
<a class="filelink center ellipsis" href="?{{ raw .Query }}" title="{{ .Name }}">
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/folder-search?fill=aliceblue" }}" alt="Saved Search">
<a class="filelink center ellipsis" href="?{{ raw .Query }}" title="Saved search {{ .Name }}">
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/folder-search?fill=aliceblue" }}" alt="folder with magnifying glass">
<span class="filename ellipsis {{ if eq $root.Request.Display "list" }}padding-left{{ end }}">{{ .Name }}</span>

{{ if $root.Request.CanEdit }}
<a href="#delete-saved-search-modal-{{ .ID }}" class="button button-icon file-delete" title="Delete">
<img class="icon icon-square" src="{{ url "/svg/times?fill=crimson" }}" alt="Delete">
<img class="icon icon-square" src="{{ url "/svg/times?fill=crimson" }}" alt="delete">
</a>
{{ end }}
</a>
Expand All @@ -233,37 +233,47 @@
{{ template "async-image-item" . }}

{{ if .IsVideo }}
<img class="icon icon-overlay" src="{{ url "/svg/play?fill=rgba(192,192,192,0.8)" }}" alt="Play video">
<img class="icon icon-overlay" src="{{ url "/svg/play?fill=rgba(192,192,192,0.8)" }}" alt="play icon" title="Play video">
{{ end }}

{{ if .IsCover }}
<img class="icon icon-overlay-small" src="{{ url "/svg/rss?fill=rgba(192,192,192,0.8)" }}" alt="Is cover image" title="Is cover image">
<img class="icon icon-overlay-small" src="{{ url "/svg/rss?fill=rgba(192,192,192,0.8)" }}" alt="waves" title="Is cover image">
{{ end }}
{{ else }}
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/" }}{{ if .IsDir }}folder{{ else }}{{ iconFromExtension . }}{{ end }}?fill=aliceblue" alt="{{ if .IsDir }}Folder{{ else }}File{{ end }}">
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/" }}{{ if .IsDir }}folder{{ else }}{{ iconFromExtension . }}{{ end }}?fill=aliceblue" alt="{{ if .IsDir }}folder{{ else }}file{{ end }}">
<span class="filename ellipsis {{ if eq $root.Request.Display "list" }}padding-left{{ end }}">{{ .Name }}</span>
{{ end }}

<a href="{{ .URL }}?download" class="button button-icon file-download" title="Download" download="{{ .Name }}">
<img class="icon icon-square" src="{{ url "/svg/download?fill=aliceblue" }}" alt="Download">
<a href="{{ .URL }}?download" class="button button-icon file-download" title="Download {{ .Name }}" download="{{ .Name }}">
<img class="icon icon-square" src="{{ url "/svg/download?fill=aliceblue" }}" alt="download">
</a>

{{ if $root.Request.CanShare }}
<a href="#share-form-{{ .ID }}" class="button button-icon file-share" title="Share">
<img class="icon icon-square" src="{{ url "/svg/share?fill=aliceblue" }}" alt="Share {{ .Name }}">
<a href="#share-form-{{ .ID }}" class="button button-icon file-share" title="Share {{ .Name }}">
<img class="icon icon-square" src="{{ url "/svg/share?fill=aliceblue" }}" alt="share">
</a>
{{ end }}

{{ if $root.Request.CanEdit }}
<a href="#edit-modal-{{ .ID }}" class="button button-icon file-edit" title="Edit">
<img class="icon icon-square" src="{{ url "/svg/pencil-alt?fill=aliceblue" }}" alt="Edit">
<a href="#edit-modal-{{ .ID }}" class="button button-icon file-edit" title="Edit {{ .Name }}">
<img class="icon icon-square" src="{{ url "/svg/pencil-alt?fill=aliceblue" }}" alt="edit">
</a>
<a href="#delete-modal-{{ .ID }}" class="button button-icon file-delete" title="Delete">
<img class="icon icon-square" src="{{ url "/svg/times?fill=crimson" }}" alt="Delete">
<a href="#delete-modal-{{ .ID }}" class="button button-icon file-delete" title="Delete {{ .Name }}">
<img class="icon icon-square" src="{{ url "/svg/times?fill=crimson" }}" alt="delete">
</a>
{{ end }}
</a>

{{ if .Tags }}
{{- if eq $root.Request.Display "grid" -}}
<img class="icon tags" src="{{ url "/svg/tag" }}?fill=aliceblue" alt="tag" title="#{{ join .Tags " #" }}">
{{ else }}
<em class="tags ellipsis padding-left">
#{{ join .Tags " #" }}
</em>
{{ end}}
{{ end }}

{{ if .IsDir }}
{{ if or .Aggregate.Location (not .Aggregate.Start.IsZero) }}
{{- $startDate := .Aggregate.Start.Format "Jan 2006" -}}
Expand All @@ -273,7 +283,7 @@
<img
class="icon exif"
src="{{ url "/svg/info" }}?fill=aliceblue"
alt="Exif"
alt="exif"
title="
{{- if .Aggregate.Location }}
{{- .Aggregate.Location }}
Expand Down
13 changes: 13 additions & 0 deletions cmd/fibr/templates/items.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,13 @@
font-size: 1rem;
text-align: right;
}

.tags {
display: inline-block;
flex: 0.5 0.5;
font-size: 1rem;
text-align: right;
}
{{ end }}

{{ if eq .Request.Display "grid" }}
Expand Down Expand Up @@ -97,6 +104,12 @@
bottom: 0.5rem;
right: 0.5rem;
}

.tags {
bottom: 0.5rem;
left: 0.5rem;
position: absolute;
}
{{ end }}
</style>
{{ end }}
43 changes: 23 additions & 20 deletions cmd/fibr/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,37 +33,40 @@ <h2 class="small bg-grey no-margin full ellipsis">
{{ end }}
</span>

{{ if not (and .Previous.IsZero .Next.IsZero) }}
<nav class="flex">
{{ if not .Previous.IsZero }}
<a class="button button-icon" href="{{ url (.Request.AbsoluteURL .Previous.URL) }}?browser">
<img class="icon" src="{{ url "/svg/arrow-left?fill=aliceblue" }}" alt="Previous file">
</a>
{{ end }}
<nav class="flex">
{{ if not .Previous.IsZero }}
<a class="button button-icon" href="{{ url (.Request.AbsoluteURL .Previous.URL) }}?browser" title="Previous file">
<img class="icon" src="{{ url "/svg/arrow-left?fill=aliceblue" }}" alt="left arrow">
</a>
{{ end }}

{{ if not .Next.IsZero }}
<a class="button button-icon" href="{{ url (.Request.AbsoluteURL .Next.URL) }}?browser">
<img class="icon" src="{{ url "/svg/arrow-right?fill=aliceblue" }}" alt="Next file">
</a>
{{ end }}
</nav>
{{ end }}
{{ if not .Next.IsZero }}
<a class="button button-icon" href="{{ url (.Request.AbsoluteURL .Next.URL) }}?browser" title="Next file">
<img class="icon" src="{{ url "/svg/arrow-right?fill=aliceblue" }}" alt="right arrow">
</a>
{{ end }}

{{- $url := .Request.AbsoluteURL "/" }}
<a class="button button-icon" href="{{ url $url }}?d={{ .Request.LayoutPath $url }}" title="Back to folder">
<img class="icon" src="{{ url "/svg/folder-back?fill=aliceblue" }}" alt="folder back">
</a>
</nav>
{{ else }}
</span>
{{ if .Request.Share.Story }}
{{ if .HasMap }}
<a class="padding" href="#map" download>
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="View on map">
<a class="padding" href="#map" title="View on map">
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="map">
</a>
{{ end }}
{{ else }}
{{ if and .Request.CanEdit .Search }}
<a class="padding" href="#create-saved-search">
<img class="icon" src="{{ url "/svg/folder-search?fill=" }}aliceblue" alt="Created saved search folder">
<a class="padding" href="#create-saved-search" title="Created saved search folder">
<img class="icon" src="{{ url "/svg/folder-search?fill=" }}aliceblue" alt="folder with magnifying glass">
</a>
{{ end }}
<a class="padding" href="#search" download>
<img class="icon" src="{{ url "/svg/search?fill=" }}{{ if .Search }}limegreen{{ else }}aliceblue{{ end }}" alt="Search files">
<a class="padding" href="#search" title="Search files">
<img class="icon" src="{{ url "/svg/search?fill=" }}{{ if .Search }}limegreen{{ else }}aliceblue{{ end }}" alt="magnifying glass">
</a>
{{ end }}
{{ end }}
Expand Down
24 changes: 12 additions & 12 deletions cmd/fibr/templates/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@

<div class="content">
<div id="menu" class="flex flex-center">
<a id="list-display" class="button button-icon" href="?d=list&{{ raw .Search.Encode }}">
<img class="icon" src="{{ url "/svg/list?fill=aliceblue" }}" alt="List">
<a id="list-display" class="button button-icon" href="?d=list&{{ raw .Search.Encode }}" title="List layout">
<img class="icon" src="{{ url "/svg/list?fill=aliceblue" }}" alt="list">
</a>
<a id="grid-display" class="button button-icon" href="?d=grid&{{ raw .Search.Encode }}">
<img class="icon" src="{{ url "/svg/grid?fill=aliceblue" }}" alt="Grid">
<a id="grid-display" class="button button-icon" href="?d=grid&{{ raw .Search.Encode }}" title="Grid layout">
<img class="icon" src="{{ url "/svg/grid?fill=aliceblue" }}" alt="grid">
</a>

<span class="padding-left">
Expand All @@ -84,14 +84,14 @@
<span class="flex-grow"></span>

{{ if gt (len .Files) 0 }}
<a class="padding" href="?download&{{ raw .Search.Encode }}" download>
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="Download">
<a class="padding" href="?download&{{ raw .Search.Encode }}" title="Download results in an archive" download>
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="download">
</a>
{{ end }}

{{ if .HasMap }}
<a class="padding" href="#map" download>
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="View on map">
<a class="padding" href="#map" title="View on map">
<img class="icon" src="{{ url "/svg/map?fill=aliceblue" }}" alt="map">
</a>
{{ end }}
</div>
Expand All @@ -110,15 +110,15 @@
{{ template "async-image-item" . }}

{{ if .IsVideo }}
<img class="icon icon-overlay" src="{{ url "/svg/play?fill=rgba(192,192,192,0.8)" }}" alt="Play video">
<img class="icon icon-overlay" src="{{ url "/svg/play?fill=rgba(192,192,192,0.8)" }}" alt="play icon" title="Play video">
{{ end }}
{{ else }}
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/" }}{{ if .IsDir }}folder{{ else }}{{ iconFromExtension . }}{{ end }}?fill=aliceblue" alt="{{ if .IsDir }}Folder{{ else }}File{{ end }}">
<img class="icon {{ if eq $root.Request.Display "grid" }}icon-large{{ end }}" src="{{ url "/svg/" }}{{ if .IsDir }}folder{{ else }}{{ iconFromExtension . }}{{ end }}?fill=aliceblue" alt="{{ if .IsDir }}folder{{ else }}file{{ end }}">
<span class="filename ellipsis {{ if eq $root.Request.Display "list" }}padding-left{{ end }}">{{ .URL }}</span>
{{ end }}

<a href="{{ .URL }}?download" class="button button-icon file-download" title="Download" download="{{ .Name }}">
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="Download">
<a href="{{ .URL }}?download" class="button button-icon file-download" title="Download {{ .Name }}" download="{{ .Name }}">
<img class="icon" src="{{ url "/svg/download?fill=aliceblue" }}" alt="download">
</a>
</a>
</li>
Expand Down
10 changes: 5 additions & 5 deletions cmd/fibr/templates/share-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@ <h2 class="flex flex-center header no-margin">
</th>
<td class="center">
{{ if .Edit }}
<img class="icon" src="{{ url "/svg/edit?fill=aliceblue" }}" alt="Editable">
<img class="icon" src="{{ url "/svg/edit?fill=aliceblue" }}" alt="pencil" title="Editable">
{{ end }}
{{ if .Story }}
<img class="icon" src="{{ url "/svg/image?fill=aliceblue" }}" alt="Story mode">
<img class="icon" src="{{ url "/svg/image?fill=aliceblue" }}" alt="image" title="Story mode">
{{ end }}
{{ if .Password }}
<img class="icon" src="{{ url "/svg/lock?fill=aliceblue" }}" alt="Password protected">
<img class="icon" src="{{ url "/svg/lock?fill=aliceblue" }}" alt="lock" title="Password protected">
{{ end }}
{{ if .Duration }}
<img class="icon" src="{{ url "/svg/hourglass?fill=aliceblue" }}" alt="Duration">
<img class="icon" src="{{ url "/svg/hourglass?fill=aliceblue" }}" alt="hourglass" title="Duration">
{{ .Duration.Hours }}h
{{ end }}
</td>
Expand All @@ -53,7 +53,7 @@ <h2 class="flex flex-center header no-margin">
<input type="hidden" name="type" value="share" />
<input type="hidden" name="method" value="DELETE" />
<input type="hidden" name="id" value="{{ .ID }}" />
<button id="share-delete-{{ .ID }}" type="submit" class="button button-icon" title="Delete" data-confirm="share for {{ .Path }}">
<button id="share-delete-{{ .ID }}" type="submit" class="button button-icon" title="Delete {{ .Path }}" data-confirm="share for {{ .Path }}">
<img class="icon" src="{{ url "/svg/times?fill=crimson" }}" alt="Delete">
</button>
</form>
Expand Down
Loading

2 comments on commit b9d0e70

@dumblob
Copy link

@dumblob dumblob commented on b9d0e70 Jan 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, LGTM. Thanks for these first steps!

@ViBiOh
Copy link
Owner Author

@ViBiOh ViBiOh commented on b9d0e70 Jan 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, LGTM. Thanks for these first steps!

I refactored a bunch of things during holidays (while also enjoying my holidays ^^). I need to tweak more things (tags on folder, tags display/update on story mode, etc).

The virtual folder, that I've called "saved search", is already ready. For sharing only the "saved search", I need to think of it, in terms of permissions and security. You can already share a folder that contains a saved search in it.

Please sign in to comment.