initial commit 2

1 files changed, 198 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
new file mode 100644
index 00000000..54f00c1a
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -0,0 +1,198 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-flow: column;
+    align-items: center;
+    z-index: -1;
+}
+
+.o_AttachmentViewer_buttonNavigation {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.o_AttachmentViewer_buttonNavigationNext {
+    right: 15px;
+
+    > .fa {
+        margin: 1px 0 0 1px; // not correctly centered for some reasons
+    }
+}
+
+.o_AttachmentViewer_buttonNavigationPrevious {
+    left: 15px;
+
+    > .fa {
+        margin: 1px 1px 0 0; // not correctly centered for some reasons
+    }
+}
+
+.o_AttachmentViewer_header {
+    display: flex;
+    height: $o-navbar-height;
+    align-items: center;
+    padding: 0 15px;
+    width: 100%;
+}
+
+.o_AttachmentViewer_headerItem {
+    margin: 0 5px;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
+.o_AttachmentViewer_loading {
+    position: absolute;
+}
+
+.o_AttachmentViewer_main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: -1;
+    padding: 45px 0;
+
+    &.o_with_img {
+        overflow: hidden;
+    }
+}
+
+.o_AttachmentViewer_toolbar {
+    position: absolute;
+    bottom: 45px;
+    transform: translateY(100%);
+    display: flex;
+}
+
+.o_AttachmentViewer_toolbarButton {
+    padding: 8px;
+}
+
+.o_AttachmentViewer_viewImage {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.o_AttachmentViewer_viewIframe {
+    width: 90%;
+    height: 100%;
+}
+
+.o_AttachmentViewer_viewVideo {
+    width: 75%;
+    height: 75%;
+}
+
+.o_AttachmentViewer_zoomer {
+    position: absolute;
+    padding: 45px 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer {
+    outline: none;
+}
+
+.o_AttachmentViewer_buttonNavigation {
+    color: gray('400');
+    background-color: lighten(black, 15%);
+    border-radius: 100%;
+    cursor: pointer;
+
+    &:hover {
+        color: lighten(gray('400'), 15%);
+        background-color: black;
+    }
+}
+
+.o_AttachmentViewer_header {
+    background-color: rgba(0, 0, 0, 0.7);
+    color: gray('400');
+}
+
+.o_AttachmentViewer_headerItemButton {
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+        color: lighten(gray('400'), 15%);
+    }
+}
+
+.o_AttachmentViewer_headerItemButtonClose {
+    cursor: pointer;
+    font-size: 1.3rem;
+}
+
+.o_AttachmentViewer_toolbar {
+    cursor: pointer;
+}
+
+.o_AttachmentViewer_toolbarButton {
+    background-color: lighten(black, 15%);
+
+    &.o_disabled {
+        cursor: not-allowed;
+        filter: brightness(1.3);
+    }
+
+    &:not(.o_disabled) {
+        color: gray('400');
+        cursor: pointer;
+
+        &:hover {
+            background-color: black;
+            color: lighten(gray('400'), 15%);
+        }
+    }
+}
+
+.o_AttachmentViewer_view {
+    background-color: black;
+    box-shadow: 0 0 40px black;
+    outline: none;
+    border: none;
+
+    &.o_text {
+        background-color: white;
+    }
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer_viewImage {
+    transition: transform 0.3s ease;
+}
+