Skip to content

Commit 45b97f6

Browse files
jtreminiojtreminio
committed
Adding Image Comparison
1 parent 8718623 commit 45b97f6

4 files changed

Lines changed: 873 additions & 0 deletions

File tree

‎src/Pages/_Generate/GenerateTab.cshtml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,24 @@
197197
<span class="text_button translate" onclick="imageFullView.close()">[Close]</span><br>
198198
</div>
199199
</div>
200+
<div class="modal modal-fullscreen 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_side" id="image_compare_stage"></div>
205+
</div>
206+
<div class="imageview_popup_modal_undertext">
207+
<div class="image_fullview_extra_buttons">
208+
<button class="basic-button translate" data-compare-mode="side" type="button">Side by Side</button>
209+
<button class="basic-button translate" data-compare-mode="slide_horizontal" type="button">Horizontal Slide</button>
210+
<button class="basic-button translate" data-compare-mode="slide_vertical" type="button">Vertical Slide</button>
211+
<button class="basic-button translate" data-compare-mode="transparency" type="button">Transparency Overlay</button>
212+
<button class="basic-button translate" data-compare-mode="single" type="button">Single View</button>
213+
<button class="basic-button translate" id="image_compare_swap_button" type="button">Switch Image</button>
214+
</div>
215+
</div>
216+
</div>
217+
</div>
200218
<div class="tab-pane genpage-bottom-tab" id="Presets-Tab" role="tabpanel">
201219
<div class="browser_container preset_list_container" id="preset_list"></div>
202220
<div class="sui-popover sui_popover_model" id="popover_presetmenu">

‎src/wwwroot/css/genpage.css‎

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

0 commit comments

Comments
 (0)