ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

put svgs in icons.svg and reference appropriately, still not happy with pa_logo, but otherwise all working

Browse Source
This commit is contained in:
Damien De Paoli
2021-07-25 13:19:01 +10:00
parent 4f9e03f99e
commit b40ecbf208
6 changed files with 53 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
templates/files.html
View File

@@ -1,62 +1,6 @@
{% extends "base.html" %}
{% block main_content %}
<svg style="display:none">
<svg id="folder_yellow" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<path style="fill:#EFCE4A;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
<path style="fill:#EBBA16;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
</svg>
<svg id="folder_back" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<path style="fill:#EFCE4A;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
<path style="fill:#EBBA16;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
<g transform="matrix(-0.04 -0.28 0.28 -0.04 29 37)" id="7fb87763-71f2-4e66-92f9-3425f8e2ac7b" >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-50.5, -49.63)" d="M 47.241 73.538 L 87.35 50.376999999999995 L 54.598 17.623 L 54.598 33.28 C 18.114 31.59 10.956 52.564 14.436 81.641 C 20.303 61.312000000000005 31.583 50.328 50.721 53.012 L 47.241 73.538 z" stroke-linecap="round" />
</g>
</svg>
<svg id="folder_back_gray" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<path style="fill:#EFEFEF;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
<path style="fill:#C0C0C0;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
<g transform="matrix(-0.04 -0.28 0.28 -0.04 29 37)" id="7fb87763-71f2-4e66-92f9-3425f8e2ac7b" >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-50.5, -49.63)" d="M 47.241 73.538 L 87.35 50.376999999999995 L 54.598 17.623 L 54.598 33.28 C 18.114 31.59 10.956 52.564 14.436 81.641 C 20.303 61.312000000000005 31.583 50.328 50.721 53.012 L 47.241 73.538 z" stroke-linecap="round" />
</g>
</svg>
<svg id="caret_prev" viewBox="0 0 16 16">
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg>
<svg id="caret_next" viewBox="0 0 16 16">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
<svg id="folder_plus" viewBox="0 0 16 16">
<path d="m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"/>
<path d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"/>
</svg>
<svg id="trash" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
<svg id="import" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM6.354 9.854a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 8.707V12.5a.5.5 0 0 1-1 0V8.707L6.354 9.854z"/>
</svg>
<svg id="db" viewBox="0 0 29.26 29.26" style="enable-background:new 0 0 29.26 29.26;">
<path d="M14.627,15.954c-5.494,0-10.098-1.614-11.355-3.79c-0.221,0.383-0.35,0.781-0.35,1.194v3.561
c0,2.751,5.242,4.983,11.705,4.983c6.467,0,11.711-2.232,11.711-4.983v-3.561c0-0.413-0.131-0.811-0.354-1.194
C24.727,14.339,20.127,15.954,14.627,15.954z"/>
<path d="M14.627,23.31c-5.494,0-10.098-1.616-11.355-3.788c-0.221,0.381-0.35,0.779-0.35,1.191v3.564
c0,2.752,5.242,4.983,11.705,4.983c6.467,0,11.711-2.23,11.711-4.983v-3.564c0-0.412-0.131-0.81-0.354-1.19
C24.727,21.694,20.127,23.31,14.627,23.31z"/>
<path d="M26.018,5.042c-0.23,2.016-5.232,3.629-11.391,3.629c-6.156,0-11.158-1.613-11.387-3.628
C3.039,5.409,2.922,5.791,2.922,6.184v3.561c0,2.752,5.242,4.983,11.705,4.983c6.467,0,11.711-2.23,11.711-4.983V6.184
C26.338,5.791,26.219,5.409,26.018,5.042z"/>
<path d="M14.627,7.541c6.303,0,11.41-1.687,11.41-3.771c0-2.082-5.107-3.77-11.41-3.77
C8.328,0.001,3.219,1.689,3.219,3.771C3.219,5.854,8.328,7.541,14.627,7.541z"/>
</svg>
<svg id="film" viewBox="0 0 16 16">
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
</svg>
</svg>
<div class="container-fluid">
<form id="main_form" method="POST">
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
@@ -68,13 +12,13 @@
<div class="my-auto col col-auto">
<span class="alert alert-primary py-2">
{% if "files_ip" in request.url %}
<svg width="20" height="20" fill="currentColor"><use xlink:href="#import" /></svg>
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#import"/></svg>
{% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %}
{% elif "files_sp" in request.url %}
<svg width="20" height="20" fill="currentColor"><use xlink:href="#db" /></svg>
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#db"/></svg>
{% set tmp_path=cwd | replace( "static/Storage", "" ) + "/" %}
{% elif "files_rbp" in request.url %}
<svg width="20" height="20" fill="currentColor"><use xlink:href="#trash" /></svg>
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#trash"/></svg>
{% set tmp_path=cwd | replace( "static/Bin", "" ) + "/" %}
{% endif %}
{{tmp_path}}</span>
@@ -101,7 +45,7 @@
{% endif %}
<div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
<button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_prev" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#prev"/></svg>
</button>
<span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
{% set nxt_disabled="" %}
@@ -109,17 +53,17 @@
{% set nxt_disabled="disabled" %}
{% endif %}
<button id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_next" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#next"/></svg>
</button>
<button id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(); return false;">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#folder_plus" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#folder_plus"/></svg>
</button>
{% if "files_rbp" in request.url %}
<button id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#trash" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#trash"/></svg>
{% else %}
<button id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#trash" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#trash"/></svg>
{% endif %}
</button>
</div>
@@ -176,13 +120,13 @@
{% if folders and entry_data|length == 0 %}
{% if cwd != root %}
<figure id="_back" class="dir entry m-1" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back" /></svg>
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#folder_back"/></svg>
<figcaption class="figure-caption text-center">Back</figcaption>
</figure class="figure">
<script>f=$('#_back'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
{% else %}
<div class="col col-auto g-0 m-1">
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back_gray" /></svg>
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#folder_back_gray"/></svg>
</div>
{% endif %}
{% endif %}
@@ -190,13 +134,14 @@
{% if loop.index==1 and folders %}
{% if cwd != root %}
<figure class="col col-auto g-0 dir entry m-1" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor"><use xlink:href="#folder_back" /></svg>
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor">
<use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#folder_back"/></svg>
<figcaption class="svg_cap figure-caption text-center">Back</figcaption>
</figure class="figure">
{% else %}
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
<div class="col col-auto g-0 m-1">
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back_gray" /></svg>
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#folder_back_gray"/></svg>
</div>
{% endif %}
{% endif %}
@@ -227,7 +172,7 @@
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
{% if search_term is defined %}
<div style="position:absolute; bottom: 0px; left: 2px;">
<svg width="16" height="16" fill="white"><use xlink:href="#{{LocationIcon(obj)}}" /></svg>
<svg width="16" height="16" fill="white"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#{{LocationIcon(obj)}}"/></svg>
</div>
{% endif %}
<div id="s{{obj.id}}" style="display:none; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%);">
@@ -238,11 +183,11 @@
<div style="position:relative; width:100%">
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" style="display:block" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
<div style="position:absolute; top: 0px; left: 2px;">
<svg width="16" height="16" fill="white"><use xlink:href="#film" /></svg>
<svg width="16" height="16" fill="white"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#film"/></svg>
</div>
{% if search_term is defined %}
<div style="position:absolute; bottom: 0px; left: 2px;">
<svg width="16" height="16" fill="white"><use xlink:href="#{{LocationIcon(obj)}}" /></svg>
<svg width="16" height="16" fill="white"><use xlink:href="#{{url_for('static', filename='upstream/icons.svg')}}#{{LocationIcon(obj)}}"/></svg>
</div>
{% endif %}
</div>
@@ -259,7 +204,8 @@
{# if this dir is the toplevel of the cwd, show the folder icon #}
{% if dirname| TopLevelFolderOf(cwd) %}
<figure class="col col-auto g-0 figure dir entry m-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor"><use xlink:href="#folder_yellow" /></svg>
<svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor">
<use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#Directory"/></svg>
<figcaption class="svg_cap figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
</figure class="figure">
<script>f=$('#{{obj.id}}'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
@@ -275,11 +221,11 @@
<div class="row">
<div class="col my-auto d-flex justify-content-center">
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_prev" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#prev"/></svg>
</button>
<span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
<svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_next" /></svg>
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#next"/></svg>
</button>
</div>
</div>
@@ -417,7 +363,7 @@ function MoveDBox()
div+=`
<div class="input-group my-3">
<alert class="alert alert-primary my-auto py-1">
<svg width="20" height="20" fill="currentColor"><use xlink:href="#db" /></svg>
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#db"/></svg>
`
sps={{StoragePathNames()|safe}}
if( sps.length > 1 ) {