Remove material icons (#264)

* Add macro for svg font and update the header component macros with svg font option * Remove material icon from baseframe * Add font awesome styles * Fix profile url in navbar
hasgeek · Feb 25, 2020 · 30881b9 · 30881b9
1 parent e4f9c9b
commit 30881b9
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 53 deletions.
diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -3596,6 +3596,42 @@ h6 {
   margin-left: 8px;
 }
 
+.fa5-icon {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.fa5--align-baseline {
+  position: relative;
+  top: 0.09em;
+}
+
+.fa5-icon--caption {
+  width: 12px;
+  height: 12px;
+}
+
+.fa5-icon--subhead {
+  width: 16px;
+  height: 16px;
+}
+
+.fa5-icon--title {
+  width: 18px;
+  height: 18px;
+}
+
+.fa5-icon--headline {
+  width: 24px;
+  height: 24px;
+}
+
+.fa5-icon--display1 {
+  width: 32px;
+  height: 32px;
+}
+
 .header {
   background: #fff;
 }
@@ -3623,7 +3659,7 @@ h6 {
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
-  margin-right: 8px;
+  margin-right: 15px;
   height: 24px;
 }
 
@@ -4047,6 +4083,9 @@ li p + ol {
 .mui-form .has-error label {
   color: #c04b61;
 }
+.mui-form .alert {
+  margin-bottom: 15px;
+}
 
 .mui-form--margins {
   margin-top: 15px;
@@ -4302,10 +4341,6 @@ li p + ol {
   text-decoration: none;
 }
 
-.control-icon .material-icons {
-  font-size: 34px;
-}
-
 .modal {
   display: none;
   padding: 15px;

diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss
@@ -87,6 +87,10 @@
   .has-error label {
     color: $mui-text-danger;
   }
+
+  .alert {
+    margin-bottom: 15px;
+  }
 }
 
 .mui-form--margins {

diff --git a/baseframe/static/sass/baseframe-material/_helper.scss b/baseframe/static/sass/baseframe-material/_helper.scss
@@ -164,3 +164,43 @@ h6 {
 .mui-btn--nostyle + .mui-btn--nostyle {
   margin-left: 8px;
 }
+
+// ============================================================================
+// Font awesome 5
+// ============================================================================
+
+.fa5-icon {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.fa5--align-baseline {
+  position: relative;
+  top: 0.09em;
+}
+
+.fa5-icon--caption {
+  width: 12px;
+  height: 12px;
+}
+
+.fa5-icon--subhead {
+  width: 16px;
+  height: 16px;
+}
+
+.fa5-icon--title {
+  width: 18px;
+  height: 18px;
+}
+
+.fa5-icon--headline {
+  width: 24px;
+  height: 24px;
+}
+
+.fa5-icon--display1 {
+  width: 32px;
+  height: 32px;
+}
diff --git a/baseframe/static/sass/baseframe-material/_menu.scss b/baseframe/static/sass/baseframe-material/_menu.scss
@@ -26,7 +26,7 @@
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
-  margin-right: 8px;
+  margin-right: 15px;
   height: 24px;
 }
 

diff --git a/baseframe/static/sass/baseframe-material/_modal.scss b/baseframe/static/sass/baseframe-material/_modal.scss
@@ -1,31 +1,31 @@
 .modal {
-    display: none;
-    padding: $reflex-cell-spacing;
-    @extend .mui--z1;
+  display: none;
+  padding: $reflex-cell-spacing;
+  @extend .mui--z1;
 
-    //Use material design icon for close
-    a.close-modal {
-        display: none;
-    }
+  //Use fa5 icon for close
+  a.close-modal {
+    display: none;
+  }
 
-    .modal__close {
-        position: absolute;
-        top: $reflex-cell-spacing/2;
-        right: $reflex-cell-spacing/2;
-        display: block;
-    }
-    .modal__header {
-        @extend .mui--text-title;
-    }
-    .modal__body {
-        @extend .mui--text-body2;
-    }
+  .modal__close {
+    position: absolute;
+    top: $reflex-cell-spacing/2;
+    right: $reflex-cell-spacing/2;
+    display: block;
+  }
+  .modal__header {
+    @extend .mui--text-title;
+  }
+  .modal__body {
+    @extend .mui--text-body2;
+  }
 }
 
 .jquery-modal.blocker.current {
-    z-index: 1001;
-    > .modal {
-        display: inline-block;
-        overflow: hidden;
-    }
+  z-index: 1001;
+  > .modal {
+    display: inline-block;
+    overflow: hidden;
+  }
 }
diff --git a/baseframe/static/sass/baseframe-material/_thumbnail.scss b/baseframe/static/sass/baseframe-material/_thumbnail.scss
@@ -36,7 +36,3 @@
   outline: none;
   text-decoration: none;
 }
-
-.control-icon .material-icons {
-  font-size: 34px;
-}
diff --git a/baseframe/templates/baseframe/bootstrap3/components.html.jinja2 b/baseframe/templates/baseframe/bootstrap3/components.html.jinja2
@@ -229,7 +229,7 @@
       <li {% if links %} class="separator-authlinks" {%- endif %}>
         {%- with orgs = current_auth.user.organization_links() %}
         {% if orgs %}
-          <a href="/profile">My profile</a></li>
+          <a href="{{ current_auth.user.profile_url }}">My profile</a></li>
           {%- for org in orgs %}
           <li><a href="{{ org.link }}">{{ org.title }}</a></li>
           {%- endfor %}

diff --git a/baseframe/templates/baseframe/mui/baseframe.html.jinja2 b/baseframe/templates/baseframe/mui/baseframe.html.jinja2
@@ -40,8 +40,6 @@
 
   <!-- Included CSS Files -->
   {%- block font_icons %}
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    rel="stylesheet">
   {%- endblock %}
   {%- for asset in config.get('ext_css', []) %}
     <link rel="stylesheet" type="text/css" href="{{ asset|ext_asset_url }}" />

diff --git a/baseframe/templates/baseframe/mui/components.html.jinja2 b/baseframe/templates/baseframe/mui/components.html.jinja2
@@ -1,11 +1,21 @@
+{%- macro faicon(icon, css_class='') -%}
+  {% assets "fa5-sprite" %}<svg class="fa5-icon {%- if css_class %} {{ css_class }} {%- endif -%}" aria-hidden="true" role="img"><use xlink:href="{{ ASSET_URL }}#{{icon}}"></use></svg>{% endassets %}
+{%- endmacro %}
+
+{%- macro alertbox(category, message="") %}
+  <div class="alert alert--{{category}} alert--dismissable">
+    <a class="alert__close" href="javascript:void(0);" aria-label="{% trans %}Close{% endtrans %}">
+    {{ faicon('times', 'fa5-icon--subhead fa5--align-baseline') }}
+    </a>
+    <p class="alert__text">{{ message }}</p>
+  </div>
+{%- endmacro %}
+
 {%- macro flash_messages() -%}
   {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
       {% for category, message in messages %}
-        <div class="alert alert--{{category}} alert--dismissable">
-          <a class="alert__close" href="javascript:void(0);" aria-label="{% trans %}Close{% endtrans %}"><i class="material-icons">clear</i></a>
-          <p class="alert__text">{{ message }}</p>
-        </div>
+        {{ alertbox(category, message) }}
       {% endfor %}
     {% endif %}
   {% endwith %}
@@ -19,15 +29,15 @@
   <nav id="hgnav" class="header__nav" role="navigation">
     <div class="header__site-title {% if current_auth.is_anonymous -%}header__site-title--smaller{% endif %}">
       {% if side_menu_button %}
-        <a class="header__app-icon header__app-icon--menu" id="js-sidebar-menu-button" aria-label="{% trans %}Toggle menu{% endtrans %}" aria-expanded="false"><i class="material-icons" aria-hidden="true">menu</i></a>
+        <a class="header__app-icon header__app-icon--menu" id="js-sidebar-menu-button" aria-label="{% trans %}Toggle menu{% endtrans %}" aria-expanded="false">{{ faicon('bars', 'fa5-icon--title') }}</a>
       {% endif %}
       <div class="header__site-title__title">{{site_title}}</div>
     </div>
     <div class="header__right-nav {% if current_auth.is_anonymous -%}header__right-nav--larger{% endif %}">
       <ul class="header__nav-list">
         {%- for link in site_links %}
           <li class="header__nav-list__item">
-            <a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links {% if link.class %}{{ link.class }}{% endif %} {% if  current_view.current_section == link.name %}header__nav-links-active{% endif %}" aria-label="{{ link.title }}">{% if link.icon %}<i class="material-icons mui--align-middle header__nav-links__icon" aria-hidden="true">{{link.icon}}</i>{% endif %}<span class="header__nav-links__text">{{ link.title }}</span>
+            <a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links {% if link.class %}{{ link.class }}{% endif %} {% if  current_view.current_section == link.name %}header__nav-links-active{% endif %}" aria-label="{{ link.title }}">{% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} <span class="header__nav-links__text">{{ link.title }}</span>
             </a>
           </li>
         {%- endfor %}
@@ -61,14 +71,14 @@
     {%- for link in user_links %}
       <li class="header__side-nav-list__item">
         <a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links header__nav-links--sidebar {%- if link.class %}{{ link.class }} {% endif %}" aria-label="{{ link.title }}">
-          {% if link.icon %}<i class="material-icons header__side-nav-list__item__icon" aria-hidden="true">{{link.icon}}</i>{% endif %} {{ link.title }}
+          {% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} {{ link.title }}
         </a>
       </li>
     {%- endfor %}
     {%- for link in site_links %}
       <li class="header__side-nav-list__item">
         <a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links header__nav-links--sidebar {%- if link.class %}{{ link.class }} {% endif %}" aria-label="{{ link.title }}">
-          {% if link.icon %}<i class="material-icons header__side-nav-list__item__icon" aria-hidden="true">{{link.icon}}</i>{% endif %} {{ link.title }}
+          {% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} {{ link.title }}
         </a>
       </li>
     {%- endfor %}
@@ -78,7 +88,7 @@
 {%- macro add_hasgeek_auth(links, loginbtntext) %}
   {% if not current_auth.is_anonymous -%}
     <a class="header__app-icon" data-mui-toggle="dropdown" id="hg-user-btn" role="button" aria-expanded="false" aria-label="{% trans %}My account{% endtrans %}">
-      <i class="material-icons" aria-hidden="true">account_circle</i>
+      {{ faicon('user', 'fa5-icon--title') }}
     </a>
     <ul class="mui-dropdown__menu mui-dropdown__menu--right">
       {%- for link in links %}
@@ -87,7 +97,7 @@
       <li {% if links %} class="separator-authlinks" {%- endif %}>
         {%- with orgs = current_auth.user.organization_links() %}
         {% if orgs %}
-          <a href="/profile" aria-label="{% trans %}My profile{% endtrans %}">{% trans %}My profile{% endtrans %}</a></li>
+          <a href="{{ current_auth.user.profile_url }}" aria-label="{% trans %}My profile{% endtrans %}">{% trans %}My profile{% endtrans %}</a></li>
           {%- for org in orgs %}
           <li><a href="{{ org.link }}" aria-label="{{ org.title }}">{{ org.title }}</a></li>
           {%- endfor %}
@@ -111,7 +121,7 @@
     {'title': 'HGTV', 'url': 'https://hasgeek.tv/', 'icon': 'https://static.hasgeek.co.in/static/img/hgnav/hg_hgtv.png'},
     ]%}
     <a class="header__app-icon" data-mui-toggle="dropdown" role="button" aria-expanded="false" aria-label="{% trans %}Apps{% endtrans %}">
-      <i class="material-icons" aria-hidden="true">apps</i>
+      {{ faicon('th', 'fa5-icon--title') }}
     </a>
     <ul class="mui-dropdown__menu mui-dropdown__menu--right" role="menu">
       {%- for link in network_links %}

diff --git a/baseframe/templates/baseframe/mui/forms.html.jinja2 b/baseframe/templates/baseframe/mui/forms.html.jinja2
@@ -1,3 +1,5 @@
+{%- from "baseframe/mui/components.html.jinja2" import alertbox -%}
+
 {% macro rendererrors(field) -%}
     {%- if field.errors -%}
       {%- for error in field.errors %}
@@ -130,10 +132,7 @@
 
 {% macro renderform_inner(form, formid, style='horiz', autosave=False, draft_revision=None) -%}
   {%- if form.errors %}
-    <div class="alert alert--error alert--dismissable">
-      <a class="alert__close" href="javascript:void(0);" aria-label="close"><i class="material-icons">clear</i></a>
-      <p class="alert__text"><i class="material-icons alert__icon">error</i> {% trans %}Please review the indicated issues{% endtrans %}</p>
-    </div>
+    {{ alertbox('error', 'Please review the indicated issues') }}
   {%- endif %}
   {% if message %}<p>{{ message }}</p>{% endif %}
   <div style="display:none;"><input type="hidden" name="form.id" value="{{ formid }}" /></div>
@@ -177,7 +176,7 @@
             form.find('input[type="submit"]').prop('disabled', false).removeClass('submit-disabled');
             form.find('button[type="submit"]').prop('disabled', false).removeClass('submit-disabled');
             form.find('.loading').addClass('mui--hide');
-            form.append('<div class="alert alert--error"><a class="alert__close" href="javascript:void(0);" aria-label="close"><i class="material-icons">clear</i></a><p class="alert__text"><i class="material-icons alert__icon">error</i> An error occured when submitting the form</p></div>');
+            form.append({{ alertbox('error', 'An error occured when submitting the form') | tojson }});
           } // No comma or semicolon here
         });
       });