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

svgs cant have fill and do onHover properly, and arcs need a fill of none, so switched over to pngs and made the arrow match the actual direction of rotation

Browse Source
This commit is contained in:
Damien De Paoli
2025-01-04 22:01:51 +11:00
parent febdfbbd32
commit 989fc7c6db
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
templates/viewer.html
View File

@@ -12,6 +12,7 @@
.form-switch .form-check-input:focus { .form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
} }
#tst90:hover,#tst90:focus { filter: invert(73%) sepia(27%) saturate(3970%) hue-rotate(146deg) brightness(94%) contrast(100%); }
</style> </style>
<script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script> <script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script>
@@ -250,32 +251,35 @@
</div> </div>
<div class="col col-auto pt-1"> <div class="col col-auto pt-1">
<button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)"> <button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot90"/></svg> <img src="{{url_for('internal', filename='rot90.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot90-invert.png')}}'"
onMouseOut="this.src='{{url_for('internal', filename='rot90.png')}}'" />
</button> </button>
<button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)"> <button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot180"/></svg> <img src="{{url_for('internal', filename='rot180.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot180-invert.png')}}'"
onMouseOut="this.src='{{url_for('internal', filename='rot180.png')}}'" />
</button> </button>
<button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)"> <button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot270"/></svg> <img src="{{url_for('internal', filename='rot270.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot270-invert.png')}}'"
onMouseOut="this.src='{{url_for('internal', filename='rot270.png')}}'" />
</button> </button>
<button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')"> <button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
</button> </button>
<button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')"> <button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
</button> </button>
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()"> <button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
</button> </button>
<button class="btn btn-outline-info p-1" title="Show logs relating to this filename (hotkey: l)" onClick="JoblogSearch()"> <button class="btn btn-outline-info p-1" title="Show logs relating to this filename (hotkey: l)" onClick="JoblogSearch()">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#log"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#log"/></svg>
</button> </button>
<button class="btn btn-outline-info p-1" title="View Original" onClick="window.location='/'+objs[current].url"> <button class="btn btn-outline-info p-1" title="View Original" onClick="window.location='/'+objs[current].url">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg>
</button> </button>
<button id="del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)" <button id="del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)"
onClick="$.ajax({ type: 'POST', data: '&eid-0={{current}}', url: '/delete_files', success: function(data){ window.location='/'; return false; } })"> onClick="$.ajax({ type: 'POST', data: '&eid-0={{current}}', url: '/delete_files', success: function(data){ window.location='/'; return false; } })">
<svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg> <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
</button> </button>
</div> </div>
</div class="row"> </div class="row">