Skip to content

Adding Image Comparison #1345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcmonkey4eva merged 5 commits into from
May 26, 2026
+924 −7
Merged

Adding Image Comparison #1345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45b97f6
Adding Image Comparison
jtreminio May 25, 2026
e9c2561
Feedback implemented
jtreminio May 25, 2026
12a55fd
wider
mcmonkey4eva May 26, 2026
bc9cbef
minor cleanings
mcmonkey4eva May 26, 2026
69cc8b2
might as well forward media types
mcmonkey4eva May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/Pages/_Generate/GenerateTab.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,31 @@
<span class="text_button translate" onclick="imageFullView.close()">[Close]</span><br>
</div>
</div>
<div class="modal modal-fullscreen image_compare_modal imageview_popup_modal_background" id="image_compare_modal">
<div class="modal-dialog"></div>
<div class="imageview_modal_inner_div">
<div class="imageview_modal_imagewrap">
<div class="image_compare_stage image_compare_stage_side" id="image_compare_stage"></div>
</div>
<div class="imageview_popup_modal_undertext">
<div id="image_compare_transparency_row" style="display: none;">
<label class="translate" for="image_compare_transparency_slider">Overlay Opacity</label>
<div class="auto-slider-range-wrapper" style="--range-value: 50%;">
<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)">
</div>
<span id="image_compare_transparency_value">50%</span>
</div>
<div class="image_fullview_extra_buttons">
<button class="basic-button translate" data-compare-mode="side" type="button">Side by Side</button>
<button class="basic-button translate" data-compare-mode="slide_horizontal" type="button">Horizontal Slide</button>
<button class="basic-button translate" data-compare-mode="slide_vertical" type="button">Vertical Slide</button>
<button class="basic-button translate" data-compare-mode="transparency" type="button">Transparency Overlay</button>
<button class="basic-button translate" data-compare-mode="single" type="button">Single View</button>
<button class="basic-button translate" id="image_compare_swap_button" type="button">Switch Image</button>
</div>
</div>
</div>
</div>
<div class="tab-pane genpage-bottom-tab" id="Presets-Tab" role="tabpanel">
<div class="browser_container preset_list_container" id="preset_list"></div>
<div class="sui-popover sui_popover_model" id="popover_presetmenu">
Expand Down
184 changes: 184 additions & 0 deletions src/wwwroot/css/genpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -809,6 +809,190 @@ body {
overflow: hidden;
margin: auto;
}
.image_compare_modal .modal-dialog {
display: none;
}
.image_compare_modal .imageview_modal_inner_div {
display: flex;
flex-direction: column;
height: 100vh;
}
.image_compare_modal .imageview_modal_imagewrap {
flex: 1 1 auto;
min-height: 0;
}
.image_compare_modal .imageview_popup_modal_undertext {
flex: 0 0 auto;
min-height: 2rem;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0;
}
#image_compare_transparency_row {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--bs-body-font-family);
}
#image_compare_transparency_row .auto-slider-range-wrapper {
width: 14rem;
max-width: 60vw;
margin-top: 0;
margin-bottom: 0;
flex-shrink: 0;
}
#image_compare_transparency_value {
min-width: 2.75rem;
text-align: left;
white-space: nowrap;
}
.image_compare_modal .image_fullview_extra_buttons {
display: flex;
align-items: center;
}
.image_compare_modal .image_fullview_extra_buttons [aria-pressed="true"] {
background-color: var(--button-background-hover);
border-color: var(--emphasis);
}
.image_compare_stage {
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
padding: 0;
background-color: transparent;
}
.image_compare_stage.image_compare_stage_side {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
}
.image_compare_stage.image_compare_stage_single {
display: block;
}
.image_compare_stage.image_compare_stage_side .image_compare_slot,
.image_compare_stage.image_compare_stage_overlay .image_compare_slot,
.image_compare_stage.image_compare_stage_single .image_compare_slot {
width: 100%;
height: 100%;
}
.image_compare_stage .image_compare_slot {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
text-align: left;
cursor: grab;
}
.image_compare_stage .image_compare_media {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: transparent;
display: block;
position: relative;
margin: auto;
}
.image_compare_stage.image_compare_stage_overlay {
display: flex;
}
.image_compare_stage .image_compare_overlay {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
--image-compare-split: 50%;
cursor: grab;
}
.image_compare_stage .image_compare_overlay_layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.image_compare_stage .image_compare_overlay_layer_left {
clip-path: inset(0 calc(100% - var(--image-compare-split)) 0 0);
}
.image_compare_stage .image_compare_overlay_layer_right {
clip-path: inset(0 0 0 var(--image-compare-split));
}
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_layer_left {
clip-path: inset(0 0 calc(100% - var(--image-compare-split)) 0);
}
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_layer_right {
clip-path: inset(var(--image-compare-split) 0 0 0);
}
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_left,
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_right {
clip-path: none;
}
.image_compare_stage .image_compare_overlay_transparency .image_compare_overlay_layer_right {
opacity: var(--image-compare-transparency, 0.5);
}
.image_compare_stage .image_compare_overlay_divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--image-compare-split);
width: 12rem;
transform: translateX(-50%);
background-color: transparent;
pointer-events: auto;
cursor: ew-resize;
z-index: 2;
}
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_divider {
top: var(--image-compare-split);
left: 0;
right: 0;
width: 100%;
height: 12rem;
transform: translateY(-50%);
cursor: ns-resize;
}
.image_compare_stage .image_compare_overlay_divider::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 1px);
width: 2px;
background-color: var(--emphasis);
box-shadow: 0 0 0.75rem var(--emphasis);
}
.image_compare_stage .image_compare_overlay_slide_vertical .image_compare_overlay_divider::before {
top: calc(50% - 1px);
left: 0;
right: 0;
width: auto;
height: 2px;
}
.image_compare_stage .image_compare_overlay_divider::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: var(--emphasis);
pointer-events: none;
}
@media (max-width: 900px) {
.image_compare_stage.image_compare_stage_side {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
.browser-folder-tree-container {
width: 15rem;
display: inline-block;
Expand Down
Loading
Loading