Skip to content

Commit e51068d

Browse files
jtreminiomcmonkey4eva
jtreminio
and
mcmonkey4eva
authored
Adding Image Comparison (#1345)
* Adding Image Comparison * Feedback implemented * wider * minor cleanings * might as well forward media types --------- Co-authored-by: Alex "mcmonkey" Goodwin <git_commits@alexgoodwin.dev>
1 parent 5a17ef1 commit e51068d

4 files changed

Lines changed: 924 additions & 7 deletions

File tree

‎src/Pages/_Generate/GenerateTab.cshtml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,31 @@
197197
<span class="text_button translate" onclick="imageFullView.close()">[Close]</span><br>
198198
</div>
199199
</div>
200+
<div class="modal modal-fullscreen image_compare_modal imageview_popup_modal_background" id="image_compare_modal">
201+
<div class="modal-dialog"></div>
202+
<div class="imageview_modal_inner_div">
203+
<div class="imageview_modal_imagewrap">
204+
<div class="image_compare_stage image_compare_stage_side" id="image_compare_stage"></div>
205+
</div>
206+
<div class="imageview_popup_modal_undertext">
207+
<div id="image_compare_transparency_row" style="display: none;">
208+
<label class="translate" for="image_compare_transparency_slider">Overlay Opacity</label>
209+
<div class="auto-slider-range-wrapper" style="--range-value: 50%;">
210+
<input class="auto-slider-range" type="range" min="0" max="100" value="50" step="1" id="image_compare_transparency_slider" data-ispot="false" autocomplete="off" oninput="updateRangeStyle(this)" onchange="updateRangeStyle(this)">
211+
</div>
212+
<span id="image_compare_transparency_value">50%</span>
213+
</div>
214+
<div class="image_fullview_extra_buttons">
215+
<button class="basic-button translate" data-compare-mode="side" type="button">Side by Side</button>
216+
<button class="basic-button translate" data-compare-mode="slide_horizontal" type="button">Horizontal Slide</button>
217+
<button class="basic-button translate" data-compare-mode="slide_vertical" type="button">Vertical Slide</button>
218+
<button class="basic-button translate" data-compare-mode="transparency" type="button">Transparency Overlay</button>
219+
<button class="basic-button translate" data-compare-mode="single" type="button">Single View</button>
220+
<button class="basic-button translate" id="image_compare_swap_button" type="button">Switch Image</button>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
200225
<div class="tab-pane genpage-bottom-tab" id="Presets-Tab" role="tabpanel">
201226
<div class="browser_container preset_list_container" id="preset_list"></div>
202227
<div class="sui-popover sui_popover_model" id="popover_presetmenu">

‎src/wwwroot/css/genpage.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -809,6 +809,190 @@ body {
809809
overflow: hidden;
810810
margin: auto;
811811
}
812+
.image_compare_modal .modal-dialog {
813+
display: none;
814+
}
815+
.image_compare_modal .imageview_modal_inner_div {
816+
display: flex;
817+
flex-direction: column;
818+
height: 100vh;
819+
}
820+
.image_compare_modal .imageview_modal_imagewrap {
821+
flex: 1 1 auto;
822+
min-height: 0;
823+
}
824+
.image_compare_modal .imageview_popup_modal_undertext {
825+
flex: 0 0 auto;
826+
min-height: 2rem;
827+
height: auto;
828+
display: flex;
829+
flex-direction: column;
830+
align-items: center;
831+
gap: 0.25rem;
832+
padding: 0.25rem 0;
833+
}
834+
#image_compare_transparency_row {
835+
display: flex;
836+
align-items: center;
837+
gap: 0.5rem;
838+
font-family: var(--bs-body-font-family);
839+
}
840+
#image_compare_transparency_row .auto-slider-range-wrapper {
841+
width: 14rem;
842+
max-width: 60vw;
843+
margin-top: 0;
844+
margin-bottom: 0;
845+
flex-shrink: 0;
846+
}
847+
#image_compare_transparency_value {
848+
min-width: 2.75rem;
849+
text-align: left;
850+
white-space: nowrap;
851+
}
852+
.image_compare_modal .image_fullview_extra_buttons {
853+
display: flex;
854+
align-items: center;
855+
}
856+
.image_compare_modal .image_fullview_extra_buttons [aria-pressed="true"] {
857+
background-color: var(--button-background-hover);
858+
border-color: var(--emphasis);
859+
}
860+
.image_compare_stage {
861+
width: 100%;
862+
height: 100%;
863+
min-height: 0;
864+
overflow: hidden;
865+
padding: 0;
866+
background-color: transparent;
867+
}
868+
.image_compare_stage.image_compare_stage_side {
869+
display: grid;
870+
grid-template-columns: 1fr 1fr;
871+
grid-template-rows: 1fr;
872+
gap: 0;
873+
}
874+
.image_compare_stage.image_compare_stage_single {
875+
display: block;
876+
}
877+
.image_compare_stage.image_compare_stage_side .image_compare_slot,
878+
.image_compare_stage.image_compare_stage_overlay .image_compare_slot,
879+
.image_compare_stage.image_compare_stage_single .image_compare_slot {
880+
width: 100%;
881+
height: 100%;
882+
}
883+
.image_compare_stage .image_compare_slot {
884+
position: relative;
885+
width: 100%;
886+
height: 100%;
887+
min-width: 0;
888+
min-height: 0;
889+
overflow: hidden;
890+
text-align: left;
891+
cursor: grab;
892+
}
893+
.image_compare_stage .image_compare_media {
894+
width: auto;
895+
height: auto;
896+
max-width: 100%;
897+
max-height: 100%;
898+
object-fit: contain;
899+
background-color: transparent;
900+
display: block;
901+
position: relative;
902+
margin: auto;
903+
}
904+
.image_compare_stage.image_compare_stage_overlay {
905+
display: flex;
906+
}
907+
.image_compare_stage .image_compare_overlay {
908+
position: relative;
909+
width: 100%;
910+
height: 100%;
911+
overflow: hidden;
912+
--image-compare-split: 50%;
913+
cursor: grab;
914+
}
915+
.image_compare_stage .image_compare_overlay_layer {
916+
position: absolute;
917+
inset: 0;
918+
overflow: hidden;
919+
pointer-events: none;
920+
}
921+
.image_compare_stage .image_compare_overlay_layer_left {
922+
clip-path: inset(0 calc(100% - var(--image-compare-split)) 0 0);
923+
}
924+
.image_compare_stage .image_compare_overlay_layer_right {
925+
clip-path: inset(0 0 0 var(--image-compare-split));
926+
}
927+
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_layer_left {
928+
clip-path: inset(0 0 calc(100% - var(--image-compare-split)) 0);
929+
}
930+
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_layer_right {
931+
clip-path: inset(var(--image-compare-split) 0 0 0);
932+
}
933+
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_left,
934+
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_right {
935+
clip-path: none;
936+
}
937+
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_right {
938+
opacity: var(--image-compare-transparency, 0.5);
939+
}
940+
.image_compare_stage .image_compare_overlay_divider {
941+
position: absolute;
942+
top: 0;
943+
bottom: 0;
944+
left: var(--image-compare-split);
945+
width: 12rem;
946+
transform: translateX(-50%);
947+
background-color: transparent;
948+
pointer-events: auto;
949+
cursor: ew-resize;
950+
z-index: 2;
951+
}
952+
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_divider {
953+
top: var(--image-compare-split);
954+
left: 0;
955+
right: 0;
956+
width: 100%;
957+
height: 12rem;
958+
transform: translateY(-50%);
959+
cursor: ns-resize;
960+
}
961+
.image_compare_stage .image_compare_overlay_divider::before {
962+
content: '';
963+
position: absolute;
964+
top: 0;
965+
bottom: 0;
966+
left: calc(50% - 1px);
967+
width: 2px;
968+
background-color: var(--emphasis);
969+
box-shadow: 0 0 0.75rem var(--emphasis);
970+
}
971+
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_divider::before {
972+
top: calc(50% - 1px);
973+
left: 0;
974+
right: 0;
975+
width: auto;
976+
height: 2px;
977+
}
978+
.image_compare_stage .image_compare_overlay_divider::after {
979+
content: '';
980+
position: absolute;
981+
top: 50%;
982+
left: 50%;
983+
width: 1rem;
984+
height: 1rem;
985+
border-radius: 50%;
986+
transform: translate(-50%, -50%);
987+
background-color: var(--emphasis);
988+
pointer-events: none;
989+
}
990+
@media (max-width: 900px) {
991+
.image_compare_stage.image_compare_stage_side {
992+
grid-template-columns: 1fr;
993+
grid-template-rows: 1fr 1fr;
994+
}
995+
}
812996
.browser-folder-tree-container {
813997
width: 15rem;
814998
display: inline-block;

0 commit comments

Comments
 (0)