342 lines
11 KiB
SCSS
342 lines
11 KiB
SCSS
// Fusion Chatter Enhance - Styles
|
|
// Copyright 2024-2026 Nexa Systems Inc.
|
|
// License OPL-1
|
|
//
|
|
// NOTE: The chatter/form flex percentages are NOT set here.
|
|
// They are injected by chatter_panel.js as a <style> tag in <head>
|
|
// from localStorage, so the correct width is applied BEFORE first paint.
|
|
|
|
// =============================================================================
|
|
// FORM LAYOUT FOUNDATION (flex row, no-wrap) -- percentages come from JS
|
|
// =============================================================================
|
|
|
|
@media (min-width: 992px) {
|
|
.o_action_manager > .o_action > .o_form_view .o_form_renderer:not(.fce-chatter-bottom) {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
|
|
> .o_form_sheet_bg {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
min-width: 200px !important;
|
|
max-width: 50% !important;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.o_action_manager .o_form_sheet_bg {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.o_action_manager .o_form_sheet {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// CHATTER BOTTOM LAYOUT (per-user preference)
|
|
// High specificity to override Odoo's flex layout.
|
|
// =============================================================================
|
|
|
|
.o_action_manager .o_form_view .o_form_renderer.fce-chatter-bottom {
|
|
display: block !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: wrap !important;
|
|
|
|
> .o_form_sheet_bg {
|
|
flex: none !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
flex: none !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
> .fce-resize-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// CHATTER HIDDEN STATE
|
|
// =============================================================================
|
|
|
|
.fce-chatter-hidden {
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
display: none !important;
|
|
}
|
|
|
|
> .o_form_sheet_bg {
|
|
flex: 1 1 100% !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// RESIZE HANDLE
|
|
// Idle: subtle dotted line so users know where to grab.
|
|
// Hover: dots merge into a solid line with a glow pulse.
|
|
// Dragging: bold solid accent bar.
|
|
// =============================================================================
|
|
|
|
.fce-resize-handle {
|
|
width: 7px;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
position: relative;
|
|
z-index: 10;
|
|
flex-shrink: 0;
|
|
align-self: stretch;
|
|
|
|
// --- idle dotted line (always visible) ---
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 10%;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
border: none;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--o-border-color, #ced4da) 0px,
|
|
var(--o-border-color, #ced4da) 3px,
|
|
transparent 3px,
|
|
transparent 8px
|
|
);
|
|
opacity: 0.45;
|
|
border-radius: 1px;
|
|
transition: opacity 0.3s ease, background-image 0.3s ease, width 0.25s ease,
|
|
box-shadow 0.3s ease, top 0.3s ease, bottom 0.3s ease;
|
|
}
|
|
|
|
// --- hover grip dots (centered cluster) ---
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 5px;
|
|
height: 28px;
|
|
opacity: 0;
|
|
border-radius: 3px;
|
|
background-image: radial-gradient(
|
|
circle,
|
|
var(--o-border-color, #adb5bd) 1.2px,
|
|
transparent 1.2px
|
|
);
|
|
background-size: 5px 7px;
|
|
background-repeat: repeat-y;
|
|
background-position: center;
|
|
transition: opacity 0.25s ease, height 0.3s ease, transform 0.25s ease;
|
|
}
|
|
|
|
// --- HOVER STATE ---
|
|
&:hover {
|
|
&::before {
|
|
opacity: 0.85;
|
|
width: 2px;
|
|
top: 4%;
|
|
bottom: 4%;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--o-action, #0077b6) 0px,
|
|
var(--o-action, #0077b6) 3px,
|
|
transparent 3px,
|
|
transparent 8px
|
|
);
|
|
box-shadow: 0 0 6px rgba(0, 119, 182, 0.2);
|
|
}
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
// --- DRAGGING STATE ---
|
|
&.fce-dragging {
|
|
&::before {
|
|
opacity: 1;
|
|
width: 3px;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-image: none;
|
|
background-color: var(--o-action, #0077b6);
|
|
box-shadow: 0 0 10px rgba(0, 119, 182, 0.35);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// TOGGLE BUTTON
|
|
// =============================================================================
|
|
|
|
.fce-toggle-btn {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: -14px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--o-border-color, #dee2e6);
|
|
background: var(--o-bg-card, #fff);
|
|
color: var(--o-text-muted, #6c757d);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, background-color 0.15s ease, color 0.15s ease;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
font-size: 12px;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
background: var(--o-action, #0077b6);
|
|
color: #fff;
|
|
border-color: var(--o-action, #0077b6);
|
|
}
|
|
}
|
|
|
|
.o-mail-ChatterContainer:hover .fce-toggle-btn,
|
|
.o-mail-Form-chatter:hover .fce-toggle-btn,
|
|
.o-aside:hover .fce-toggle-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fce-expand-btn {
|
|
position: fixed;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 28px;
|
|
height: 56px;
|
|
border-radius: 6px 0 0 6px;
|
|
border: 1px solid var(--o-border-color, #dee2e6);
|
|
border-right: none;
|
|
background: var(--o-bg-card, #fff);
|
|
color: var(--o-text-muted, #6c757d);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
|
|
font-size: 14px;
|
|
padding: 0;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
&:hover {
|
|
background: var(--o-action, #0077b6);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// COMPACT CHATTER CONTENT
|
|
// =============================================================================
|
|
|
|
.o-mail-Thread .o-mail-Message {
|
|
padding: 6px 10px !important;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.o-mail-Activity {
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
// =============================================================================
|
|
// ICON-ONLY TOPBAR BUTTONS
|
|
// =============================================================================
|
|
|
|
.o-mail-Chatter-topbar {
|
|
gap: 4px;
|
|
|
|
.o-mail-Chatter-sendMessage {
|
|
font-size: 0 !important;
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f0e0";
|
|
}
|
|
}
|
|
|
|
.o-mail-Chatter-logNote {
|
|
font-size: 0 !important;
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f044";
|
|
}
|
|
}
|
|
|
|
button[data-hotkey="shift+w"] {
|
|
> span { display: none !important; }
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 17px;
|
|
height: 17px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
background-color: currentColor;
|
|
}
|
|
}
|
|
|
|
.o-mail-Chatter-activity {
|
|
> span { display: none !important; }
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f073";
|
|
}
|
|
}
|
|
}
|