admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
gsinghpal
2026-03-14 12:04:20 -04:00
parent fc3c966484
commit e9cf75ee48
75 changed files with 6991 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
fusion_chatter_enhance/static/src/scss/chatter_enhance.scss Normal file
View File

@@ -0,0 +1,341 @@
// 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";
}
}
}