initial commit 2

1 files changed, 381 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
new file mode 100644
index 00000000..16d9c790
--- /dev/null
+++ b/addons/mail/static/src/components/message/message.scss
@@ -0,0 +1,381 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Message {
+    display: flex;
+    flex: 0 0 auto;
+    padding: map-get($spacers, 2);
+}
+
+.o_Message_authorAvatar {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.o_Message_authorAvatarContainer {
+    position: relative;
+    height: 36px;
+    width: 36px;
+}
+
+.o_Message_authorName {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_checkbox {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_commandStar {
+    font-size: 1.3em;
+}
+
+.o_Message_Composer {
+    flex: 1 1 auto;
+}
+
+.o_Message_commands {
+    display: flex;
+    align-items: center;
+}
+
+.o_Message_content {
+    word-wrap: break-word;
+    word-break: break-word;
+
+    *:not(li):not(li div) {
+        // Message content can contain arbitrary HTML that might overflow and break
+        // the style without this rule.
+        // Lists are ignored because otherwise bullet style become hidden from overflow.
+        // It's acceptable not to manage overflow of these tags for the moment.
+        // It also excludes all div in li because 1st leaf and div child of list overflow
+        // may impact the bullet point (at least it does on Safari).
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+.o_Message_core {
+    min-width: 0; // allows this flex child to shrink more than its content
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_footer {
+    display: flex;
+    flex-direction: column;
+}
+
+.o_Message_header {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: baseline;
+}
+
+.o_Message_headerCommands {
+    margin-inline-end: map-get($spacers, 2);
+    align-self: center;
+
+    .o_Message_headerCommand {
+        padding-left: map-get($spacers, 2);
+        padding-right: map-get($spacers, 2);
+
+        &.o-mobile {
+            padding-left: map-get($spacers, 3);
+            padding-right: map-get($spacers, 3);
+
+            &:first-child {
+                padding-left: map-get($spacers, 2);
+            }
+
+            &:last-child {
+                padding-right: map-get($spacers, 2);
+            }
+        }
+    }
+}
+
+.o_Message_headerDate {
+    margin-inline-end: map-get($spacers, 2);
+    font-size: 0.8em;
+}
+
+.o_Message_moderationAction {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_moderationPending {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_moderationSubHeader {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+.o_Message_originThread {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_partnerImStatusIcon {
+    @include o-position-absolute($bottom: 0, $right: 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Message_prettyBody {
+
+    > p:last-of-type {
+        margin-bottom: 0;
+    }
+
+}
+
+.o_Message_readMoreLess {
+    display: block;
+}
+
+.o_Message_seenIndicator {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+.o_Message_sidebar {
+    flex: 0 0 $o-mail-message-sidebar-width;
+    max-width: $o-mail-message-sidebar-width;
+    display: flex;
+    margin-inline-end: map-get($spacers, 2);
+    justify-content: center;
+
+    &.o-message-squashed {
+        align-items: flex-start;
+    }
+}
+
+.o_Message_sidebarItem {
+    margin-left: map-get($spacers, 1);
+    margin-right: map-get($spacers, 1);
+
+    &.o-message-squashed {
+        display: flex;
+    }
+}
+
+.o_Message_trackingValues {
+    margin-top: map-get($spacers, 2);
+}
+
+.o_Message_trackingValue {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.o_Message_trackingValueItem {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Message {
+    background-color: white;
+
+    &:hover, &.o-clicked {
+
+        .o_Message_commands {
+            opacity: 1;
+        }
+
+        .o_Message_sidebarItem.o-message-squashed {
+            display: flex;
+        }
+
+        .o_Message_seenIndicator.o-message-squashed {
+            display: none;
+        }
+    }
+
+    .o_Message_partnerImStatusIcon {
+        color: white;
+    }
+
+    &.o-not-discussion {
+        background-color: lighten(gray('300'), 5%);
+        border-bottom: 1px solid darken(gray('300'), 5%);
+
+        .o_Message_partnerImStatusIcon {
+            color: lighten(gray('300'), 5%);
+        }
+
+        &.o-selected {
+            border-bottom: 1px solid darken(gray('400'), 5%);
+        }
+    }
+
+    &.o-selected {
+        background-color: gray('400');
+
+        .o_Message_partnerImStatusIcon {
+            color: gray('400');
+        }
+    }
+
+    &.o-starred {
+
+        .o_Message_commandStar {
+            display: flex;
+        }
+
+        .o_Message_commands {
+            display: flex;
+        }
+    }
+}
+
+.o_Message_authorName {
+    font-weight: bold;
+}
+
+.o_Message_authorRedirect {
+    cursor: pointer;
+}
+
+.o_Message_command {
+    cursor: pointer;
+    color: gray('400');
+
+    &:not(.o-mobile) {
+        &:hover {
+            filter: brightness(0.8);
+        }
+    }
+
+    &.o-mobile {
+        filter: brightness(0.8);
+
+        &:hover {
+            filter: brightness(0.75);
+        }
+    }
+
+    &.o-message-selected {
+        color: gray('500');
+    }
+}
+
+.o_Message_commandStar {
+
+    &.o-message-starred {
+        color: gold;
+
+        &:hover {
+            filter: brightness(0.9);
+        }
+    }
+}
+
+.o_Message_content .o_mention {
+    color: $o-brand-primary;
+    cursor: pointer;
+
+    &:hover {
+        color: darken($o-brand-primary, 15%);
+    }
+}
+
+.o_Message_date {
+    color: gray('500');
+
+    &.o-message-selected {
+        color: gray('600');
+    }
+}
+
+.o_Message_headerCommands:not(.o-mobile) {
+    opacity: 0;
+}
+
+.o_Message_originThread {
+    font-size: 0.8em;
+    color: gray('500');
+
+    &.o-message-selected {
+        color: gray('600');
+    }
+}
+
+.o_Message_originThreadLink {
+    font-size: 1.25em; // original size
+}
+
+.o_Message_partnerImStatusIcon:not(.o_Message_partnerImStatusIcon-mobile) {
+    font-size: x-small;
+}
+
+.o_Message_moderationAction {
+    font-weight: bold;
+    font-style: italic;
+
+    &.o-accept,
+    &.o-allow {
+        color: $o-mail-moderation-accept-color;
+        @include hover-focus {
+            color: darken($o-mail-moderation-accept-color, $emphasized-link-hover-darken-percentage);
+        }
+    }
+
+    &.o-ban,
+    &.o-discard,
+    &.o-reject {
+        color: $o-mail-moderation-reject-color;
+        @include hover-focus {
+            color: darken($o-mail-moderation-reject-color, $emphasized-link-hover-darken-percentage);
+        }
+    }
+}
+
+.o_Message_moderationPending {
+    font-style: italic;
+
+    &.o-author {
+        color: theme-color('danger');
+        font-weight: bold;
+    }
+}
+
+.o_Message_notificationIconClickable {
+    color: gray('600');
+    cursor: pointer;
+
+    &.o-error {
+        color: $red;
+    }
+}
+
+.o_Message_sidebarCommands {
+    display: none;
+}
+
+.o_Message_sidebarItem.o-message-squashed {
+    display: none;
+}
+
+.o_Message_subject {
+    font-style: italic;
+}
+
+// Used to hide buttons on rating emails in chatter
+// FIXME: should use a better approach for not having such buttons
+// in chatter of such messages, but keep having them in emails.
+.o_Message_content [summary~="o_mail_notification"] {
+    display: none;
+}