Add new nopaque icons

web/app/static/css/material_design_icons.css → web/app/static/css/material_icons.css

@@ -4,14 +4,14 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(../fonts/material_design_icons/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: url(../fonts/material_icons/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
     local('MaterialIcons-Regular'),
-    url(../fonts/material_design_icons/MaterialIcons-Regular.ttf) format('truetype'),
-    url(../fonts/material_design_icons/MaterialIconsOutlined-Regular.otf) format('opentype'),
-    url(../fonts/material_design_icons/MaterialIconsRound-Regular.otf) format('opentype'),
-    url(../fonts/material_design_icons/MaterialIconsSharp-Regular.otf) format('opentype'),
-    url(../fonts/material_design_icons/MaterialIconsTwoTone-Regular.otf) format('opentype');
+    url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),
+    url(../fonts/material_icons/MaterialIconsOutlined-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsRound-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsSharp-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsTwoTone-Regular.otf) format('opentype');
 }
 
 .material-icons {

web/app/static/css/nopaque.css

@@ -125,16 +125,16 @@ indicator will show up how the column is sorted right now.; */
   content: "help";
 }
 .service[data-service="corpus-analysis"]:before {
-  content: "search";
+  content: "H";
 }
 .service[data-service="file-setup"]:before {
-  content: "burst_mode";
+  content: "E";
 }
 .service[data-service="nlp"]:before {
-  content: "format_textdirection_l_to_r";
+  content: "G";
 }
 .service[data-service="ocr"]:before {
-  content: "find_in_page";
+  content: "F";
 }
 .status[data-status]:before {
   content: attr(data-status);

web/app/static/css/nopaque_icons.css

+/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
+
+@font-face {
+  font-family: 'nopaque Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('nopaque Icons'),
+    local('nopaqueIcons-Regular'),
+    url(../fonts/nopaque_icons/nopaqueIcons-Regular.otf) format('opentype');
+}
+
+.nopaque-icons {
+  font-family: 'nopaque Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+.breadcrumb i.nopaque-icons {
+  display: inline-block;
+  float: left;
+  font-size: 24px;
+}
+
+.nopaque-icons {
+  text-rendering: optimizeLegibility;
+  -webkit-font-feature-settings: 'liga';
+     -moz-font-feature-settings: 'liga';
+          font-feature-settings: 'liga';
+}
+
+nav i.nopaque-icons {
+  display: block;
+  font-size: 24px;
+  height: 56px;
+  line-height: 56px;
+}
+
+nav .brand-logo i.nopaque-icons {
+  float: left;
+  margin-right: 15px;
+}
+
+nav ul a.btn > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-small > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-flat > .nopaque-icons, nav ul a.btn-floating > .nopaque-icons {
+  height: inherit;
+  line-height: inherit;
+}
+
+.input-field input[type=search]:focus:not(.browser-default) ~ .nopaque-icons {
+  color: #444;
+}
+
+.input-field input[type=search] ~ .nopaque-icons {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  color: transparent;
+  cursor: pointer;
+  font-size: 2rem;
+  -webkit-transition: .3s color;
+  transition: .3s color;
+}
+
+.sidenav li > a > i.nopaque-icons {
+  float: left;
+  height: 48px;
+  line-height: 48px;
+  margin: 0 32px 0 0;
+  width: 24px;
+  color: rgba(0, 0, 0, 0.54);
+}

web/app/static/js/nopaque/RessourceLists/JobList.js

@@ -82,7 +82,7 @@ class JobList extends RessourceList {
 }
 JobList.options = {
   item: `<tr>
-           <td><a class="btn-floating disabled"><i class="material-icons service"></i></a></td>
+           <td><a class="btn-floating disabled"><i class="nopaque-icons service"></i></a></td>
            <td><b class="title"></b><br><i class="description"></i></td>
            <td><span class="badge new status" data-badge-caption=""></span></td>
            <td class="right-align">

web/app/templates/corpora/corpus.html.j2

@@ -71,7 +71,7 @@
         </div>
         <div class="card-action right-align">
           <a class="analyse-corpus-trigger btn disabled waves-effect waves-light" href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">search</i>Analyze</a>
-          <a class="btn build-corpus-trigger disabled waves-effect waves-light" href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">build</i>Build</a>
+          <a class="btn build-corpus-trigger disabled waves-effect waves-light" href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}"><i class="nopaque-icons left">K</i>Build</a>
           <a class="btn disabled export-corpus-trigger waves-effect waves-light"><i class="material-icons left">import_export</i>Export</a>
           <a class="btn modal-trigger red waves-effect waves-light" data-target="delete-corpus-modal"><i class="material-icons left">delete</i>Delete</a>
         </div>

web/app/templates/main/dashboard.html.j2

@@ -131,7 +131,7 @@
                 <div class="card-panel center-align hoverable">
                   <br>
                   <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
-                    <i class="material-icons service" data-service="file-setup"></i>
+                    <i class="nopaque-icons service" data-service="file-setup"></i>
                   </a>
                   <p>&nbsp;</p>
                   <p class="file-setup-color-text"><b>File setup</b></p>
@@ -143,7 +143,7 @@
                 <div class="card-panel center-align hoverable">
                   <br>
                   <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
-                    <i class="material-icons service" data-service="ocr"></i>
+                    <i class="nopaque-icons service" data-service="ocr"></i>
                   </a>
                   <p>&nbsp;</p>
                   <p class="ocr-color-text"><b>Optical Character Recognition</b></p>
@@ -155,7 +155,7 @@
                 <div class="card-panel center-align hoverable">
                   <br>
                   <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
-                    <i class="material-icons service" data-service="nlp"></i>
+                    <i class="nopaque-icons service" data-service="nlp"></i>
                   </a>
                   <p>&nbsp;</p>
                   <p class="nlp-color-text"><b>Natural Language Processing</b></p>

web/app/templates/main/index.html.j2

@@ -33,22 +33,22 @@
         <div class="col s12">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons secondary-color-text">flash_on</i>
+              <i class="large nopaque-icons secondary-color-text">A</i>
               <p class="primary-color-text"><b>Speeds up your work</b></p>
               <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons secondary-color-text">cloud</i>
+              <i class="large nopaque-icons secondary-color-text">B</i>
               <p class="primary-color-text"><b>Cloud infrastructure</b></p>
               <p class="light">All computational work is processed within nopaque’s cloud infrastructure. You don't need to install any software. Great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons secondary-color-text">group</i>
+              <i class="large nopaque-icons secondary-color-text">C</i>
               <p class="primary-color-text"><b>User friendly</b></p>
               <p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons secondary-color-text">settings</i>
+              <i class="large nopaque-icons secondary-color-text">D</i>
               <p class="primary-color-text"><b>Meshing processes</b></p>
               <p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
             </div>
@@ -89,7 +89,7 @@
           <div class="row">
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
-                <i class="material-icons service" data-service="file-setup"></i>
+                <i class="nopaque-icons service" data-service="file-setup"></i>
               </a>
               <p>&nbsp;</p>
               <p class="file-setup-color-text"><b>File setup</b></p>
@@ -97,7 +97,7 @@
             </div>
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
-                <i class="material-icons service" data-service="ocr"></i>
+                <i class="nopaque-icons service" data-service="ocr"></i>
               </a>
               <p>&nbsp;</p>
               <p class="ocr-color-text"><b>Optical Character Recognition</b></p>
@@ -105,7 +105,7 @@
             </div>
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
-                <i class="material-icons service" data-service="nlp"></i>
+                <i class="nopaque-icons service" data-service="nlp"></i>
               </a>
               <p>&nbsp;</p>
               <p class="nlp-color-text"><b>Natural Language Processing</b></p>
@@ -113,7 +113,7 @@
             </div>
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
-                <i class="material-icons service" data-service="corpus-analysis"></i>
+                <i class="nopaque-icons service" data-service="corpus-analysis"></i>
               </a>
               <p>&nbsp;</p>
               <p class="corpus-analysis-color-text"><b>Corpus analysis</b></p>

web/app/templates/materialize/base.html.j2

@@ -11,7 +11,7 @@
     {% endblock metas %}
 
     {% block styles %}
-    <link href="{{ url_for('static', filename='css/material_design_icons.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/material_icons.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection" rel="stylesheet">
     {% endblock styles %}
     {% endblock head %}

web/app/templates/nopaque.html.j2

@@ -21,6 +21,7 @@
 <link href="{{ url_for('static', filename='css/materialize.sidenav-fixed.css') }}" media="screen,projection" rel="stylesheet">
 {% endif %}
 <link href="{{ url_for('static', filename='css/materialize.sticky-footer.css') }}" media="screen,projection" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/nopaque_icons.css') }}" media="screen,projection" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
 <style>
   .primary-color {background-color: {{ colors.primary }} !important;}
@@ -131,14 +132,14 @@
   <li><a href="{{ url_for('main.index') }}">nopaque</a></li>
   <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
   <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
-  <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="material-icons">book</i>My Corpora</a></li>
-  <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
+  <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="nopaque-icons">I</i>My Corpora</a></li>
+  <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="nopaque-icons">J</i>My Jobs</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Processes & Services</a></li>
-  <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
-  <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
-  <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
-  <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
+  <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="nopaque-icons">E</i>File setup</a></li>
+  <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="nopaque-icons">F</i>OCR</a></li>
+  <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="nopaque-icons">G</i>NLP</a></li>
+  <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="nopaque-icons">H</i>Corpus analysis</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Account</a></li>
   <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>

web/app/templates/services/corpus_analysis.html.j2

@@ -20,7 +20,7 @@
     <div class="col s12 m3 push-m9">
       <div class="center-align">
         <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-          <i class="material-icons service" data-service="corpus-analysis"></i>
+          <i class="nopaque-icons service" data-service="corpus-analysis"></i>
         </a>
       </div>
     </div>

web/app/templates/services/file-setup.html.j2

@@ -23,7 +23,7 @@
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
         <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-          <i class="material-icons service" data-service="file-setup"></i>
+          <i class="nopaque-icons service" data-service="file-setup"></i>
         </a>
       </div>
     </div>