summaryrefslogtreecommitdiff
path: root/web_responsive/static/src
diff options
context:
space:
mode:
Diffstat (limited to 'web_responsive/static/src')
-rw-r--r--web_responsive/static/src/css/kanban_view_mobile.scss97
-rw-r--r--web_responsive/static/src/css/search_view_mobile.scss109
-rw-r--r--web_responsive/static/src/css/web_responsive.scss933
-rw-r--r--web_responsive/static/src/img/home-menu-bg-overlay.svg5
-rw-r--r--web_responsive/static/src/js/kanban_renderer_mobile.js525
-rw-r--r--web_responsive/static/src/js/web_responsive.js629
-rw-r--r--web_responsive/static/src/xml/apps.xml69
-rw-r--r--web_responsive/static/src/xml/attachment_viewer.xml47
-rw-r--r--web_responsive/static/src/xml/control_panel.xml146
-rw-r--r--web_responsive/static/src/xml/discuss.xml16
-rw-r--r--web_responsive/static/src/xml/form_buttons.xml110
-rw-r--r--web_responsive/static/src/xml/menu.xml11
-rw-r--r--web_responsive/static/src/xml/navbar.xml17
-rw-r--r--web_responsive/static/src/xml/search_panel.xml53
14 files changed, 2767 insertions, 0 deletions
diff --git a/web_responsive/static/src/css/kanban_view_mobile.scss b/web_responsive/static/src/css/kanban_view_mobile.scss
new file mode 100644
index 0000000..76d86d0
--- /dev/null
+++ b/web_responsive/static/src/css/kanban_view_mobile.scss
@@ -0,0 +1,97 @@
+@include media-breakpoint-down(sm) {
+ .o_kanban_view.o_kanban_grouped {
+ display: block;
+ position: relative;
+ overflow-x: hidden;
+ &.o_renderer_with_searchpanel {
+ width: 100%;
+ }
+
+ .o_kanban_mobile_tabs_container {
+ position: sticky;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ top: 0;
+ z-index: 1;
+ background-color: #5e5e5e;
+
+ .o_kanban_mobile_add_column {
+ height: $o-kanban-mobile-tabs-height;
+ padding: 10px;
+ border-left: grey 1px solid;
+ color: white;
+ font-size: 14px;
+ }
+
+ .o_kanban_mobile_tabs {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: $o-kanban-mobile-tabs-height;
+ overflow-x: auto;
+
+ .o_kanban_mobile_tab {
+ height: $o-kanban-mobile-tabs-height;
+ padding: 10px 20px;
+ font-size: 14px;
+ color: white;
+
+ &.o_current {
+ font-weight: bold;
+ border-bottom: 3px solid $o-brand-primary;
+ }
+
+ .o_column_title {
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+ }
+ }
+ }
+ .o_kanban_columns_content {
+ position: relative;
+ }
+ // [class] to get same specificity as elsewhere (kanban_view.less)
+ &[class] .o_kanban_group:not(.o_column_folded) {
+ @include o-position-absolute(
+ $top: $o-kanban-mobile-tabs-height,
+ $left: 0,
+ $bottom: 0
+ );
+ width: 100%;
+ padding: 0;
+ margin-left: 0; // override the margin-left: -1px of the desktop mode
+ border: none;
+
+ &.o_current {
+ position: inherit;
+ top: 0;
+
+ &.o_kanban_no_records {
+ // set a default height for clarity when embedded in another view
+ min-height: $o-kanban-mobile-empty-height;
+ }
+ }
+
+ .o_kanban_header {
+ display: none;
+ }
+ .o_kanban_record,
+ .o_kanban_quick_create {
+ border: none;
+ border-bottom: 1px solid lightgray;
+ padding: 10px 16px;
+ margin: 0;
+ }
+ }
+ }
+ .o_kanban_view .o_column_quick_create {
+ .o_quick_create_folded {
+ display: none !important;
+ }
+ .o_quick_create_unfolded {
+ width: 100%;
+ }
+ }
+}
diff --git a/web_responsive/static/src/css/search_view_mobile.scss b/web_responsive/static/src/css/search_view_mobile.scss
new file mode 100644
index 0000000..06762e4
--- /dev/null
+++ b/web_responsive/static/src/css/search_view_mobile.scss
@@ -0,0 +1,109 @@
+.o_web_client {
+ .o_mobile_search {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ padding: 0;
+ width: 100%;
+ background-color: white;
+ z-index: $zindex-modal;
+ overflow: auto;
+ .o_mobile_search_header {
+ height: 46px;
+ margin-bottom: 10px;
+ width: 100%;
+ background-color: $o-brand-odoo;
+ color: white;
+ span:active {
+ background-color: darken($o-brand-primary, 10%);
+ }
+ span {
+ cursor: pointer;
+ }
+ }
+ .o_searchview_input_container {
+ display: flex;
+ padding: 15px 20px 0 20px;
+ position: relative;
+ .o_searchview_input {
+ width: 100%;
+ margin-bottom: 15px;
+ border-bottom: 1px solid $o-brand-secondary;
+ }
+ .o_searchview_facet {
+ border-radius: 10px;
+ display: inline-flex;
+ order: 1;
+ .o_searchview_facet_label {
+ border-radius: 2em 0em 0em 2em;
+ }
+ }
+ .o_searchview_autocomplete {
+ top: 100%;
+ > li {
+ margin: 5px 0px;
+ }
+ }
+ }
+ .o_mobile_search_filter {
+ padding-bottom: 15%;
+ .o_dropdown {
+ width: 100%;
+ margin: 15px 5px 0px 5px;
+ border: solid 1px darken(gray("200"), 20%);
+ }
+ .o_dropdown_toggler_btn {
+ width: 100%;
+ text-align: left;
+
+ &:after {
+ display: none;
+ }
+ }
+
+ // We disable the backdrop in this case because it prevents any
+ // interaction outside of a dropdown while it is open.
+ .dropdown-backdrop {
+ z-index: -1;
+ }
+ .dropdown-menu {
+ // Here we use !important because of popper js adding custom style
+ // to element so to override it use !important
+ position: relative !important;
+ width: 100% !important;
+ transform: translate3d(0, 0, 0) !important;
+ box-shadow: none;
+ border: none;
+ color: gray("600");
+ .divider {
+ margin: 0px;
+ }
+ > li > a {
+ padding: 10px 26px;
+ }
+ }
+ }
+ .o_mobile_search_show_result {
+ padding: 10px;
+ font-size: 15px;
+ }
+ }
+}
+// Search panel
+@include media-breakpoint-down(sm) {
+ .o_controller_with_searchpanel {
+ display: block;
+ .o_search_panel {
+ height: auto;
+ padding: 8px;
+ border-left: 1px solid $gray-300;
+ section {
+ padding: 0px 16px;
+ }
+ }
+ .o_search_panel_summary {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss
new file mode 100644
index 0000000..e1867b8
--- /dev/null
+++ b/web_responsive/static/src/css/web_responsive.scss
@@ -0,0 +1,933 @@
+/* Copyright 2018 Tecnativa - Jairo Llopis
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+$chatter_zone_width: 35%;
+
+@mixin full-screen-dropdown {
+ border: none;
+ box-shadow: none;
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - #{$o-navbar-height});
+ position: fixed;
+ margin: 0;
+ width: 100vw;
+ z-index: 100;
+ // Inline style will override our `top`, so we need !important here
+ top: $o-navbar-height !important;
+ transform: none !important;
+}
+
+// Support for long titles
+@include media-breakpoint-up(md) {
+ .o_form_view .oe_button_box + .oe_title,
+ .o_form_view .oe_button_box + .oe_avatar + .oe_title {
+ /* Button-box has a hardcoded width of 132px per button and have three columns */
+ width: calc(100% - 450px);
+ }
+}
+
+// Main navbar (with apps menu, user menu, debug menu...)
+@include media-breakpoint-down(sm) {
+ .o_main_navbar {
+ // This allows to have a sane layout for mobiles
+ display: flex;
+
+ // Remove clutter to only have small icons that fit in a small screen
+ > .dropdown {
+ display: flex;
+
+ .navbar-toggler {
+ color: gray("white");
+ }
+
+ .o_menu_sections,
+ .o_menu_systray {
+ padding: 0;
+ }
+ }
+
+ // Whitespace before systray icons
+ .o_menu_systray {
+ margin-left: auto;
+ }
+
+ // Hide big things
+ .o_menu_brand,
+ .o_menu_sections,
+ .oe_topbar_name {
+ display: none;
+ }
+
+ // Fix toggler button padding
+ .o-menu-toggle {
+ cursor: pointer;
+ padding: 0 $o-horizontal-padding;
+ }
+
+ // Custom fullscreen layout when showing submenus
+ .o_menu_sections.show {
+ @include full-screen-dropdown();
+ background-color: $dropdown-bg;
+ overflow: auto;
+
+ .show {
+ display: flex;
+ flex-direction: column;
+
+ .dropdown-menu {
+ margin-left: 1rem;
+ min-width: auto;
+ width: calc(100vw - 2rem);
+ }
+ }
+
+ > li,
+ .o_menu_entry_lvl_1,
+ .o_menu_header_lvl_1 {
+ // Homogeneous background color
+ background-color: $dropdown-bg;
+ color: $dropdown-link-color;
+
+ &:hover {
+ background-color: $dropdown-link-hover-bg;
+ color: $dropdown-link-hover-color;
+ }
+
+ // Disable the .o-no-caret class effect, to display the caret
+ &.o-no-caret::after {
+ content: "";
+ }
+
+ // Fix a strange glitch leaving headers invisible
+ .dropdown-header {
+ color: $dropdown-header-color;
+ }
+ }
+ }
+
+ // Custom fullscreen layout for systray items
+ .o_mail_systray_dropdown.show {
+ @include full-screen-dropdown();
+
+ // Fix stretchy images
+ .o_mail_preview_image {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+
+ img {
+ display: block;
+ height: auto;
+ }
+ }
+ }
+
+ // Higher height for dropdown items, for those with sausage fingers
+ .dropdown-menu .dropdown-item {
+ padding: {
+ bottom: 0.5rem;
+ top: 0.5rem;
+ }
+ }
+ }
+}
+.o_main_navbar {
+ color: color-yiq($o-brand-odoo);
+
+ > ul > li > a,
+ > ul > li > label {
+ color: color-yiq($o-brand-odoo);
+ }
+ .dropdown-menu.show {
+ max-height: calc(100vh - #{$o-navbar-height});
+ }
+}
+// Iconized full screen apps menu
+.o_menu_apps {
+ user-select: none;
+
+ a.full {
+ width: $o-navbar-height;
+ text-align: center;
+ }
+
+ .dropdown-menu.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .dropdown-menu {
+ @include full-screen-dropdown();
+
+ opacity: 0;
+ visibility: hidden;
+ transition: visibility 100ms ease, opacity 100ms ease;
+ background: url("../img/home-menu-bg-overlay.svg"),
+ linear-gradient(
+ to bottom,
+ $o-brand-odoo,
+ desaturate(lighten($o-brand-odoo, 20%), 15)
+ );
+ background-size: cover;
+ border-radius: 0;
+ // Display apps in a grid
+ align-content: flex-start;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ @include media-breakpoint-up(lg) {
+ padding: {
+ left: calc((100vw - 850px) / 2);
+ right: calc((100vw - 850px) / 2);
+ }
+ }
+
+ .o_app {
+ align-items: center;
+ display: flex;
+ padding: 10px 0;
+ border-radius: 4px;
+ flex-direction: column;
+ justify-content: flex-start;
+ background: none;
+ transition: 300ms ease;
+ transition-property: background-color;
+ white-space: normal;
+ text-align: center;
+
+ img {
+ box-shadow: none;
+ transition: 300ms ease;
+ transition-property: box-shadow, transform;
+ }
+
+ &:focus {
+ background-color: rgba(gray("white"), 0.05);
+ }
+
+ // Size depends on screen
+ width: 33.33333333%;
+ @include media-breakpoint-up(sm) {
+ width: 25%;
+ }
+ @include media-breakpoint-up(md) {
+ width: 16.6666666%;
+ }
+ }
+
+ .o_app:hover img {
+ transform: translateY(-3px);
+ box-shadow: 0 9px 12px -4px rgba(gray("black"), 0.3);
+ }
+
+ // Hide app icons when searching
+ .has-results ~ .o_app {
+ display: none;
+ }
+
+ .o-app-icon {
+ height: auto;
+ max-width: 6rem;
+ }
+
+ .o-app-name {
+ color: gray("white");
+ margin-top: 4px;
+ font-size: 1.25rem;
+ text-shadow: 1px 1px 1px rgba(gray("black"), 0.4);
+ }
+ // Search input for menus
+ .form-row {
+ width: 100%;
+ }
+
+ .o-menu-search-result {
+ align-items: center;
+ background-position: left;
+ background-repeat: no-repeat;
+ background-size: contain;
+ cursor: pointer;
+ padding-left: 3rem;
+ white-space: normal;
+ }
+
+ .search-container {
+ padding-top: 1rem;
+ padding-bottom: 1.5rem;
+
+ .search-input {
+ margin-bottom: 0 !important;
+ padding: 0;
+
+ .input-group {
+ box-shadow: inset 0 1px 0 rgba(gray("white"), 0.1),
+ 0 1px 0 rgba(gray("black"), 0.1);
+ text-shadow: 0 1px 0 rgba(gray("black"), 0.5);
+ border-radius: 4px;
+ padding: 0.4rem 0.8rem;
+ background-color: rgba(gray("white"), 0.1);
+
+ @include media-breakpoint-up(md) {
+ padding: 0.8rem 1.2rem;
+ }
+
+ .input-group-prepend {
+ span.fa {
+ color: gray("white");
+ font-size: 1.5rem;
+ margin-right: 1rem;
+ padding-top: 1px;
+ }
+ }
+
+ .form-control {
+ height: 2rem;
+ background: none;
+ border: none;
+ color: gray("white");
+ display: block;
+ padding: 1px 2px 2px 2px;
+ box-shadow: none;
+
+ &::placeholder {
+ color: gray("white");
+ opacity: 0.5;
+ }
+ }
+ }
+ }
+ }
+ // Allow to scroll only on results, keeping static search box above
+ .search-container.has-results {
+ height: 100%;
+ .search-results {
+ max-height: calc(100vh - 47px - 6em);
+ overflow-y: hidden;
+ overflow-x: scroll;
+ overflow: auto;
+ background: url("../img/home-menu-bg-overlay.svg"),
+ linear-gradient(to bottom, gray("200"), gray("white"));
+ background-position: center;
+ background-size: cover;
+ }
+ }
+ }
+}
+
+// Scroll all but top bar
+html .o_web_client .o_action_manager .o_action {
+ @include media-breakpoint-down(sm) {
+ overflow: auto;
+
+ .o_content {
+ overflow: visible;
+ }
+ }
+
+ max-width: 100%;
+}
+
+// Make enough space for search panel filters buttons
+.o_control_panel {
+ // There is no media breakpoint for XL upper bound
+ @include media-breakpoint-up(lg) {
+ @media (max-width: 1360px) {
+ .o_cp_top_left,
+ .o_cp_bottom_left {
+ width: 40%;
+ }
+ .o_cp_top_right,
+ .o_cp_bottom_right {
+ width: 60%;
+ }
+ }
+ }
+ // For FULL HD devices
+ @media (min-width: 1900px) {
+ .o_cp_top_left,
+ .o_cp_bottom_left {
+ width: 60%;
+ }
+ .o_cp_top_right,
+ .o_cp_bottom_right {
+ width: 40%;
+ }
+ }
+ @include media-breakpoint-only(md) {
+ .o_search_options_hide_labels .o_dropdown_title {
+ display: none;
+ }
+ }
+ .o_cp_bottom_right {
+ height: 30px;
+ }
+}
+
+// Mobile Control panel (breadcrumbs, search box, buttons...)
+@include media-breakpoint-down(sm) {
+ .o_control_panel {
+ // Avoid horizontal scrolling of control panel.
+ // It doesn't work on iOS Safari, but it looks similar as
+ // without this patch. With this patch it looks better for
+ // other browsers.
+ position: sticky;
+ left: 0;
+ z-index: 3;
+
+ // Arrange buttons to use space better
+ .o_cp_top_left,
+ .o_cp_top_right {
+ flex: 1 1 100%;
+ }
+
+ .o_cp_top_left {
+ flex-basis: 80%;
+ }
+
+ .o_cp_top_right {
+ flex-basis: 20%;
+ }
+
+ .o_cp_bottom {
+ position: relative; // Necessary for dropdown menu positioning
+ display: block;
+ margin: 0;
+ }
+
+ .o_cp_bottom_left {
+ float: left;
+ margin: 5px 0;
+ }
+
+ .o_cp_bottom_right {
+ float: right;
+ height: 30px;
+ padding-left: 10px;
+ margin: 5px 0;
+ }
+
+ .o_cp_bottom_right,
+ .o_cp_pager {
+ white-space: nowrap;
+ }
+ .o_cp_pager {
+ margin-bottom: 0;
+ }
+
+ .o_cp_bottom_left > .o_cp_action_menus {
+ padding-right: 0;
+ .o_dropdown_title,
+ .fa-chevron-right,
+ .fa-chevron-down {
+ display: none;
+ }
+ .o_dropdown_toggler_btn {
+ margin: 0px 2px;
+ }
+ @include media-breakpoint-down(xs) {
+ .o_dropdown {
+ position: static;
+ }
+ .dropdown-menu {
+ right: 0;
+ left: 0;
+ top: 35px;
+ }
+ }
+ }
+
+ // Hide all but 2 last breadcrumbs, and render 2nd-to-last as arrow
+ .breadcrumb-item {
+ &:not(.active) {
+ padding-left: 0;
+ }
+
+ &::before {
+ content: none;
+ padding-right: 0;
+ }
+
+ &:nth-last-of-type(1n + 3) {
+ display: none;
+ }
+
+ &:nth-last-of-type(2) {
+ &::before {
+ color: var(--primary);
+ content: "\f060"; // .fa-arrow-left
+ cursor: pointer;
+ font-family: FontAwesome;
+ }
+
+ a {
+ display: none;
+ }
+ }
+ }
+
+ // Ellipsize long breadcrumbs
+ .breadcrumb {
+ max-width: 100%;
+ text-overflow: ellipsis;
+ }
+
+ // In case you install `mail`, there is a mess on BS vs inline styles
+ // we need to fix
+ .o_cp_buttons .btn.d-block:not(.d-none) {
+ display: inline-block !important;
+ }
+
+ .o_searchview {
+ padding: 1px 0px 3px 0px;
+ &.o_searchview_mobile {
+ cursor: pointer;
+ }
+ &.o_searchview_quick {
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ .o_searchview_input_container {
+ flex: 1 1 auto;
+ }
+ }
+ }
+ }
+ .o_calendar_view .o_calendar_widget {
+ .fc-timeGridDay-view .fc-axis,
+ .fc-timeGridWeek-view .fc-axis {
+ padding-left: 0px;
+ }
+ .fc-dayGridMonth-view {
+ padding-left: 0px;
+ .fc-week-number {
+ display: none;
+ }
+ }
+ .fc-dayGridYear-view {
+ padding-left: 0px;
+ > .fc-month-container > .fc-month {
+ width: 100%;
+ }
+ }
+ .fc-timeGridDay-view .fc-widget-header {
+ margin: 0 4px;
+ }
+ .fc-timeGridWeek-view .fc-widget-header {
+ word-spacing: 4em;
+ white-space: normal;
+ text-align: center;
+ }
+ }
+ .o_base_settings .o_setting_container {
+ display: block;
+ .settings_tab {
+ flex-flow: row nowrap;
+ padding-top: 0px;
+ .tab {
+ padding-right: 16px;
+ }
+ .selected {
+ background-color: #212529;
+ box-shadow: inset 0 -5px #7c7bad;
+ }
+ }
+ }
+}
+
+// Normal views
+.o_content,
+.modal-content {
+ max-width: 100%;
+
+ // Form views
+ .o_form_view {
+ .o_form_sheet {
+ max-width: calc(100% - 32px);
+ overflow-x: auto;
+ }
+
+ .o_FormRenderer_chatterContainer {
+ padding-top: 0;
+ .o_Activity_info {
+ flex-wrap: wrap;
+ }
+ .o_ActivityBox_title {
+ margin-bottom: 0;
+ }
+ .o_MessageList_separatorDate {
+ padding-bottom: 0;
+ }
+ }
+ // Sided chatter scrolling behavior
+ .o_Chatter {
+ height: fit-content;
+ .o_Chatter_fixedPanel {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background-color: white;
+ padding-bottom: 10px;
+ }
+ .o_Chatter_scrollPanel {
+ overflow: initial;
+ }
+ }
+
+ // Sticky statusbar
+ .o_form_statusbar {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ }
+
+ // Support for long title (with ellipsis)
+ .oe_title {
+ span.o_field_widget:not(.oe_inline) {
+ max-width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ width: initial;
+ &:active {
+ white-space: normal;
+ }
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ min-width: auto;
+
+ // More buttons border
+ .oe_button_box {
+ .o_dropdown_more {
+ button:last-child {
+ border-right: 1px solid gray("400");
+ }
+ }
+ }
+
+ // Avoid overflow on forms with title and/or button box
+ .oe_title {
+ max-width: 100%;
+ }
+
+ .oe_button_box + .oe_title,
+ .oe_button_box + .oe_avatar + .oe_title {
+ width: 100%;
+ }
+
+ // Avoid overflow on modals
+ .o_form_sheet {
+ min-width: auto;
+ }
+
+ // Render website inputs properly in phones
+ .o_group .o_field_widget.o_text_overflow {
+ // Overrides another !important
+ width: auto !important;
+ }
+
+ // Make all input groups vertical
+ .o_group_col_6 {
+ width: 100%;
+ }
+
+ // Statusbar buttons dropdown for mobiles
+ .o_statusbar_buttons_dropdown {
+ border: {
+ bottom: 0;
+ radius: 0;
+ top: 0;
+ }
+ height: 100%;
+ }
+ .o_statusbar_buttons.dropdown-menu > .btn {
+ border-radius: 0;
+ border: 0;
+ width: 100%;
+ margin-bottom: 0.2rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .o_statusbar_status {
+ // Arrow from rightmost button exceeds allowed width
+ .o_arrow_button:first-child::before {
+ content: none;
+ display: none;
+ }
+ }
+
+ // Full width in form sheets
+ .o_form_sheet,
+ .o_FormRenderer_chatterContainer {
+ min-width: auto;
+ max-width: 98%;
+ }
+
+ // Settings pages
+ .app_settings_block {
+ .row {
+ margin: 0;
+ }
+ }
+
+ .o_FormRenderer_chatterContainer {
+ padding-top: initial;
+
+ // Display send button on small screens
+ .o_thread_composer {
+ padding-left: $o-mail-thread-avatar-size * 0.5;
+
+ .o_composer_button_send {
+ display: initial !important; // Forced in core
+ }
+ .o_chatter_avatar {
+ display: none;
+ }
+ }
+
+ .o_chatter_topbar {
+ > .o_topbar_right_area {
+ flex: 1 0 auto;
+ flex-wrap: wrap;
+ max-width: 100%;
+
+ // Display followers on small screens
+ .o_followers {
+ display: initial !important; // Forced in core
+
+ @include media-breakpoint-down(xs) {
+ padding-bottom: 50px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ //No content message improvements on mobile
+ @include media-breakpoint-down(md) {
+ .o_view_nocontent {
+ top: 80px;
+ }
+ .o_nocontent_help {
+ box-shadow: none;
+ }
+ .o_sample_data_disabled {
+ display: none;
+ }
+ }
+
+ // Sided chatter, if user wants
+ .o_chatter_position_sided & {
+ @include media-breakpoint-up(lg) {
+ .o_form_view:not(.o_form_nosheet) {
+ display: flex;
+ flex-flow: row nowrap;
+ height: 100%;
+
+ .o_form_sheet_bg {
+ flex: 1 1 auto;
+ overflow: auto;
+
+ > .o_form_sheet {
+ min-width: unset;
+ }
+ }
+
+ .o_FormRenderer_chatterContainer {
+ border-left: 1px solid gray("400");
+ flex: 0 0 $chatter_zone_width;
+ max-width: initial;
+ min-width: initial;
+ overflow: auto;
+
+ .o_chatter_header_container {
+ padding-top: $grid-gutter-width * 0.5;
+ top: 0;
+ position: sticky;
+ background-color: $o-view-background-color;
+ z-index: 1;
+
+ // Scrollable input text to avoid hide conversation & buttons
+ .o_composer_text_field {
+ max-height: 120px;
+ overflow-y: auto !important; /* Forced because Odoo uses inline style */
+ }
+ .o_attachments_list {
+ overflow: auto;
+ max-height: $o-mail-attachment-image-size * 3;
+ margin-top: 0.4em;
+ }
+ .o_attachments_previews {
+ overflow: auto;
+ max-height: $o-mail-attachment-image-size * 6;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+// Sticky Header & Footer in List View
+.o_list_view {
+ .table-responsive {
+ .o_list_table {
+ // th & td are here for compatibility with chrome
+ thead tr:nth-child(1) th {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ }
+ thead tr:nth-child(1) th {
+ background-color: $o-list-footer-bg-color;
+ }
+ tfoot,
+ tfoot tr:nth-child(1) td {
+ position: sticky;
+ bottom: 0;
+ }
+ tfoot tr:nth-child(1) td {
+ background-color: $o-list-footer-bg-color;
+ }
+ }
+ }
+}
+
+// Big checkboxes
+.o_list_view {
+ .custom-checkbox:not(.o_boolean_toggle) {
+ margin-right: 10px;
+
+ .custom-control-label {
+ top: -6px;
+
+ &::after {
+ width: 24px;
+ height: 24px;
+ }
+ &::before {
+ outline: none !important;
+ border: 1px solid #4c4c4c;
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+}
+
+// Waiting Cursor
+.oe_wait {
+ cursor: progress;
+}
+
+// Attachment Viewer
+.o_web_client.o_chatter_position_sided .o_Dialog_AttachmentViewer {
+ /* Show sided viewer on large screens */
+ @include media-breakpoint-up(lg) {
+ position: static;
+ .o_AttachmentViewer_main {
+ padding-bottom: 20px;
+ }
+ .o_AttachmentViewer {
+ // On-top of navbar
+ z-index: 10;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin-left: auto;
+ background-color: rgba(0, 0, 0, 0.7);
+
+ .o_AttachmentViewer_name {
+ display: contents;
+ }
+
+ width: $chatter_zone_width;
+ &.o_AttachmentViewer_maximized {
+ width: 100%;
+ }
+
+ /* Show/Hide control buttons (next, prev, etc..) */
+ &:hover .o_AttachmentViewer_buttonNavigation,
+ &:hover .o_AttachmentViewer_toolbar {
+ display: flex;
+ }
+ .o_AttachmentViewer_buttonNavigation,
+ .o_AttachmentViewer_toolbar {
+ display: none;
+ }
+ .o_AttachmentViewer_viewIframe {
+ width: 95%;
+ }
+ }
+ }
+ @include media-breakpoint-down(md) {
+ .o_AttachmentViewer_headerItemButtonMinimize,
+ .o_AttachmentViewer_headerItemButtonMaximize {
+ display: none;
+ }
+ }
+}
+/* Attachment Viewer Max/Min buttons only are useful in sided mode */
+.o_web_client:not(.o_chatter_position_sided) {
+ .o_AttachmentViewer_headerItemButtonMinimize,
+ .o_AttachmentViewer_headerItemButtonMaximize {
+ display: none;
+ }
+}
+
+.o_control_panel {
+ // Filter Menu
+ // Cut long filters names in the filters menu
+ .o_filter_menu {
+ .o_menu_item {
+ width: auto;
+ @include media-breakpoint-up(md) {
+ max-width: 250px;
+ }
+ a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ // Enable scroll on dropdowns
+ .o_cp_buttons .dropdown-menu {
+ max-height: 70vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ // Dropdown with buttons to switch the view type
+ .o_cp_switch_buttons.show {
+ .dropdown-menu {
+ align-content: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ padding: 0;
+
+ .btn {
+ border: {
+ bottom: 0;
+ radius: 0;
+ top: 0;
+ }
+ font-size: 1.3em;
+ }
+ }
+ }
+}
+
+// Shortcut table ui improvement
+.o_shortcut_table {
+ width: 100%;
+}
diff --git a/web_responsive/static/src/img/home-menu-bg-overlay.svg b/web_responsive/static/src/img/home-menu-bg-overlay.svg
new file mode 100644
index 0000000..b9fe251
--- /dev/null
+++ b/web_responsive/static/src/img/home-menu-bg-overlay.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1128" viewBox="0 0 2000 1128">
+ <polygon fill-opacity=".03" points="0 1077.844 392.627 778.443 1504.99 1127.745 0 1127.745"/>
+ <polygon fill-opacity=".02" points="392.216 778.443 283.294 0 0 0 0 666.504"/>
+ <polygon fill-opacity=".03" points="1000 0 2000 1009.98 2000 439.94 1749.817 0"/>
+</svg>
diff --git a/web_responsive/static/src/js/kanban_renderer_mobile.js b/web_responsive/static/src/js/kanban_renderer_mobile.js
new file mode 100644
index 0000000..c5f4364
--- /dev/null
+++ b/web_responsive/static/src/js/kanban_renderer_mobile.js
@@ -0,0 +1,525 @@
+odoo.define("web_responsive.KanbanRendererMobile", function (require) {
+ "use strict";
+
+ /**
+ * The purpose of this file is to improve the UX of grouped kanban views in
+ * mobile. It includes the KanbanRenderer (in mobile only) to only display one
+ * column full width, and enables the swipe to browse to the other columns.
+ * Moreover, records in columns are lazy-loaded.
+ */
+
+ var config = require("web.config");
+ var core = require("web.core");
+ var KanbanRenderer = require("web.KanbanRenderer");
+ var KanbanView = require("web.KanbanView");
+ var KanbanQuickCreate = require("web.kanban_column_quick_create");
+
+ var _t = core._t;
+ var qweb = core.qweb;
+
+ if (!config.device.isMobile) {
+ return;
+ }
+
+ KanbanQuickCreate.include({
+ init() {
+ this._super.apply(this, arguments);
+ this.isMobile = true;
+ },
+ /**
+ * KanbanRenderer will decide can we close quick create or not
+ * @private
+ * @override
+ */
+ _cancel: function () {
+ this.trigger_up("close_quick_create");
+ },
+ /**
+ * Clear input when showed
+ * @override
+ */
+ toggleFold: function () {
+ this._super.apply(this, arguments);
+ if (!this.folded) {
+ this.$input.val("");
+ }
+ },
+ });
+
+ KanbanView.include({
+ init() {
+ this._super.apply(this, arguments);
+ this.jsLibs.push("/web/static/lib/jquery.touchSwipe/jquery.touchSwipe.js");
+ },
+ });
+
+ KanbanRenderer.include({
+ custom_events: _.extend({}, KanbanRenderer.prototype.custom_events || {}, {
+ quick_create_column_created: "_onColumnAdded",
+ }),
+ events: _.extend({}, KanbanRenderer.prototype.events, {
+ "click .o_kanban_mobile_tab": "_onMobileTabClicked",
+ "click .o_kanban_mobile_add_column": "_onMobileQuickCreateClicked",
+ }),
+ ANIMATE: true, // Allows to disable animations for the tests
+ /**
+ * @override
+ */
+ init: function () {
+ this._super.apply(this, arguments);
+ this.activeColumnIndex = 0; // Index of the currently displayed column
+ this._scrollPosition = null;
+ },
+ /**
+ * As this renderer defines its own scrolling area (the column in grouped
+ * mode), we override this hook to restore the scroll position like it was
+ * when the renderer has been last detached.
+ *
+ * @override
+ */
+ on_attach_callback: function () {
+ if (
+ this._scrollPosition &&
+ this.state.groupedBy.length &&
+ this.widgets.length
+ ) {
+ var $column = this.widgets[this.activeColumnIndex].$el;
+ $column.scrollLeft(this._scrollPosition.left);
+ $column.scrollTop(this._scrollPosition.top);
+ }
+ this._computeTabPosition();
+ this._super.apply(this, arguments);
+ },
+ /**
+ * As this renderer defines its own scrolling area (the column in grouped
+ * mode), we override this hook to store the scroll position, so that we can
+ * restore it if the renderer is re-attached to the DOM later.
+ *
+ * @override
+ */
+ on_detach_callback: function () {
+ if (this.state.groupedBy.length && this.widgets.length) {
+ var $column = this.widgets[this.activeColumnIndex].$el;
+ this._scrollPosition = {
+ left: $column.scrollLeft(),
+ top: $column.scrollTop(),
+ };
+ } else {
+ this._scrollPosition = null;
+ }
+ this._super.apply(this, arguments);
+ },
+
+ // --------------------------------------------------------------------------
+ // Public
+ // --------------------------------------------------------------------------
+
+ /**
+ * Displays the quick create record in the active column
+ * override to open quick create record in current active column
+ *
+ * @override
+ * @returns {Promise}
+ */
+ addQuickCreate: function () {
+ if (this._canCreateColumn() && !this.quickCreate.folded) {
+ this._onMobileQuickCreateClicked();
+ }
+ return this.widgets[this.activeColumnIndex].addQuickCreate();
+ },
+
+ /**
+ * Overrides to restore the left property and the scrollTop on the updated
+ * column, and to enable the swipe handlers
+ *
+ * @override
+ */
+ updateColumn: function (localID) {
+ var index = _.findIndex(this.widgets, {db_id: localID});
+ var $column = this.widgets[index].$el;
+ var scrollTop = $column.scrollTop();
+ return (
+ this._super
+ .apply(this, arguments)
+ .then(() => this._layoutUpdate(false))
+ // Required when clicking on 'Load More'
+ .then(() => $column.scrollTop(scrollTop))
+ .then(() => this._enableSwipe())
+ );
+ },
+
+ // --------------------------------------------------------------------------
+ // Private
+ // --------------------------------------------------------------------------
+
+ /**
+ * Check if we use the quick create on mobile
+ * @returns {Boolean}
+ * @private
+ */
+ _canCreateColumn: function () {
+ return this.quickCreateEnabled && this.quickCreate && this.widgets.length;
+ },
+
+ /**
+ * Update the columns positions
+ *
+ * @private
+ * @param {Boolean} [animate=false] set to true to animate
+ */
+ _computeColumnPosition: function (animate) {
+ if (this.widgets.length) {
+ // Check rtl to compute correct css value
+ const rtl = _t.database.parameters.direction === "rtl";
+
+ // Display all o_kanban_group
+ this.$(".o_kanban_group").show();
+
+ const $columnAfter = this._toNode(
+ this.widgets.filter(
+ (widget, index) => index > this.activeColumnIndex
+ )
+ );
+ const promiseAfter = this._updateColumnCss(
+ $columnAfter,
+ rtl ? {right: "100%"} : {left: "100%"},
+ animate
+ );
+
+ const $columnBefore = this._toNode(
+ this.widgets.filter(
+ (widget, index) => index < this.activeColumnIndex
+ )
+ );
+ const promiseBefore = this._updateColumnCss(
+ $columnBefore,
+ rtl ? {right: "-100%"} : {left: "-100%"},
+ animate
+ );
+
+ const $columnCurrent = this._toNode(
+ this.widgets.filter(
+ (widget, index) => index === this.activeColumnIndex
+ )
+ );
+ const promiseCurrent = this._updateColumnCss(
+ $columnCurrent,
+ rtl ? {right: "0%"} : {left: "0%"},
+ animate
+ );
+
+ promiseAfter
+ .then(promiseBefore)
+ .then(promiseCurrent)
+ .then(() => {
+ $columnAfter.hide();
+ $columnBefore.hide();
+ });
+ }
+ },
+
+ /**
+ * Define the o_current class to the current selected kanban (column & tab)
+ *
+ * @private
+ */
+ _computeCurrentColumn: function () {
+ if (this.widgets.length) {
+ var column = this.widgets[this.activeColumnIndex];
+ if (!column) {
+ return;
+ }
+ var columnID = column.id || column.db_id;
+ this.$(
+ ".o_kanban_mobile_tab.o_current, .o_kanban_group.o_current"
+ ).removeClass("o_current");
+ this.$(
+ '.o_kanban_group[data-id="' +
+ columnID +
+ '"], ' +
+ '.o_kanban_mobile_tab[data-id="' +
+ columnID +
+ '"]'
+ ).addClass("o_current");
+ }
+ },
+
+ /**
+ * Update the tabs positions
+ *
+ * @private
+ */
+ _computeTabPosition: function () {
+ this._computeTabJustification();
+ this._computeTabScrollPosition();
+ },
+
+ /**
+ * Update the tabs positions
+ *
+ * @private
+ */
+ _computeTabScrollPosition: function () {
+ if (this.widgets.length) {
+ var lastItemIndex = this.widgets.length - 1;
+ var moveToIndex = this.activeColumnIndex;
+ var scrollToLeft = 0;
+ for (var i = 0; i < moveToIndex; i++) {
+ var columnWidth = this._getTabWidth(this.widgets[i]);
+ // Apply
+ if (moveToIndex !== lastItemIndex && i === moveToIndex - 1) {
+ var partialWidth = 0.75;
+ scrollToLeft += columnWidth * partialWidth;
+ } else {
+ scrollToLeft += columnWidth;
+ }
+ }
+ // Apply the scroll x on the tabs
+ // XXX in case of RTL, should we use scrollRight?
+ this.$(".o_kanban_mobile_tabs").scrollLeft(scrollToLeft);
+ }
+ },
+
+ /**
+ * Compute the justify content of the kanban tab headers
+ *
+ * @private
+ */
+ _computeTabJustification: function () {
+ if (this.widgets.length) {
+ var self = this;
+ // Use to compute the sum of the width of all tab
+ var widthChilds = this.widgets.reduce(function (total, column) {
+ return total + self._getTabWidth(column);
+ }, 0);
+ // Apply a space around between child if the parent length is higher then the sum of the child width
+ var $tabs = this.$(".o_kanban_mobile_tabs");
+ $tabs.toggleClass(
+ "justify-content-between",
+ $tabs.outerWidth() >= widthChilds
+ );
+ }
+ },
+
+ /**
+ * Enables swipe event on the current column
+ *
+ * @private
+ */
+ _enableSwipe: function () {
+ var self = this;
+ var step = _t.database.parameters.direction === "rtl" ? -1 : 1;
+ this.$el.swipe({
+ excludedElements: ".o_kanban_mobile_tabs",
+ swipeLeft: function () {
+ var moveToIndex = self.activeColumnIndex + step;
+ if (moveToIndex < self.widgets.length) {
+ self._moveToGroup(moveToIndex, self.ANIMATE);
+ }
+ },
+ swipeRight: function () {
+ var moveToIndex = self.activeColumnIndex - step;
+ if (moveToIndex > -1) {
+ self._moveToGroup(moveToIndex, self.ANIMATE);
+ }
+ },
+ });
+ },
+
+ /**
+ * Retrieve the outerWidth of a given widget column
+ *
+ * @param {KanbanColumn} column
+ * @returns {integer} outerWidth of the found column
+ * @private
+ */
+ _getTabWidth: function (column) {
+ var columnID = column.id || column.db_id;
+ return this.$(
+ '.o_kanban_mobile_tab[data-id="' + columnID + '"]'
+ ).outerWidth();
+ },
+
+ /**
+ * Update the kanban layout
+ *
+ * @private
+ * @param {Boolean} [animate=false] set to true to animate
+ */
+ _layoutUpdate: function (animate) {
+ this._computeCurrentColumn();
+ this._computeTabPosition();
+ this._computeColumnPosition(animate);
+ this._enableSwipe();
+ },
+
+ /**
+ * Moves to the given kanban column
+ *
+ * @private
+ * @param {integer} moveToIndex index of the column to move to
+ * @param {Boolean} [animate=false] set to true to animate
+ * @returns {Promise} resolved when the new current group has been loaded
+ * and displayed
+ */
+ _moveToGroup: function (moveToIndex, animate) {
+ if (this.widgets.length === 0) {
+ return Promise.resolve();
+ }
+ var self = this;
+ if (moveToIndex >= 0 && moveToIndex < this.widgets.length) {
+ this.activeColumnIndex = moveToIndex;
+ }
+ var column = this.widgets[this.activeColumnIndex];
+ this._enableSwipe();
+ if (!column.data.isOpen) {
+ this.trigger_up("column_toggle_fold", {
+ db_id: column.db_id,
+ onSuccess: () => self._layoutUpdate(animate),
+ });
+ } else {
+ this._layoutUpdate(animate);
+ }
+ return Promise.resolve();
+ },
+ /**
+ * @override
+ * @private
+ */
+ _renderExampleBackground: function () {
+ // Override to avoid display of example background
+ },
+ /**
+ * @override
+ * @private
+ */
+ _renderGrouped: function (fragment) {
+ var self = this;
+ var newFragment = document.createDocumentFragment();
+ this._super.apply(this, [newFragment]);
+ this.defs.push(
+ Promise.all(this.defs).then(function () {
+ var data = [];
+ _.each(self.state.data, function (group) {
+ if (!group.value) {
+ group = _.extend({}, group, {value: _t("Undefined")});
+ data.unshift(group);
+ } else {
+ data.push(group);
+ }
+ });
+
+ var kanbanColumnContainer = document.createElement("div");
+ kanbanColumnContainer.classList.add("o_kanban_columns_content");
+ kanbanColumnContainer.appendChild(newFragment);
+ fragment.appendChild(kanbanColumnContainer);
+ $(
+ qweb.render("KanbanView.MobileTabs", {
+ data: data,
+ quickCreateEnabled: self._canCreateColumn(),
+ })
+ ).prependTo(fragment);
+ })
+ );
+ },
+
+ /**
+ * @override
+ * @private
+ */
+ _renderView: function () {
+ var self = this;
+ return this._super.apply(this, arguments).then(function () {
+ if (self.state.groupedBy.length) {
+ // Force first column for kanban view, because the groupedBy can be changed
+ return self._moveToGroup(0);
+ }
+ if (self._canCreateColumn()) {
+ self._onMobileQuickCreateClicked();
+ }
+ return Promise.resolve();
+ });
+ },
+
+ /**
+ * Retrieve the Jquery node (.o_kanban_group) for a list of a given widgets
+ *
+ * @private
+ * @param widgets
+ * @returns {jQuery} the matching .o_kanban_group widgets
+ */
+ _toNode: function (widgets) {
+ const selectorCss = widgets
+ .map(
+ (widget) =>
+ '.o_kanban_group[data-id="' + (widget.id || widget.db_id) + '"]'
+ )
+ .join(", ");
+ return this.$(selectorCss);
+ },
+
+ /**
+ * Update the given column to the updated positions
+ *
+ * @private
+ * @param $column The jquery column
+ * @param cssProperties Use to update column
+ * @param {Boolean} [animate=false] set to true to animate
+ * @returns {Promise}
+ */
+ _updateColumnCss: function ($column, cssProperties, animate) {
+ if (animate) {
+ return new Promise((resolve) =>
+ $column.animate(cssProperties, "fast", resolve)
+ );
+ }
+ $column.css(cssProperties);
+ return Promise.resolve();
+ },
+
+ // --------------------------------------------------------------------------
+ // Handlers
+ // --------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ _onColumnAdded: function () {
+ this._computeTabPosition();
+ if (this._canCreateColumn() && !this.quickCreate.folded) {
+ this.quickCreate.toggleFold();
+ }
+ },
+
+ /**
+ * @private
+ */
+ _onMobileQuickCreateClicked: function (event) {
+ if (event) {
+ event.stopPropagation();
+ }
+ this.quickCreate.toggleFold();
+ this.$(".o_kanban_group").toggle(this.quickCreate.folded);
+ },
+ /**
+ * @private
+ * @param {MouseEvent} event
+ */
+ _onMobileTabClicked: function (event) {
+ if (this._canCreateColumn() && !this.quickCreate.folded) {
+ this.quickCreate.toggleFold();
+ }
+ this._moveToGroup($(event.currentTarget).index(), true);
+ },
+ /**
+ * @private
+ * @override
+ */
+ _onCloseQuickCreate: function () {
+ if (this.widgets.length && !this.quickCreate.folded) {
+ this.$(".o_kanban_group").toggle(true);
+ this.quickCreate.toggleFold();
+ }
+ },
+ });
+});
diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js
new file mode 100644
index 0000000..5151a30
--- /dev/null
+++ b/web_responsive/static/src/js/web_responsive.js
@@ -0,0 +1,629 @@
+/* Copyright 2018 Tecnativa - Jairo Llopis
+ * Copyright 2018 Tecnativa - Sergey Shebanin
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+odoo.define("web_responsive", function (require) {
+ "use strict";
+
+ const ActionManager = require("web.ActionManager");
+ const AbstractWebClient = require("web.AbstractWebClient");
+ const AppsMenu = require("web.AppsMenu");
+ const BasicController = require("web.BasicController");
+ const config = require("web.config");
+ const core = require("web.core");
+ const FormRenderer = require("web.FormRenderer");
+ const Menu = require("web.Menu");
+ const RelationalFields = require("web.relational_fields");
+ const ListRenderer = require("web.ListRenderer");
+ const CalendarRenderer = require("web.CalendarRenderer");
+ const patchMixin = require("web.patchMixin");
+ const AttachmentViewer = require("mail/static/src/components/attachment_viewer/attachment_viewer.js");
+ const PatchableAttachmentViewer = patchMixin(AttachmentViewer);
+ const ControlPanel = require("web.ControlPanel");
+ const SearchPanel = require("web/static/src/js/views/search_panel.js");
+ /* global owl */
+ const {QWeb, Context} = owl;
+ const {useState, useContext} = owl.hooks;
+
+ /* Hide AppDrawer in desktop and mobile modes.
+ * To avoid delays in pages with a lot of DOM nodes we make
+ * sub-groups' with 'querySelector' to improve the performance.
+ */
+ function closeAppDrawer() {
+ _.defer(function () {
+ // Need close AppDrawer?
+ var menu_apps_dropdown = document.querySelector(".o_menu_apps .dropdown");
+ $(menu_apps_dropdown)
+ .has(".dropdown-menu.show")
+ .find("> a")
+ .dropdown("toggle");
+ // Need close Sections Menu?
+ // TODO: Change to 'hide' in modern Bootstrap >4.1
+ var menu_sections = document.querySelector(
+ ".o_menu_sections li.show .dropdown-toggle"
+ );
+ $(menu_sections).dropdown("toggle");
+ // Need close Mobile?
+ var menu_sections_mobile = document.querySelector(".o_menu_sections.show");
+ $(menu_sections_mobile).collapse("hide");
+ });
+ }
+
+ /**
+ * Reduce menu data to a searchable format understandable by fuzzy.js
+ *
+ * `AppsMenu.init()` gets `menuData` in a format similar to this (only
+ * relevant data is shown):
+ *
+ * ```js
+ * {
+ * [...],
+ * children: [
+ * // This is a menu entry:
+ * {
+ * action: "ir.actions.client,94", // Or `false`
+ * children: [... similar to above "children" key],
+ * name: "Actions",
+ * parent_id: [146, "Settings/Technical/Actions"], // Or `false`
+ * },
+ * ...
+ * ]
+ * }
+ * ```
+ *
+ * This format is very hard to process to search matches, and it would
+ * slow down the search algorithm, so we reduce it with this method to be
+ * able to later implement a simpler search.
+ *
+ * @param {Object} memo
+ * Reference to current result object, passed on recursive calls.
+ *
+ * @param {Object} menu
+ * A menu entry, as described above.
+ *
+ * @returns {Object}
+ * Reduced object, without entries that have no action, and with a
+ * format like this:
+ *
+ * ```js
+ * {
+ * "Discuss": {Menu entry Object},
+ * "Settings": {Menu entry Object},
+ * "Settings/Technical/Actions/Actions": {Menu entry Object},
+ * ...
+ * }
+ * ```
+ */
+ function findNames(memo, menu) {
+ if (menu.action) {
+ var key = menu.parent_id ? menu.parent_id[1] + "/" : "";
+ memo[key + menu.name] = menu;
+ }
+ if (menu.children.length) {
+ _.reduce(menu.children, findNames, memo);
+ }
+ return memo;
+ }
+
+ AppsMenu.include({
+ events: _.extend(
+ {
+ "keydown .search-input input": "_searchResultsNavigate",
+ "input .search-input input": "_searchMenusSchedule",
+ "click .o-menu-search-result": "_searchResultChosen",
+ "shown.bs.dropdown": "_searchFocus",
+ "hidden.bs.dropdown": "_searchReset",
+ "hide.bs.dropdown": "_hideAppsMenu",
+ },
+ AppsMenu.prototype.events
+ ),
+
+ /**
+ * Rescue some menu data stripped out in original method.
+ *
+ * @override
+ */
+ init: function (parent, menuData) {
+ this._super.apply(this, arguments);
+ // Keep base64 icon for main menus
+ for (const n in this._apps) {
+ this._apps[n].web_icon_data = menuData.children[n].web_icon_data;
+ }
+ // Store menu data in a format searchable by fuzzy.js
+ this._searchableMenus = _.reduce(menuData.children, findNames, {});
+ // Search only after timeout, for fast typers
+ this._search_def = false;
+ },
+
+ /**
+ * @override
+ */
+ start: function () {
+ this.$search_container = this.$(".search-container");
+ this.$search_input = this.$(".search-input input");
+ this.$search_results = this.$(".search-results");
+ return this._super.apply(this, arguments);
+ },
+
+ /**
+ * Prevent the menu from being opened twice
+ *
+ * @override
+ */
+ _onAppsMenuItemClicked: function (ev) {
+ this._super.apply(this, arguments);
+ ev.preventDefault();
+ ev.stopPropagation();
+ },
+
+ /**
+ * Get all info for a given menu.
+ *
+ * @param {String} key
+ * Full path to requested menu.
+ *
+ * @returns {Object}
+ * Menu definition, plus extra needed keys.
+ */
+ _menuInfo: function (key) {
+ const original = this._searchableMenus[key];
+ return _.extend(
+ {
+ action_id: parseInt(original.action.split(",")[1], 10),
+ },
+ original
+ );
+ },
+
+ /**
+ * Autofocus on search field on big screens.
+ */
+ _searchFocus: function () {
+ if (!config.device.isMobile) {
+ // This timeout is necessary since the menu has a 100ms fading animation
+ setTimeout(() => this.$search_input.focus(), 100);
+ }
+ },
+
+ /**
+ * Reset search input and results
+ */
+ _searchReset: function () {
+ this.$search_container.removeClass("has-results");
+ this.$search_results.empty();
+ this.$search_input.val("");
+ },
+
+ /**
+ * Schedule a search on current menu items.
+ */
+ _searchMenusSchedule: function () {
+ this._search_def = new Promise((resolve) => {
+ setTimeout(resolve, 50);
+ });
+ this._search_def.then(this._searchMenus.bind(this));
+ },
+
+ /**
+ * Search among available menu items, and render that search.
+ */
+ _searchMenus: function () {
+ const query = this.$search_input.val();
+ if (query === "") {
+ this.$search_container.removeClass("has-results");
+ this.$search_results.empty();
+ return;
+ }
+ var results = fuzzy.filter(query, _.keys(this._searchableMenus), {
+ pre: "<b>",
+ post: "</b>",
+ });
+ this.$search_container.toggleClass("has-results", Boolean(results.length));
+ this.$search_results.html(
+ core.qweb.render("web_responsive.MenuSearchResults", {
+ results: results,
+ widget: this,
+ })
+ );
+ },
+
+ /**
+ * Use chooses a search result, so we navigate to that menu
+ *
+ * @param {jQuery.Event} event
+ */
+ _searchResultChosen: function (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ const $result = $(event.currentTarget),
+ text = $result.text().trim(),
+ data = $result.data(),
+ suffix = ~text.indexOf("/") ? "/" : "";
+ // Load the menu view
+ this.trigger_up("menu_clicked", {
+ action_id: data.actionId,
+ id: data.menuId,
+ previous_menu_id: data.parentId,
+ });
+ // Find app that owns the chosen menu
+ const app = _.find(this._apps, function (_app) {
+ return text.indexOf(_app.name + suffix) === 0;
+ });
+ // Update navbar menus
+ core.bus.trigger("change_menu_section", app.menuID);
+ },
+
+ /**
+ * Navigate among search results
+ *
+ * @param {jQuery.Event} event
+ */
+ _searchResultsNavigate: function (event) {
+ // Find current results and active element (1st by default)
+ const all = this.$search_results.find(".o-menu-search-result"),
+ pre_focused = all.filter(".active") || $(all[0]);
+ let offset = all.index(pre_focused),
+ key = event.key;
+ // Keyboard navigation only supports search results
+ if (!all.length) {
+ return;
+ }
+ // Transform tab presses in arrow presses
+ if (key === "Tab") {
+ event.preventDefault();
+ key = event.shiftKey ? "ArrowUp" : "ArrowDown";
+ }
+ switch (key) {
+ // Pressing enter is the same as clicking on the active element
+ case "Enter":
+ pre_focused.click();
+ break;
+ // Navigate up or down
+ case "ArrowUp":
+ offset--;
+ break;
+ case "ArrowDown":
+ offset++;
+ break;
+ default:
+ // Other keys are useless in this event
+ return;
+ }
+ // Allow looping on results
+ if (offset < 0) {
+ offset = all.length + offset;
+ } else if (offset >= all.length) {
+ offset -= all.length;
+ }
+ // Switch active element
+ const new_focused = $(all[offset]);
+ pre_focused.removeClass("active");
+ new_focused.addClass("active");
+ this.$search_results.scrollTo(new_focused, {
+ offset: {
+ top: this.$search_results.height() * -0.5,
+ },
+ });
+ },
+
+ /*
+ * Control if AppDrawer can be closed
+ */
+ _hideAppsMenu: function () {
+ return !this.$("input").is(":focus");
+ },
+ });
+
+ BasicController.include({
+ /**
+ * Close the AppDrawer if the data set is dirty and a discard dialog
+ * is opened
+ *
+ * @override
+ */
+ canBeDiscarded: function (recordID) {
+ if (this.model.isDirty(recordID || this.handle)) {
+ closeAppDrawer();
+ }
+ return this._super.apply(this, arguments);
+ },
+ });
+
+ Menu.include({
+ events: _.extend(
+ {
+ // Clicking a hamburger menu item should close the hamburger
+ "click .o_menu_sections [role=menuitem]": "_onClickMenuItem",
+ // Opening any dropdown in the navbar should hide the hamburger
+ "show.bs.dropdown .o_menu_systray, .o_menu_apps": "_hideMobileSubmenus",
+ },
+ Menu.prototype.events
+ ),
+
+ start: function () {
+ this.$menu_toggle = this.$(".o-menu-toggle");
+ return this._super.apply(this, arguments);
+ },
+
+ /**
+ * Hide menus for current app if you're in mobile
+ */
+ _hideMobileSubmenus: function () {
+ if (
+ config.device.isMobile &&
+ this.$menu_toggle.is(":visible") &&
+ this.$section_placeholder.is(":visible")
+ ) {
+ this.$section_placeholder.collapse("hide");
+ }
+ },
+
+ /**
+ * Prevent hide the menu (should be closed when action is loaded)
+ *
+ * @param {ClickEvent} ev
+ */
+ _onClickMenuItem: function (ev) {
+ ev.stopPropagation();
+ },
+
+ /**
+ * No menu brand in mobiles
+ *
+ * @override
+ */
+ _updateMenuBrand: function () {
+ if (!config.device.isMobile) {
+ return this._super.apply(this, arguments);
+ }
+ },
+ });
+
+ RelationalFields.FieldStatus.include({
+ /**
+ * Fold all on mobiles.
+ *
+ * @override
+ */
+ _setState: function () {
+ this._super.apply(this, arguments);
+ if (config.device.isMobile) {
+ _.map(this.status_information, (value) => {
+ value.fold = true;
+ });
+ }
+ },
+ });
+
+ // Sticky Column Selector
+ ListRenderer.include({
+ _renderView: function () {
+ const self = this;
+ return this._super.apply(this, arguments).then(() => {
+ const $col_selector = self.$el.find(
+ ".o_optional_columns_dropdown_toggle"
+ );
+ if ($col_selector.length !== 0) {
+ const $th = self.$el.find("thead>tr:first>th:last");
+ $col_selector.appendTo($th);
+ }
+ });
+ },
+
+ _onToggleOptionalColumnDropdown: function (ev) {
+ // FIXME: For some strange reason the 'stopPropagation' call
+ // in the main method don't work. Invoking here the same method
+ // does the expected behavior... O_O!
+ // This prevents the action of sorting the column from being
+ // launched.
+ ev.stopPropagation();
+ this._super.apply(this, arguments);
+ },
+ });
+
+ // Responsive view "action" buttons
+ FormRenderer.include({
+ /**
+ * In mobiles, put all statusbar buttons in a dropdown.
+ *
+ * @override
+ */
+ _renderHeaderButtons: function () {
+ const $buttons = this._super.apply(this, arguments);
+ if (
+ !config.device.isMobile ||
+ $buttons.children("button:not(.o_invisible_modifier)").length <= 2
+ ) {
+ return $buttons;
+ }
+
+ // $buttons must be appended by JS because all events are bound
+ const $dropdown = $(
+ core.qweb.render("web_responsive.MenuStatusbarButtons")
+ );
+ $buttons.addClass("dropdown-menu").appendTo($dropdown);
+ return $dropdown;
+ },
+ });
+
+ CalendarRenderer.include({
+ _getFullCalendarOptions: function () {
+ var options = this._super.apply(this, arguments);
+ if (config.device.isMobile) {
+ options.views.dayGridMonth.columnHeaderFormat = "ddd";
+ }
+ return options;
+ },
+ });
+
+ // Hide AppDrawer or Menu when the action has been completed
+ ActionManager.include({
+ /**
+ * @override
+ */
+ _appendController: function () {
+ this._super.apply(this, arguments);
+ closeAppDrawer();
+ },
+ });
+
+ /**
+ * Use ALT+SHIFT instead of ALT as hotkey triggerer.
+ *
+ * HACK https://github.com/odoo/odoo/issues/30068 - See it to know why.
+ *
+ * Cannot patch in `KeyboardNavigationMixin` directly because it's a mixin,
+ * not a `Class`, and altering a mixin's `prototype` doesn't alter it where
+ * it has already been used.
+ *
+ * Instead, we provide an additional mixin to be used wherever you need to
+ * enable this behavior.
+ */
+ var KeyboardNavigationShiftAltMixin = {
+ /**
+ * Alter the key event to require pressing Shift.
+ *
+ * This will produce a mocked event object where it will seem that
+ * `Alt` is not pressed if `Shift` is not pressed.
+ *
+ * The reason for this is that original upstream code, found in
+ * `KeyboardNavigationMixin` is very hardcoded against the `Alt` key,
+ * so it is more maintainable to mock its input than to rewrite it
+ * completely.
+ *
+ * @param {keyEvent} keyEvent
+ * Original event object
+ *
+ * @returns {keyEvent}
+ * Altered event object
+ */
+ _shiftPressed: function (keyEvent) {
+ const alt = keyEvent.altKey || keyEvent.key === "Alt",
+ newEvent = _.extend({}, keyEvent),
+ shift = keyEvent.shiftKey || keyEvent.key === "Shift";
+ // Mock event to make it seem like Alt is not pressed
+ if (alt && !shift) {
+ newEvent.altKey = false;
+ if (newEvent.key === "Alt") {
+ newEvent.key = "Shift";
+ }
+ }
+ return newEvent;
+ },
+
+ _onKeyDown: function (keyDownEvent) {
+ return this._super(this._shiftPressed(keyDownEvent));
+ },
+
+ _onKeyUp: function (keyUpEvent) {
+ return this._super(this._shiftPressed(keyUpEvent));
+ },
+ };
+
+ // Include the SHIFT+ALT mixin wherever
+ // `KeyboardNavigationMixin` is used upstream
+ AbstractWebClient.include(KeyboardNavigationShiftAltMixin);
+
+ // TODO: use default odoo device context when it will be realized
+ const deviceContext = new Context({
+ isMobile: config.device.isMobile,
+ size_class: config.device.size_class,
+ SIZES: config.device.SIZES,
+ });
+ window.addEventListener(
+ "resize",
+ owl.utils.debounce(() => {
+ const state = deviceContext.state;
+ if (state.isMobile !== config.device.isMobile) {
+ state.isMobile = !state.isMobile;
+ }
+ if (state.size_class !== config.device.size_class) {
+ state.size_class = config.device.size_class;
+ }
+ }, 15)
+ );
+ // Patch attachment viewer to add min/max buttons capability
+ PatchableAttachmentViewer.patch("web_responsive.AttachmentViewer", (T) => {
+ class AttachmentViewerPatchResponsive extends T {
+ constructor() {
+ super(...arguments);
+ this.state = useState({
+ maximized: false,
+ });
+ }
+ // Disable auto-close to allow to use form in edit mode.
+ isCloseable() {
+ return false;
+ }
+ }
+ return AttachmentViewerPatchResponsive;
+ });
+ QWeb.components.AttachmentViewer = PatchableAttachmentViewer;
+
+ // Patch control panel to add states for mobile quick search
+ ControlPanel.patch("web_responsive.ControlPanelMobile", (T) => {
+ class ControlPanelPatchResponsive extends T {
+ constructor() {
+ super(...arguments);
+ this.state = useState({
+ mobileSearchMode: "",
+ });
+ this.device = useContext(deviceContext);
+ }
+ }
+ return ControlPanelPatchResponsive;
+ });
+ // Patch search panel to add functionality for mobile view
+ SearchPanel.patch("web_responsive.SearchPanelMobile", (T) => {
+ class SearchPanelPatchResponsive extends T {
+ constructor() {
+ super(...arguments);
+ this.state.mobileSearch = false;
+ this.device = useContext(deviceContext);
+ }
+ getActiveSummary() {
+ const selection = [];
+ for (const filter of this.model.get("sections")) {
+ let filterValues = [];
+ if (filter.type === "category") {
+ if (filter.activeValueId) {
+ const parentIds = this._getAncestorValueIds(
+ filter,
+ filter.activeValueId
+ );
+ filterValues = [...parentIds, filter.activeValueId].map(
+ (valueId) => filter.values.get(valueId).display_name
+ );
+ }
+ } else {
+ let values = [];
+ if (filter.groups) {
+ values = [
+ ...filter.groups.values().map((g) => g.values),
+ ].flat();
+ }
+ if (filter.values) {
+ values = [...filter.values.values()];
+ }
+ filterValues = values
+ .filter((v) => v.checked)
+ .map((v) => v.display_name);
+ }
+ if (filterValues.length) {
+ selection.push({
+ values: filterValues,
+ icon: filter.icon,
+ color: filter.color,
+ type: filter.type,
+ });
+ }
+ }
+ return selection;
+ }
+ }
+ return SearchPanelPatchResponsive;
+ });
+ return {
+ deviceContext: deviceContext,
+ };
+});
diff --git a/web_responsive/static/src/xml/apps.xml b/web_responsive/static/src/xml/apps.xml
new file mode 100644
index 0000000..d9e4098
--- /dev/null
+++ b/web_responsive/static/src/xml/apps.xml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2018 Tecnativa - Jairo Llopis
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<template>
+ <t t-extend="AppsMenu">
+ <!-- App icons must be clickable -->
+ <t t-jquery=".o_app" t-operation="attributes">
+ <attribute
+ name="t-attf-href"
+ t-translation="off"
+ >#menu_id=#{app.menuID}&amp;action_id=#{app.actionID}</attribute>
+ <attribute name="draggable" t-translation="off">false</attribute>
+ </t>
+ <!-- App icons should be more than a text -->
+ <t t-jquery=".o_app &gt; t" t-operation="replace">
+ <t t-call="web_responsive.AppIcon" />
+ </t>
+ <!-- Same hotkey as in EE -->
+ <t t-jquery=".full" t-operation="attributes">
+ <attribute name="accesskey">a</attribute>
+ </t>
+ <!-- Search bar -->
+ <t t-jquery="[t-as=app]" t-operation="before">
+ <div class="search-container align-items-center col-12">
+ <div class="search-input">
+ <div class="input-group">
+ <div class="input-group-prepend">
+ <span class="fa fa-search" />
+ </div>
+ <input
+ type="search"
+ autocomplete="off"
+ placeholder="Search menus..."
+ class="form-control"
+ />
+ </div>
+ <div class="search-results ml-auto mr-auto rounded" />
+ </div>
+ </div>
+ </t>
+ </t>
+ <!-- Separate app icon template, for easier inheritance -->
+ <t t-name="web_responsive.AppIcon">
+ <img
+ class="o-app-icon"
+ draggable="false"
+ t-attf-src="data:image/png;base64,#{app.web_icon_data}"
+ />
+ <span class="o-app-name">
+ <t t-esc="app.name" />
+ </span>
+ </t>
+ <!-- A search result -->
+ <t t-name="web_responsive.MenuSearchResults">
+ <t t-foreach="results" t-as="result">
+ <t t-set="menu" t-value="widget._menuInfo(result.original)" />
+ <a
+ t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}"
+ t-attf-style="background-image:url('data:image/png;base64,#{menu.web_icon_data}')"
+ t-attf-href="#menu_id=#{menu.id}&amp;action_id=#{menu.action_id}"
+ t-att-data-menu-id="menu.id"
+ t-att-data-action-id="menu.action_id"
+ t-att-data-parent-id="menu.parent_id[0]"
+ draggable="false"
+ t-raw="result.string"
+ />
+ </t>
+ </t>
+</template>
diff --git a/web_responsive/static/src/xml/attachment_viewer.xml b/web_responsive/static/src/xml/attachment_viewer.xml
new file mode 100644
index 0000000..928a1e4
--- /dev/null
+++ b/web_responsive/static/src/xml/attachment_viewer.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2019 Tecnativa - Alexandre Díaz
+ Copyright 2021 Sergey Shebanin
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<template>
+ <t t-inherit="mail.Dialog" t-inherit-mode="extension" owl="1">
+ <xpath expr="//div[hasclass('o_Dialog')]" position="attributes">
+ <attribute
+ name="t-attf-class"
+ t-translation="off"
+ >o_Dialog_{{dialog.record['constructor'].name}}</attribute>
+ </xpath>
+ </t>
+ <t t-inherit="mail.AttachmentViewer" t-inherit-mode="extension" owl="1">
+ <xpath expr="//div[hasclass('o_AttachmentViewer')]" position="attributes">
+ <attribute
+ name="t-att-class"
+ t-translation="off"
+ >state.maximized ? 'o_AttachmentViewer_maximized' : ''</attribute>
+ </xpath>
+ <xpath
+ expr="//div[hasclass('o_AttachmentViewer_header')]/div[hasclass('o-autogrow')]"
+ position="after"
+ >
+ <div
+ t-if="!state.maximized"
+ class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonMaximize"
+ t-on-click="state.maximized=true"
+ role="button"
+ title="Maximize"
+ aria-label="Maximize"
+ >
+ <i class="fa fa-fw fa-window-maximize" role="img" />
+ </div>
+ <div
+ t-if="state.maximized"
+ class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonMinimize"
+ t-on-click="state.maximized=false"
+ role="button"
+ title="Minimize"
+ aria-label="Minimize"
+ >
+ <i class="fa fa-fw fa-window-minimize" role="img" />
+ </div>
+ </xpath>
+ </t>
+</template>
diff --git a/web_responsive/static/src/xml/control_panel.xml b/web_responsive/static/src/xml/control_panel.xml
new file mode 100644
index 0000000..d7d0f9c
--- /dev/null
+++ b/web_responsive/static/src/xml/control_panel.xml
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2021 Sergey Shebanin
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<templates>
+ <t t-inherit="web.ControlPanel" t-inherit-mode="extension" owl="1">
+ <xpath expr="//nav[hasclass('o_cp_switch_buttons')]" position="replace">
+ <nav
+ t-if="props.views.length gt 1"
+ class="btn-group o_cp_switch_buttons"
+ role="toolbar"
+ aria-label="View switcher"
+ >
+ <t
+ t-set="collapse_switchview"
+ t-value="device.size_class &lt;= device.SIZES.LG"
+ />
+ <button
+ t-if="collapse_switchview"
+ class="btn btn-link btn-sm"
+ data-toggle="dropdown"
+ aria-expanded="false"
+ >
+ <span
+ t-attf-class="fa fa-lg o_switch_view o_{{ env.view.type }} {{ props.views.filter(view => view.type === env.view.type)[0].icon }}"
+ />
+ </button>
+ <ul
+ t-if="collapse_switchview"
+ class="dropdown-menu dropdown-menu-right list-inline"
+ >
+ <li t-foreach="props.views" t-as="view" t-key="view.type">
+ <t t-call="web.ViewSwitcherButton" />
+ </li>
+ </ul>
+ <t
+ t-if="!collapse_switchview"
+ t-foreach="props.views"
+ t-as="view"
+ t-key="view.type"
+ >
+ <t t-call="web.ViewSwitcherButton" />
+ </t>
+ </nav>
+ </xpath>
+ <xpath expr="//div[hasclass('o_searchview')]" position="replace">
+ <div
+ t-if="props.withSearchBar"
+ class="o_searchview"
+ t-att-class="state.mobileSearchMode == 'quick' ? 'o_searchview_quick' : 'o_searchview_mobile'"
+ role="search"
+ aria-autocomplete="list"
+ t-on-click.self="state.mobileSearchMode = device.isMobile ? 'quick' : ''"
+ >
+ <t t-if="!device.isMobile">
+ <i
+ class="o_searchview_icon fa fa-search"
+ title="Search..."
+ role="img"
+ aria-label="Search..."
+ />
+ <SearchBar fields="fields" />
+ </t>
+ <t t-if="device.isMobile and state.mobileSearchMode == 'quick'">
+ <button
+ class="btn btn-link fa fa-arrow-left"
+ t-on-click.stop="state.mobileSearchMode = ''"
+ />
+ <SearchBar fields="fields" />
+ <button
+ class="btn fa fa-filter"
+ t-on-click.stop="state.mobileSearchMode = 'full'"
+ />
+ </t>
+ <t
+ t-if="device.isMobile and state.mobileSearchMode == 'full'"
+ t-call="web_responsive.MobileSearchView"
+ />
+ <t t-if="device.isMobile and state.mobileSearchMode == ''">
+ <button
+ class="btn btn-link fa fa-search"
+ t-on-click.stop="state.mobileSearchMode = 'quick'"
+ />
+ </t>
+ </div>
+ </xpath>
+ <xpath expr="//div[hasclass('o_cp_top_left')]" position="attributes">
+ <attribute
+ name="t-att-class"
+ t-translation="off"
+ >device.isMobile and state.mobileSearchMode == 'quick' ? 'o_hidden' : ''</attribute>
+ </xpath>
+ <xpath expr="//div[hasclass('o_search_options')]" position="attributes">
+ <attribute name="t-if" t-translation="off">!device.isMobile</attribute>
+ <attribute
+ name="t-att-class"
+ t-translation="off"
+ >device.size_class == device.SIZES.MD ? 'o_search_options_hide_labels' : ''</attribute>
+ </xpath>
+ </t>
+ <t t-name="web_responsive.MobileSearchView" owl="1">
+ <div class="o_mobile_search">
+ <div class="o_mobile_search_header">
+ <span
+ class="o_mobile_search_close float-left mt16 mb16 mr8 ml16"
+ t-on-click.stop="state.mobileSearchMode = 'quick'"
+ >
+ <i class="fa fa-arrow-left" />
+ <strong class="float-right ml8">FILTER</strong>
+ </span>
+ <span
+ class="float-right o_mobile_search_clear_facets mt16 mr16"
+ t-on-click.stop="model.dispatch('clearQuery')"
+ >
+ <t>CLEAR</t>
+ </span>
+ </div>
+ <SearchBar fields="fields" />
+ <div class="o_mobile_search_filter o_search_options mb8 mt8 ml16 mr16">
+ <FilterMenu
+ t-if="props.searchMenuTypes.includes('filter')"
+ class="o_filter_menu"
+ fields="fields"
+ />
+ <GroupByMenu
+ t-if="props.searchMenuTypes.includes('groupBy')"
+ class="o_group_by_menu"
+ fields="fields"
+ />
+ <ComparisonMenu
+ t-if="props.searchMenuTypes.includes('comparison') and model.get('filters', f => f.type === 'comparison').length"
+ class="o_comparison_menu"
+ />
+ <FavoriteMenu
+ t-if="props.searchMenuTypes.includes('favorite')"
+ class="o_favorite_menu"
+ />
+ </div>
+ <div
+ class="btn btn-primary o_mobile_search_show_result fixed-bottom"
+ t-on-click.stop="state.mobileSearchMode = ''"
+ >
+ <t>SEE RESULT</t>
+ </div>
+ </div>
+ </t>
+</templates>
diff --git a/web_responsive/static/src/xml/discuss.xml b/web_responsive/static/src/xml/discuss.xml
new file mode 100644
index 0000000..0789dee
--- /dev/null
+++ b/web_responsive/static/src/xml/discuss.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2019 Tecnativa - Alexandre Díaz
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<template>
+ <t t-extend="mail.discuss.ControlButtons">
+ <t
+ t-jquery=".o_mail_discuss_button_multi_user_channel"
+ t-operation="attributes"
+ >
+ <attribute name="class" t-translation="off">
+ btn btn-secondary o_mail_discuss_button_multi_user_channel d-md-block
+ d-none
+ </attribute>
+ </t>
+ </t>
+</template>
diff --git a/web_responsive/static/src/xml/form_buttons.xml b/web_responsive/static/src/xml/form_buttons.xml
new file mode 100644
index 0000000..2e86096
--- /dev/null
+++ b/web_responsive/static/src/xml/form_buttons.xml
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!--
+ Copyright 2017 LasLabs Inc.
+ Copyright 2018 Alexandre Díaz
+ Copyright 2018 Tecnativa - Jairo Llopis
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+<templates id="form_view" xml:space="preserve">
+ <!-- Template for buttons that display only the icon in xs -->
+ <t t-name="web_responsive.icon_button">
+ <i t-attf-class="fa fa-#{icon}" t-att-title="label" />
+ <span class="d-none d-sm-inline" t-esc="label" />
+ </t>
+ <t t-name="web_responsive.MenuStatusbarButtons">
+ <div class="dropdown">
+ <button
+ class="o_statusbar_buttons_dropdown btn btn-secondary dropdown-toggle"
+ type="button"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="false"
+ >
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'cogs'" />
+ <t t-set="label">Quick actions</t>
+ </t>
+ </button>
+ <!-- A div.o_statusbar_buttons.dropdown-menu
+ is appended here from JS -->
+ </div>
+ </t>
+ <t t-extend="FormView.buttons">
+ <!-- Change "Edit" button hotkey to "E" -->
+ <t t-jquery=".o_form_button_edit" t-operation="attributes">
+ <attribute name="accesskey">e</attribute>
+ </t>
+ <!-- Change "Discard" button hotkey to "D" -->
+ <t t-jquery=".o_form_button_cancel" t-operation="attributes">
+ <attribute name="accesskey">d</attribute>
+ </t>
+ <!-- Add responsive icons to buttons -->
+ <t t-jquery=".o_form_button_edit" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'pencil'" />
+ <t t-set="label">Edit</t>
+ </t>
+ </t>
+ <t t-jquery=".o_form_button_create" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'plus'" />
+ <t t-set="label">Create</t>
+ </t>
+ </t>
+ <t t-jquery=".o_form_button_save" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'check'" />
+ <t t-set="label">Save</t>
+ </t>
+ </t>
+ <t t-jquery=".o_form_button_cancel" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'times'" />
+ <t t-set="label">Discard</t>
+ </t>
+ </t>
+ </t>
+ <t t-extend="KanbanView.buttons">
+ <!-- Add responsive icons to buttons -->
+ <t t-jquery="button" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'plus'" />
+ <t t-set="label" t-value="create_text || _t('Create')" />
+ </t>
+ </t>
+ </t>
+ <t t-extend="ListView.buttons">
+ <!-- Change "Discard" button hotkey to "D" -->
+ <t t-jquery=".o_list_button_discard" t-operation="attributes">
+ <attribute name="accesskey">d</attribute>
+ </t>
+ <!-- Add responsive icons to buttons -->
+ <t t-jquery=".o_list_button_add" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'plus'" />
+ <t t-set="label">Create</t>
+ </t>
+ </t>
+ <t t-jquery=".o_list_button_save" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'check'" />
+ <t t-set="label">Save</t>
+ </t>
+ </t>
+ <t t-jquery=".o_list_button_discard" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'times'" />
+ <t t-set="label">Discard</t>
+ </t>
+ </t>
+ </t>
+ <t t-extend="CalendarView.navigation_buttons">
+ <!-- Add responsive icons to buttons -->
+ <t t-jquery=".o_calendar_button_today" t-operation="inner">
+ <t t-call="web_responsive.icon_button">
+ <t t-set="icon" t-value="'calendar-check-o'" />
+ <t t-set="label">Today</t>
+ </t>
+ </t>
+ </t>
+</templates>
diff --git a/web_responsive/static/src/xml/menu.xml b/web_responsive/static/src/xml/menu.xml
new file mode 100644
index 0000000..075cd49
--- /dev/null
+++ b/web_responsive/static/src/xml/menu.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+ <div t-extend="UserMenu.shortcuts">
+ <t
+ t-jquery="table.o_shortcut_table > tbody > tr > td:nth-child(2) > span:first-child"
+ t-operation="after"
+ >
+ + <span class="o_key">Shift</span>
+ </t>
+ </div>
+</templates>
diff --git a/web_responsive/static/src/xml/navbar.xml b/web_responsive/static/src/xml/navbar.xml
new file mode 100644
index 0000000..1d9654a
--- /dev/null
+++ b/web_responsive/static/src/xml/navbar.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2017-2018 Tecnativa - Jairo Llopis
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<templates>
+ <t t-extend="Menu">
+ <t t-jquery=".o_menu_apps" t-operation="after">
+ <!-- Hamburger button to show submenus in sm screens -->
+ <button
+ class="o-menu-toggle d-md-none"
+ data-toggle="collapse"
+ data-target=".o_main_navbar .o_menu_sections"
+ >
+ <i class="fa fa-bars" />
+ </button>
+ </t>
+ </t>
+</templates>
diff --git a/web_responsive/static/src/xml/search_panel.xml b/web_responsive/static/src/xml/search_panel.xml
new file mode 100644
index 0000000..a1cc9db
--- /dev/null
+++ b/web_responsive/static/src/xml/search_panel.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2021 Sergey Shebanin
+ License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<templates>
+ <t t-inherit="web.SearchPanel" t-inherit-mode="extension" owl="1">
+ <xpath expr="//div[hasclass('o_search_panel')]" position="inside">
+ <div
+ t-if="device.isMobile"
+ class="o_search_panel_summary"
+ t-on-click.stop="state.mobileSearch = true"
+ >
+ <div class="d-flex flex-wrap align-items-center">
+ <i class="fa fa-fw fa-filter mr-1" />
+ <t t-set="filters" t-value="getActiveSummary()" />
+ <span t-foreach="filters" t-as="filter" class="mx-1">
+ <i
+ t-if="filter.icon"
+ t-attf-class="fa {{ filter.icon }} mr-2"
+ t-att-style="filter.color and ('color: ' + filter.color)"
+ />
+ <t
+ t-esc="filter.values.join(filter.type == 'category' ? ' / ' : ', ')"
+ />
+ </span>
+ <t t-if="!filters.length">All</t>
+ </div>
+ </div>
+ <div
+ class="o_search_panel_content"
+ t-att-class="device.isMobile ? (state.mobileSearch ? 'o_mobile_search' : 'd-none'): ''"
+ />
+ </xpath>
+ <xpath expr="//div[hasclass('o_search_panel_content')]" position="inside">
+ <div t-if="device.isMobile" class="o_mobile_search_header">
+ <span
+ class="o_mobile_search_close float-left mt16 mb16 mr8 ml16"
+ t-on-click.stop="state.mobileSearch = false"
+ >
+ <i class="fa fa-arrow-left" />
+ <strong class="float-right ml8">FILTER</strong>
+ </span>
+ </div>
+ <xpath expr="//section" position="move" />
+ <div
+ t-if="device.isMobile"
+ class="btn btn-primary o_mobile_search_show_result fixed-bottom"
+ t-on-click.stop="state.mobileSearch = false"
+ >
+ <t>SEE RESULT</t>
+ </div>
+ </xpath>
+ </t>
+</templates>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 22:24:59 +0000