superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/components/_sd-photo-preview.scss

@@ -0,0 +1,508 @@
+@use "sass:color";
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$photo-nav-transition: all 0.2s ease-out;
+
+.sd-photo-preview  {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+    grid-gap: 0;
+    height: calc(100vh - 53px);
+    position: relative;
+    overflow: hidden;
+}
+
+.sd-photo-preview--grid-only {
+    grid-template-rows: 0 1fr;
+
+    .sd-photo-preview__image {
+        height: 0;
+        overflow: hidden;
+    }
+
+    .sd-photo-preview__thumb-strip {
+        overflow-y: auto;
+    }
+
+    .sd-photo-preview__thumb-strip--with-controls {
+        padding-block-start: 4.8rem;
+    }
+}
+
+.sd-photo-preview__thumb-controls {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    min-height: 4.8rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+    z-index: 2;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    background-color: rgba(32, 32, 32, 0.9);
+    padding: 0 2rem;
+}
+
+.sd-photo-preview__image,  .sd-photo-preview__video {
+    position: relative;
+    grid-column: 1/2;
+    grid-row: 1/2;
+    text-align: center;
+    background-color: var(--sd-colour-bg__photo-preview);
+    max-height: 100%; // needed for firefox
+
+    &.actioning {
+        &::before {
+            content: '';
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
+            z-index: 999;
+            background-image: url(../img/three-dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 60px;
+            background-color: var(--sd-colour-overlay-actioning);
+        }
+    }
+}
+
+.sd-photo-preview__video {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-content: center;
+    max-height: none;
+    background-color: #232323;
+
+    .sd-photo-preview__video-inner {
+        grid-row: 1/2;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        grid-template-columns: 1fr;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        height: auto;
+        width: auto;
+        max-width: 100%;
+        min-width: 48rem;
+    }
+
+    .sd-photo-preview__video-container {
+        grid-row: 1/2;
+        margin: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        video {
+            max-width: 110vh;
+            width: auto;
+            height: auto;
+            max-height: 100vh;
+            margin-block-start: 2rem;
+        }
+    } 
+
+    .sd-photo-preview__video-tools {
+        grid-row: 2/3;
+        margin: 0.8rem auto 3.2rem;
+        padding: 1.2rem;
+        border-radius: 0.8rem;
+        background-color: rgba(0, 0, 0, 0.3);
+        height: 6rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+    }
+
+    .sd-photo-preview__video-tools--blank {
+        background-color: rgba(0, 0, 0, 0);
+        padding: 0.6rem;
+    }
+}
+
+.sd-photo-preview__label {
+    @include mixins.text-overflow;
+    background: rgba(0, 0, 0, 0.25);
+    color: inherit;
+    padding: 0.8rem 2rem;
+    margin: 1rem auto;
+    line-height: 100%;
+    border-radius: dimensions.$border-radius__base--x-small;
+    font-weight: 300;
+    min-width: 16rem;
+}
+
+.sd-photo-preview__image {
+    max-height: calc(100vh - 53px);
+    max-width: calc(100vw - 40rem);
+    transition: max-width 0.2s ease-in-out; 
+    padding: 1.6rem;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        height: auto;
+        margin: auto;
+    }   
+}
+
+.sd-column-box__main-column.sd-column-box__main-column--expanded {
+    .sd-photo-preview__image {
+        max-width: 100vw;
+    }
+}
+
+.sd-photo-preview__thumb-strip {
+    grid-column: 1/2;
+    grid-row: 2/3;
+    min-height: 16rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
+    position: relative;
+    overflow-y: auto;
+}
+
+.sd-photo-preview__thumb-strip--video {
+    min-height: 10rem;
+    display: flex;
+    flex-direction: row;
+    overflow: visible;
+}
+
+.sd-photo-preview__thumbnail-edit {
+    position: relative;
+    height: 16rem;
+    flex-grow: 0;
+
+    img {
+        max-width: 100%;
+        height: auto;
+        max-height: 16rem;
+        display: block;
+    }
+
+    .sd-photo-preview__thumbnail-edit-label {
+        position: absolute;
+        inset-block-start: -2.2rem;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        height: 2rem;
+        text-align: center;
+        opacity: 0.5;
+    }
+}
+
+.image-overlay {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: 0.2s linear opacity;
+    z-index: 1;
+    opacity: 0;
+    color: colors.$white;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.image-overlay__button-block {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+}
+
+.image-overlay__button {
+    flex-grow: 0;
+    flex-shrink: 0;
+    color: #fff;
+    width: 4.8rem;
+    height: 4.8rem;
+    border: 2px solid rgba(255, 255, 255, 0.6);
+    border-radius: dimensions.$border-radius__base--full;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s linear all;
+    cursor: pointer;
+    text-decoration: none;
+    background-color: rgba(0, 0, 0, 0.2);
+
+    i {
+        color: inherit;
+        line-height: 1;
+        opacity: 0.6;
+        transition: 0.2s linear all;
+    }
+
+    &:hover {
+        border-color: white;
+        background-color: rgba(0, 0, 0, 0.6);
+        text-decoration: none;
+
+        i {
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        border-color: colors.$sd-colour-interactive;
+        background-color: rgba(0, 0, 0, 0.8);
+
+        i {
+            color: colors.$sd-colour-interactive;
+        }
+    }
+}
+
+.image-overlay__button + .image-overlay__button {
+    margin-inline-start: 0.8rem;
+}
+
+.sd-photo-preview__video-frames {
+    position: relative;
+    flex-grow: 1;
+}
+
+.sd-photo-preview--view-video {
+    .sd-photo-preview__video {
+        .sd-photo-preview__video-inner {
+            max-height: calc(100vh - 53px);
+        }
+    }
+}
+
+.sd-photo-preview--edit-video {
+    .sd-photo-preview__video {
+        .sd-photo-preview__video-inner {
+            max-height: calc(100vh - 53px - 160px);
+            max-width: 100vw;
+
+            .sd-photo-preview__video-container  {
+                video {
+                    max-width: calc(100vw - 4rem);
+                    max-height: calc(100vh - 53px - 160px - 100px);
+                }
+            }
+        }
+    }
+}
+
+.sd-photo-preview--view-video {
+    .sd-photo-preview__video {
+        .sd-photo-preview__video-inner {
+            max-height: calc(100vh - 53px);
+            max-width: calc(100vw - 44rem);
+
+            .sd-photo-preview__video-container {
+                video {
+                    max-width: calc(100vw - 44rem);
+                    max-height: calc(100vh - 53px - 90px);
+                }
+            }
+        }
+    }
+}
+
+@mixin photoNavButton-style(
+    $background: rgba(0,0,0,1),
+    $background-normal: color.scale($background, $alpha: -20%),
+    $background-hover: color.scale($background, $alpha: -10%),
+    $background-active: colors.$sd-colour-interactive) 
+{
+    border-radius: dimensions.$border-radius__base--full;
+    cursor: pointer;
+    height: 5.6rem;
+    line-height: 5.6rem;
+    position: absolute;
+    inset-block-start: calc(50% - 2.8rem);
+    width: 5.6rem;
+    box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35);
+    color: colors.$white;
+    transition: $photo-nav-transition;
+    background-color: $background-normal;
+    opacity: 0.3;
+
+    &:hover {
+        opacity: 0.6;
+        background-color: $background-hover;
+    }
+
+    &:active {
+        opacity: 0.8;
+        background-color: $background-active;
+    }
+
+    &::after {
+        content: " ";
+        font-family: 'sd_icons';
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        position: absolute;
+        inset-block-start:0;
+        inset-inline-start:0;
+        text-align: center;
+        z-index: 2;
+        color: colors.$white;
+        width: 5.6rem;
+        font-size: 3.2rem;
+    }
+}
+
+.sd-photo-preview__slide-in-button {
+    position: absolute !important;
+    inset-block-start: 2.4rem;
+    inset-inline-end: 0;
+    z-index: 2;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    height:4.8rem;
+    width:4.8rem;
+    color: colors.$white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 0 0 1.6rem;
+    border-radius: 6px 0 0 6px;
+    opacity: 0.5;
+    cursor: pointer;
+    text-decoration: none !important;
+    transition: $photo-nav-transition;
+
+    [class^="icon-"],
+    [class*=" icon-"] {
+        color: colors.$white; 
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+
+    &:active {
+        background-color: colors.$sd-colour-interactive;
+        opacity: 1;
+    }
+}
+
+.sd-photo-preview__nav-button {
+    @include photoNavButton-style;
+}
+
+.sd-photo-preview__nav-button--next {
+    inset-inline-end: 0.8rem;
+    color: inherit;
+
+    &::after {
+        content: "\e643";
+    }
+}
+.sd-photo-preview__nav-button--prev {
+    inset-inline-start: 0.8rem;
+    color: inherit;
+
+    &::after {
+        content: "\e642";
+    }
+}
+
+.upload__target {
+    position: absolute;
+    inset-block-start:0;
+    inset-inline-end: 0;
+    inset-block-end: 0; 
+    inset-inline-start:0;
+    z-index: 0;
+    border: 2px dashed colors.$sd-colour-interactive;
+    background-color: var(--sd-colour-interactive--alpha-10);
+}
+
+.upload__info {
+    margin: 0 auto;
+    max-width: 40rem;
+    position: relative;
+    inset-block-start: 50%;
+    margin-block-start: -10.6rem;
+    z-index: 1;
+}
+
+.upload__info-icon {
+    margin: 0 auto;
+    height: 7.4rem;
+    width: 9rem;
+    background-image: url(../img/icon_image_stack--white.svg); 
+    opacity: 0.25;
+    text-align: center;
+}
+
+.upload__info-heading {
+    margin: 0 auto;
+    opacity: 0.5;
+    text-align: center;
+    padding-block-start: 3rem;
+    text-align: center;
+    color: var(--color-text-muted);
+    font-size: 2.4rem;
+    font-weight: 300;
+}
+
+.upload__info-label {
+    position: relative;
+    text-align: center;
+    font-style: italic;
+    margin: 2.2rem auto;
+    color: var(--color-text-subdued);
+    opacity: 0.85;
+
+    &::after, &::before {
+        content: "___________";
+        position: absolute;
+        inset-block-start: -0.5rem;
+        color: inherit;
+        opacity: 0.25;
+    }
+    
+    &::after { 
+        margin-inline-start: 1.5rem;
+    }
+    
+    &::before {
+        margin-inline-start: -7.8rem;
+    }
+}
+.upload__info-button {
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    opacity: 0.75;
+}
+
+
+.sd-photo-preview__thumb-strip {
+    &:hover {
+        .upload-target {
+            display: block;
+        }
+    }
+}