Merge branch '2.0-font-fix' into 'master'

[FIX] Fixed Font Issue And Added More Font Options

See merge request flectra-hq/flectra!330

addons/web_flectra/controllers/main.py

@@ -44,7 +44,8 @@ class DasboardBackground(Controller):
                 'theme_font_name': company.theme_font_name,
                 'theme_color_brand': company.theme_color_brand,
                 'theme_background_color': company.theme_background_color,
-                'theme_sidebar_color': company.theme_sidebar_color
+                'theme_sidebar_color': company.theme_sidebar_color,
+                'google_font': company.google_font
              }
         }
 
@@ -67,6 +68,8 @@ class DasboardBackground(Controller):
                     result.update({entry: company_settings[entry]})
                 elif entry == 'theme_sidebar_color':
                     result.update({entry: company_settings[entry]})
+                elif entry == 'google_font':
+                    result.update({entry: company_settings[entry]})
             company.update(result)
         elif 'user_settings' in post:
             result = {}

addons/web_flectra/data/colors.scss

@@ -1,4 +1,5 @@
 $theme-brand-primary: rgb(0, 158, 251);
 $theme-brand-background-color: rgb(242, 247, 251);
 $theme-root-font-family: Rubik;
-$theme-sidebar-color: rgb(33, 37, 41);
+$theme-sidebar-color: rgb(33, 37, 41);
+$backend-google-font: 'Roboto';

addons/web_flectra/models/res_company.py

@@ -19,7 +19,15 @@ class ResCompany(models.Model):
         ('apps', 'Top Menu')], string="Menu Style", default="sidemenu")
     theme_font_name = fields.Selection([
         ('Rubik', 'Rubik'),
-        ('sans-serif', 'sans-serif')], string="Select Font", default='Rubik')
+        ('sans-serif', 'sans-serif'),
+        ('poppins', 'Poppins'),
+        ('lato', 'Lato'),
+        ('merriweather', 'Merriweather'),
+        ('montserrat', 'Montserrat'),
+        ('opensans', 'OpenSans'),
+        ('playfairdisplay', 'PlayfairDisplay'),
+        ('google-font', 'Google Font')], string="Select Font", default='Rubik')
+    google_font = fields.Char('Google Font', default='Roboto')
     theme_color_brand = fields.Char("Theme Brand Color", default="#009efb")
     theme_background_color = fields.Char("Theme Background Color", default="#f2f7fb")
     theme_sidebar_color = fields.Char("Theme Sidebar Color", default="#212529")
@@ -34,11 +42,13 @@ class ResCompany(models.Model):
                     $theme-brand-background-color: %s;
                     $theme-root-font-family: %s;
                     $theme-sidebar-color: %s;
+                    $backend-google-font: %s;
                 """ % (
                     rec.theme_color_brand,
                     rec.theme_background_color,
                     rec.theme_font_name,
                     rec.theme_sidebar_color,
+                    rec.google_font,
                 )
                 IrAttachment = self.env["ir.attachment"]
                 url = "/web_flectra/static/src/scss/backend_theme_customizer/colors.scss"
@@ -75,6 +85,7 @@ class ResCompany(models.Model):
             'theme-brand-background-color',
             'theme-root-font-family',
             'theme-sidebar-color',
+            'google-font'
         ]
         colors = self.env['web_flectra.scss_editor'].get_values(
             SCSS_URL, XML_ID, variables
@@ -84,5 +95,6 @@ class ResCompany(models.Model):
             'theme_background_color': colors['theme-brand-background-color'],
             'theme_font_name': colors['theme-root-font-family'],
             'theme_sidebar_color': colors['theme-sidebar-color'],
+            'google_font': colors['google-font'],
         })
         return res

addons/web_flectra/static/src/js/apps_menu.js

@@ -54,15 +54,18 @@ flectra.define('web_flectra.AppsMenu', function (require) {
             this.$search_container = this.$(".search-container");
             this.$search_input = this.$(".search-input input");
             this.$search_results = this.$(".search-results");
+            this.$theme_search = this.$('input#goolegoogle_font_val');
             this.$('.o_app_search').css('visibility', 'hidden');
            $(window).keypress( function(e){
-                if(self.$el.find('.full > i').hasClass('fa-th') === false){
-                    if((e.key == 'Delete') == false && (e.key == 'Enter') == false){
-                        self.$search_input.val(self.$search_input.val() + e.key);
-                        self._onAppsSearch(e);
-                        self.$('.o_app_search').css('visibility', 'unset');
+                if($(e.target).attr('id') != 'google_font_val'){
+                    if(self.$el.find('.full > i').hasClass('fa-th') === false){
+                        if((e.key == 'Delete') == false && (e.key == 'Enter') == false){
+                            self.$search_input.val(self.$search_input.val() + e.key);
+                            self._onAppsSearch(e);
+                            self.$('.o_app_search').css('visibility', 'unset');
+                        }
+                        self.$search_input.focus();
                     }
-                    self.$search_input.focus();
                 }
             });
             var state = $.bbq.getState();
@@ -208,6 +211,7 @@ flectra.define('web_flectra.AppsMenu', function (require) {
             this.$search_results.empty();
             this.$search_input.val("");
             this.$('.o_app_search').css('visibility', 'hidden');
+            this.$el.find('.full').css('pointer-events','all');
             this._searchApps = this._apps;
             var html = Qweb.render('AppsSearch', {apps: this._searchApps});
             this.$el.find('.o_apps_container').replaceWith(html);

addons/web_flectra/static/src/js/backend_theme_customizer.js

@@ -17,6 +17,8 @@ flectra.define('web_flectra.BackendThemeCustomizer', function (require) {
             "click .f-theme-customizer-toggler": "_on_customizer_toggler",
             "click .f-theme-customizer-close": "_on_customizer_close",
             "click .save-btn": "_on_save_btn",
+            "change #select_font": "_onChangeFont",
+            "input #google_font_val": "_onFontInput",
         }),
 
         willStart: function () {
@@ -68,6 +70,7 @@ flectra.define('web_flectra.BackendThemeCustomizer', function (require) {
 
             company_settings['theme_menu_style'] = company_container.find('#select_menu option:selected').val()
             company_settings['theme_font_name'] = company_container.find('#select_font option:selected').val()
+            company_settings['google_font'] = company_container.find('#google_font_val').val().toString();
 
             colorPicker.each(function () {
                 var name = $(this).attr('data-identity')
@@ -92,6 +95,20 @@ flectra.define('web_flectra.BackendThemeCustomizer', function (require) {
             return true;
         },
 
+        _onChangeFont: function(e){
+            var font = $('#select_font').val();
+            if(font == 'google-font'){
+                $('.google-font-input').show();
+            }else{
+                $('.google-font-input').hide();
+            }
+        },
+
+        _onFontInput: function(e){
+            e.stopPropagation();
+            e.preventDefault();
+        },
+
         _diff: function(dict1, dict2) {
             var result = {};
             $.each(dict1, function (key, value) {
@@ -128,6 +145,12 @@ flectra.define('web_flectra.BackendThemeCustomizer', function (require) {
             /* Write company_settings to customizer ui. */
             this.$el.find('#select_menu').val(this.company_settings.theme_menu_style);
             this.$el.find('#select_font').val(this.company_settings.theme_font_name);
+            this.$el.find('#google_font_val').val(this.company_settings.google_font);
+            if(this.company_settings.theme_font_name == 'google-font'){
+                this.$el.find(".google-font-input").show();
+            }else{
+                this.$el.find(".google-font-input").hide();
+            }
         },
 
         _init_color_picker: function (item) {

addons/web_flectra/static/src/js/sidebar.js

@@ -83,9 +83,7 @@ var SideMenu = Widget.extend({
         if (self.current_menu) {
             self.open_menu(self.current_menu);
         }
-        this.is_bound.resolve().done(function(){
-            $('#menu_launcher').removeClass('d-none');
-        });
+        this.is_bound.resolve();
     },
 
     /**

addons/web_flectra/static/src/js/web_client.js

@@ -18,6 +18,11 @@ return  WebClient.include({
             menu_clicked: 'on_menu_clicked',
             custom_clicked: 'on_custom_clicked',
         }),
+        start: function(){
+            return this._super.apply(this, arguments).then(function () {
+                $('#menu_launcher').removeClass('d-none');
+            });
+        },
         _on_app_clicked_done: function (ev) {
             var self = this;
             return this._super.apply(this, arguments).then(function () {
@@ -39,6 +44,11 @@ return  WebClient.include({
             }
             if((state.hasOwnProperty('home') && state.home == 'apps') || (Object.keys(state).length === 1 && Object.keys(state)[0] === "cids")){
                 $toggle_btn.removeClass('fa-th');
+                if(this.$el.find('.full > i').hasClass('fa-chevron-left') || this.$el.find('.full > i').hasClass('fa-th')){
+                    this.$el.find('.full').css('pointer-events','all');
+                }else{
+                    this.$el.find('.full').css('pointer-events','none');
+                }
                 $menu_tray.hide();
                 $dashboard.removeClass('d-none');
             }else{

addons/web_flectra/static/src/scss/fonts.scss

@@ -48,4 +48,224 @@
   src: local('Rubik-Black'), local('Rubik-Black'), url(/web_flectra/static/src/fonts/Rubik-Black.ttf) format('woff2');
 }
 
+/* Poppins */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins'), local('Poppins-Regular'), url(/web_flectra/static/src/fonts/poppins/Poppins-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Poppins-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins-Regular'), local('Poppins-Regular'), url(/web_flectra/static/src/fonts/poppins/Poppins-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Poppins-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins-Bold'), local('Poppins-Bold'), url(/web_flectra/static/src/fonts/poppins/Poppins-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Poppins-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins-Italic'), local('Poppins-Italic'), url(/web_flectra/static/src/fonts/poppins/Poppins-Italic.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Poppins-Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins-Light'), local('Poppins-Light'), url(/web_flectra/static/src/fonts/poppins/Poppins-Light.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Poppins-Medium';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins-Medium'), local('Poppins-Medium'), url(/web_flectra/static/src/fonts/poppins/Poppins-Medium.ttf) format('woff2');
+}
 
+/* Lato */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato'), local('Lato-Regular'), url(/web_flectra/static/src/fonts/Lato/Lato-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Lato-Black';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato-Black'), local('Lato-Black'), url(/web_flectra/static/src/fonts/Lato/Lato-Black.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Lato-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato-Bold'), local('Lato-Bold'), url(/web_flectra/static/src/fonts/Lato/Lato-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Lato-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato-Italic'), local('Lato-Italic'), url(/web_flectra/static/src/fonts/Lato/Lato-Italic.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Lato-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato-Regular'), local('Lato-Regular'), url(/web_flectra/static/src/fonts/Lato/Lato-Regular.ttf) format('woff2');
+}
+
+/* Merriweather */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather'), local('Merriweather-Regular'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Merriweather-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather-Regular'), local('Merriweather-Regular'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Merriweather-Black';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather-Black'), local('Merriweather-Black'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Black.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Merriweather-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather-Bold'), local('Merriweather-Bold'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Merriweather-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather-Italic'), local('Merriweather-Italic'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Italic.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Merriweather-Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Merriweather-Light'), local('Merriweather-Light'), url(/web_flectra/static/src/fonts/merriweather/Merriweather-Light.ttf) format('woff2');
+}
+
+/* montserrat */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat'), local('Montserrat-Regular'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Regular'), local('Montserrat-Regular'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Black';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Black'), local('Montserrat-Black'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Black.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Bold'), local('Montserrat-Bold'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Italic'), local('Montserrat-Italic'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Italic.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Light'), local('Montserrat-Light'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Light.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'Montserrat-Medium';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Medium'), local('Montserrat-Medium'), url(/web_flectra/static/src/fonts/montserrat/Montserrat-Medium.ttf) format('woff2');
+}
+
+/* opensans */
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans'), local('OpenSans-Regular'), url(/web_flectra/static/src/fonts/opensans/OpenSans-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'OpenSans-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans-Regular'), local('OpenSans-Regular'), url(/web_flectra/static/src/fonts/opensans/OpenSans-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'OpenSans-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans-Bold'), local('OpenSans-Bold'), url(/web_flectra/static/src/fonts/opensans/OpenSans-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'OpenSans-Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans-Light'), local('OpenSans-Light'), url(/web_flectra/static/src/fonts/opensans/OpenSans-Light.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'OpenSans-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('OpenSans-Italic'), local('OpenSans-Italic'), url(/web_flectra/static/src/fonts/opensans/OpenSans-Italic.ttf) format('woff2');
+}
+
+/* Playfair Display */
+@font-face {
+  font-family: 'PlayfairDisplay';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay'), local('PlayfairDisplay-Regular'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'PlayfairDisplay-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay-Regular'), local('PlayfairDisplay-Regular'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Regular.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'PlayfairDisplay-Black';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay-Black'), local('PlayfairDisplay-Black'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Black.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'PlayfairDisplay-Bold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay-Bold'), local('PlayfairDisplay-Bold'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Bold.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'PlayfairDisplay-Italic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay-Italic'), local('PlayfairDisplay-Italic'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Italic.ttf) format('woff2');
+}
+@font-face {
+  font-family: 'PlayfairDisplay-Medium';
+  font-style: normal;
+  font-weight: 400;
+  src: local('PlayfairDisplay-Medium'), local('PlayfairDisplay-Medium'), url(/web_flectra/static/src/fonts/playfairdisplay/PlayfairDisplay-Medium.ttf) format('woff2');
+}

addons/web_flectra/static/src/scss/sidebar.scss

@@ -31,6 +31,11 @@ body[data-menu="sidemenu"].o_web_client {
         height: calc(100vH - #{$menu_height});
         font-family: $font_name;
         .f_launcher_content {
+             transition: all 0.4s;
+            &:hover{
+                transform: translate3d(0, 0, 0);
+                -webkit-transform: translate3d(0, 0, 0);
+            }
             position: relative;
             background-color: $theme-sidebar-color;
             height: 100%;

addons/web_flectra/static/src/scss/variables.scss

@@ -28,8 +28,17 @@ $gray-lighter: lighten($gray-base, 93.5%);
 // Font
 $o-root-font-size: 15px;
 $o-root-font-family: $theme-root-font-family;
-
-body {
-    font-family: $o-root-font-family !important;
-    font-size: $o-root-font-size !important;
+@if $o-root-font-family == 'google-font'{
+    @import url("https://fonts.googleapis.com/css?family=#{$backend-google-font}");
+    body.o_web_client{
+        font-family: $backend-google-font !important;
+        font-size: $o-root-font-size !important;
+    }
 }
+@if $o-root-font-family != 'google-font'{
+    body.o_web_client{
+        font-family: $o-root-font-family !important;
+        font-size: $o-root-font-size !important;
+    }
+}
+

addons/web_flectra/static/src/xml/backend_theme_customizer.xml

@@ -48,9 +48,24 @@
                     <select class="form-control" id="select_font">
                         <option value="Rubik">Rubik</option>
                         <option value="sans-serif">sans-serif</option>
+                        <option value="poppins">Poppins</option>
+                        <option value="lato">Lato</option>
+                        <option value="merriweather">Merriweather</option>
+                        <option value="montserrat">Montserrat</option>
+                        <option value="opensans">OpenSans</option>
+                        <option value="playfairdisplay">PlayfairDisplay</option>
+                        <option value="google-font">Google Font</option>
                     </select>
                 </div>
             </div>
+            <div class="row pl-4 google-font-input align-items-center p-2">
+                <div class="label">
+                    <label for="select_font">Font Name</label>
+                </div>
+                <div>
+                    <input type="text" id="google_font_val"/>
+                </div>
+            </div>
             <div class="d-flex justify-content-start p-2 sub_section">
                 <label>Theme Colors</label>
             </div>