diff --git a/web/app/static/css/material_design_icons.css b/web/app/static/css/material_icons.css
similarity index 60%
rename from web/app/static/css/material_design_icons.css
rename to web/app/static/css/material_icons.css
index becc223cd26b90bfc04418d0807fa17223488252..0e5303b5a8e57e299dbce0cbd31c4ca67832cbe8 100644
--- a/web/app/static/css/material_design_icons.css
+++ b/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 {
diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css
index 597701aa3692d923dc6a6824880b32d2bb72b0e6..c58a45ac8e15c5050e7623373f3f9ae5bd0816e5 100644
--- a/web/app/static/css/nopaque.css
+++ b/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);
diff --git a/web/app/static/css/nopaque_icons.css b/web/app/static/css/nopaque_icons.css
new file mode 100644
index 0000000000000000000000000000000000000000..395b8bc6698a33f8704c7b822fa2ea30e22ed3df
--- /dev/null
+++ b/web/app/static/css/nopaque_icons.css
@@ -0,0 +1,89 @@
+/* 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);
+}
diff --git a/web/app/static/fonts/material_design_icons/MaterialIcons-Regular.ttf b/web/app/static/fonts/material_icons/MaterialIcons-Regular.ttf
similarity index 100%
rename from web/app/static/fonts/material_design_icons/MaterialIcons-Regular.ttf
rename to web/app/static/fonts/material_icons/MaterialIcons-Regular.ttf
diff --git a/web/app/static/fonts/material_design_icons/MaterialIconsOutlined-Regular.otf b/web/app/static/fonts/material_icons/MaterialIconsOutlined-Regular.otf
similarity index 100%
rename from web/app/static/fonts/material_design_icons/MaterialIconsOutlined-Regular.otf
rename to web/app/static/fonts/material_icons/MaterialIconsOutlined-Regular.otf
diff --git a/web/app/static/fonts/material_design_icons/MaterialIconsRound-Regular.otf b/web/app/static/fonts/material_icons/MaterialIconsRound-Regular.otf
similarity index 100%
rename from web/app/static/fonts/material_design_icons/MaterialIconsRound-Regular.otf
rename to web/app/static/fonts/material_icons/MaterialIconsRound-Regular.otf
diff --git a/web/app/static/fonts/material_design_icons/MaterialIconsSharp-Regular.otf b/web/app/static/fonts/material_icons/MaterialIconsSharp-Regular.otf
similarity index 100%
rename from web/app/static/fonts/material_design_icons/MaterialIconsSharp-Regular.otf
rename to web/app/static/fonts/material_icons/MaterialIconsSharp-Regular.otf
diff --git a/web/app/static/fonts/material_design_icons/MaterialIconsTwoTone-Regular.otf b/web/app/static/fonts/material_icons/MaterialIconsTwoTone-Regular.otf
similarity index 100%
rename from web/app/static/fonts/material_design_icons/MaterialIconsTwoTone-Regular.otf
rename to web/app/static/fonts/material_icons/MaterialIconsTwoTone-Regular.otf
diff --git a/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.otf b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.otf
new file mode 100644
index 0000000000000000000000000000000000000000..37d2b481db591242a65a7b44e87dc49514f39f57
Binary files /dev/null and b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.otf differ
diff --git a/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..7dbe2a8be067ffa6183c661007ccf67317da9771
Binary files /dev/null and b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff differ
diff --git a/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff2 b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..47d012757fc2d1e4175aec08a2fdc25e47644134
Binary files /dev/null and b/web/app/static/fonts/nopaque_icons/nopaqueIcons-Regular.woff2 differ
diff --git a/web/app/static/js/nopaque/RessourceLists/JobList.js b/web/app/static/js/nopaque/RessourceLists/JobList.js
index 08724a3cfe2a961f3e5bb38385432bdb5a03eb1a..08a75439843fb969ddf8ec620cdd45a2ad314000 100644
--- a/web/app/static/js/nopaque/RessourceLists/JobList.js
+++ b/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">
diff --git a/web/app/templates/corpora/corpus.html.j2 b/web/app/templates/corpora/corpus.html.j2
index eabed2c16c9629ff2c7a07b4c11a8413f03d8688..91967fbb07879f311491059f63640dceef28d25d 100644
--- a/web/app/templates/corpora/corpus.html.j2
+++ b/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>
diff --git a/web/app/templates/main/dashboard.html.j2 b/web/app/templates/main/dashboard.html.j2
index 539d70c20e5547b8c12f40ecaefaf220186fdf31..1352148dd994811f79593f18354f555b9d089e49 100644
--- a/web/app/templates/main/dashboard.html.j2
+++ b/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> </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> </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> </p>
<p class="nlp-color-text"><b>Natural Language Processing</b></p>
diff --git a/web/app/templates/main/index.html.j2 b/web/app/templates/main/index.html.j2
index 0ded9824c5c82e4a347d8bdb4f02933bbaa31728..0300b614bbf669bea8633b68866165bb36849983 100644
--- a/web/app/templates/main/index.html.j2
+++ b/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> </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> </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> </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> </p>
<p class="corpus-analysis-color-text"><b>Corpus analysis</b></p>
diff --git a/web/app/templates/materialize/base.html.j2 b/web/app/templates/materialize/base.html.j2
index e7d585e7f43d9654524158c1d4d5a2e97f57eb01..28b03d45702dea8fd0312c9bdf2f3831ea2fe41a 100644
--- a/web/app/templates/materialize/base.html.j2
+++ b/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 %}
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index aabdfa995ce846ba17457934ee3e0d9a7e939759..0d6e04996e19598d90411e2b4264e82a609f4aae 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/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>
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index 91b82889ef7eda159d46b83529108a53a9db5e01..ff6e3a86fa47f08b40bf3b4a133308de4a475069 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/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>
diff --git a/web/app/templates/services/file-setup.html.j2 b/web/app/templates/services/file-setup.html.j2
index 2674545c2394db42a12d6c1687c31db0b41be509..b39fec385dc0842e36cfdfab19d587c93b0e2c38 100644
--- a/web/app/templates/services/file-setup.html.j2
+++ b/web/app/templates/services/file-setup.html.j2
@@ -23,7 +23,7 @@
<p class="hide-on-small-only"> </p>
<p class="hide-on-small-only"> </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>