Merge pull request #2353 from wallabag/assets-fix

Basically, fix everything

.eslintrc.json

@@ -1,4 +1,10 @@
 {
-    "extends": "airbnb",
-    "parser": "babel-eslint"
+    "extends": "airbnb-base",
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true
+    },
+    "rules": {
+        "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "optionalDependencies": true, "peerDependencies": true}]
+    }
 }

.gitignore

@@ -21,8 +21,10 @@
 /vendor/
 
 # Assets and user uploads
-/web/bundles/
-/web/uploads/
+web/uploads/
+!web/bundles
+web/bundles/*
+!web/bundles/wallabagcore
 
 # Build
 /app/build
@@ -43,9 +45,8 @@ docker/data/
 composer.lock
 
 # assets stuff
-/node_modules/
-!app/Resources/static/lib
-app/Resources/static/lib/*
-/bin
+node_modules/
+bin
+app/Resources/build/
 !/src/Wallabag/CoreBundle/Resources/public
-/src/Wallabag/CoreBundle/Resources/public/*
+/src/Wallabag/CoreBundle/Resources/public/*

.travis.yml

@@ -42,9 +42,7 @@ matrix:
     fast_finish: true
     include:
         - php: 7.0
-          env: CS_FIXER=run VALIDATE_TRANSLATION_FILE=run DB=sqlite
-        - php: 7.0
-          env: DB=sqlite ASSETS=build
+          env: CS_FIXER=run VALIDATE_TRANSLATION_FILE=run ASSETS=build DB=sqlite
     allow_failures:
         - php: 7.1
         - php: nightly
@@ -66,13 +64,15 @@ before_script:
 install:
     - if [[ $ASSETS = build ]]; then source ~/.nvm/nvm.sh && nvm install 5.0; fi;
     - if [[ $ASSETS = build ]]; then npm install -g npm@latest; fi;
+    - if [[ $ASSETS = build ]]; then npm install; fi;
 
 before_install:
     - if [[ $TRAVIS_REPO_SLUG = wallabag/wallabag ]]; then cp .composer-auth.json ~/.composer/auth.json; fi;
 
 script:
-    - travis_wait bash install_dev.sh
+    - travis_wait bash composer install -o  --no-interaction --no-progress --prefer-dist
     - ant prepare-$DB
     - if [[ $VALIDATE_TRANSLATION_FILE = '' ]]; then phpunit -v ; fi;
     - if [[ $CS_FIXER = run ]]; then php bin/php-cs-fixer fix src/ --verbose --dry-run ; fi;
     - if [[ $VALIDATE_TRANSLATION_FILE = run ]]; then php bin/console lint:yaml src/Wallabag/CoreBundle/Resources/translations -v ; fi;
+    - if [[ $ASSETS = build ]]; then ./node_modules/grunt-cli/bin/grunt tests; fi;

Gruntfile.js

@@ -3,8 +3,9 @@ module.exports = function (grunt) {
 
   grunt.initConfig({
     appDir: 'app/Resources/static',
-    buildDir: 'web/bundles/wallabagcore',
+    buildDir: 'app/Resources/build',
     modulesDir: 'node_modules',
+    releaseDir: 'web/bundles/wallabagcore',
 
     postcss: {
       material: {
@@ -20,7 +21,7 @@ module.exports = function (grunt) {
           ],
         },
         src: '<%= buildDir %>/material.css',
-        dest: '<%= buildDir %>/themes/material/css/style.min.css',
+        dest: '<%= releaseDir %>/themes/material/css/style.min.css',
       },
       baggy: {
         options: {
@@ -35,7 +36,7 @@ module.exports = function (grunt) {
           ],
         },
         src: '<%= buildDir %>/baggy.css',
-        dest: '<%= buildDir %>/themes/baggy/css/style.min.css',
+        dest: '<%= releaseDir %>/themes/baggy/css/style.min.css',
       },
     },
     concat: {
@@ -92,7 +93,7 @@ module.exports = function (grunt) {
     uglify: {
       material: {
         files: {
-          '<%= buildDir %>/themes/material/js/material.min.js':
+          '<%= releaseDir %>/themes/material/js/material.min.js':
             ['<%= buildDir %>/material.browser.js'],
         },
         options: {
@@ -101,7 +102,7 @@ module.exports = function (grunt) {
       },
       baggy: {
         files: {
-          '<%= buildDir %>/themes/baggy/js/baggy.min.js':
+          '<%= releaseDir %>/themes/baggy/js/baggy.min.js':
             ['<%= buildDir %>/baggy.browser.js'],
         },
         options: {
@@ -122,30 +123,25 @@ module.exports = function (grunt) {
         src: 'annotator.min.js',
         dest: '<%= buildDir %>/themes/_global/js/',
       },
-    },
-    symlink: {
       baggyfonts: {
         files: [
           {
             expand: true,
-            overwrite: true,
             cwd: '<%= modulesDir %>/icomoon-free-npm/Font',
             src: 'IcoMoon-Free.ttf',
-            dest: '<%= buildDir %>/themes/baggy/fonts/',
+            dest: '<%= releaseDir %>/themes/baggy/fonts/',
           },
           {
             expand: true,
-            overwrite: true,
             cwd: '<%= modulesDir %>/ptsans-npm-webfont/fonts',
-            src: '*',
-            dest: '<%= buildDir %>/themes/baggy/fonts/',
+            src: 'ptsansbold.woff',
+            dest: '<%= releaseDir %>/themes/baggy/fonts/',
           },
           {
             expand: true,
-            overwrite: true,
             cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/',
-            src: '*',
-            dest: '<%= buildDir %>/themes/baggy/fonts/',
+            src: ['MaterialIcons-Regular.eot', 'MaterialIcons-Regular.woff2', 'MaterialIcons-Regular.woff', 'MaterialIcons-Regular.ttf'],
+            dest: '<%= releaseDir %>/themes/baggy/fonts/',
           },
         ],
       },
@@ -156,31 +152,26 @@ module.exports = function (grunt) {
             overwrite: true,
             cwd: '<%= modulesDir %>/icomoon-free-npm/Font',
             src: 'IcoMoon-Free.ttf',
-            dest: '<%= buildDir %>/themes/material/fonts',
-          },
-          {
-            expand: true,
-            overwrite: true,
-            cwd: '<%= modulesDir %>/materialize-css/',
-            src: 'font',
-            dest: '<%= buildDir %>/themes/material',
+            dest: '<%= releaseDir %>/themes/material/fonts',
           },
           {
             expand: true,
             overwrite: true,
             cwd: '<%= modulesDir %>/roboto-fontface/fonts/Roboto',
             src: '*',
-            dest: '<%= buildDir %>/themes/material/fonts/',
+            dest: '<%= releaseDir %>/themes/material/font/roboto',
           },
           {
             expand: true,
             overwrite: true,
             cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/',
-            src: '*',
-            dest: '<%= buildDir %>/themes/material/fonts/',
+            src: ['MaterialIcons-Regular.eot', 'MaterialIcons-Regular.woff2', 'MaterialIcons-Regular.woff', 'MaterialIcons-Regular.ttf'],
+            dest: '<%= releaseDir %>/themes/material/fonts/',
           },
         ],
       },
+    },
+    symlink: {
       pics: {
         files: [
           {
@@ -188,7 +179,7 @@ module.exports = function (grunt) {
             overwrite: true,
             cwd: '<%= appDir %>/themes/_global/',
             src: 'img',
-            dest: '<%= buildDir %>/themes/_global/',
+            dest: '<%= releaseDir %>/themes/_global/',
           },
         ],
       },
@@ -203,13 +194,23 @@ module.exports = function (grunt) {
       all: {
         src: ['./<%= buildDir %>'],
       },
+      release: {
+        src: ['./<%= releaseDir %>/*'],
+      }
     },
+    eslint: {
+      target: ['<%= appDir %>/themes/material/js/init.js', '<%= appDir %>/themes/baggy/js/init.js']
+    },
+    stylelint: {
+      target: ['<%= appDir %>/themes/material/css/*.css', '<%= appDir %>/themes/baggy/css/*.css']
+    }
+
   });
 
   grunt.registerTask(
     'fonts',
     'Install fonts',
-    ['symlink:baggyfonts', 'symlink:materialfonts']
+    ['copy:baggyfonts', 'copy:materialfonts']
     );
 
   grunt.registerTask(
@@ -221,7 +222,7 @@ module.exports = function (grunt) {
   grunt.registerTask(
     'default',
     'Build and install everything',
-    ['clean', 'copy:pickerjs', 'concat', 'browserify', 'uglify', 'postcss', 'symlink']
+    ['clean', 'copy:pickerjs', 'concat', 'browserify', 'uglify', 'postcss', 'copy', 'symlink']
     );
 
   grunt.registerTask(
@@ -229,4 +230,10 @@ module.exports = function (grunt) {
     'Compiles the stylesheets.',
     ['clean:css', 'concat:cssMaterial', 'concat:cssBaggy', 'postcss']
   );
+
+  grunt.registerTask(
+      'tests',
+      'Test css and js style conformity',
+      ['eslint', 'stylelint', 'default']
+  )
 };

README.md

@@ -10,14 +10,14 @@ More informations on our website: [wallabag.org](https://wallabag.org)
 
 # Install wallabag
 
-If you don't have it yet, please [install composer](https://getcomposer.org/download/) or be sure to use Composer 1.2 (`composer selfupdate` can help you about that). Read [our documentation](http://doc.wallabag.org) to have more information about installation. 
+If you don't have it yet, please [install composer](https://getcomposer.org/download/) or be sure to use Composer 1.2 (`composer selfupdate` can help you about that). Read [our documentation](http://doc.wallabag.org) to have more information about installation.
 Then you can install wallabag by executing the following commands:
 
 ```
     git clone https://github.com/wallabag/wallabag.git
     cd wallabag
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console server:run --env=prod
 ```
 

app/Resources/static/themes/baggy/css/main.css

@@ -796,6 +796,15 @@ a.add-to-wallabag-link-after::after {
   text-transform: none;
   line-height: 1;
 
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  -o-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -838,7 +847,7 @@ a.add-to-wallabag-link-after::after {
 }
 
 .icon-twitter::before {
-  content: "\ea91";
+  content: "\ea96";
 }
 
 .icon-down-open::before {
@@ -877,6 +886,22 @@ a.add-to-wallabag-link-after::after {
   content: "\e936";
 }
 
+.icon-eye::before {
+  content: "\e9ce";
+}
+
+.icon-no-eye::before {
+  content: "\e9d1";
+}
+
+.icon-calendar::before {
+  content: "\e953";
+}
+
+.icon-time::before {
+  content: "\e952";
+}
+
 /* .icon-image class, for image-based icons
   ========================================================================== */
 
@@ -898,6 +923,11 @@ a.add-to-wallabag-link-after::after {
   background-image: url("../../_global/img/icons/diaspora-icon--black.png");
 }
 
+/* shaarli */
+.icon-image--shaarli {
+  background-image: url("../../_global/img/icons/shaarli.png");
+}
+
 /* ==========================================================================
    Icon selected
    ========================================================================== */

app/Resources/static/themes/baggy/js/init.js

@@ -1,10 +1,10 @@
+import { savePercent, retrievePercent } from '../../_global/js/tools';
+import { toggleSaveLinkForm } from './uiTools';
+
 const $ = global.jquery = require('jquery');
 require('jquery.cookie');
 require('jquery-ui-browserify');
 const annotator = require('annotator');
-import { savePercent, retrievePercent } from '../../_global/js/tools.js';
-import { split, extractLast } from './autoCompleteTags.js';
-import { toggleSaveLinkForm } from './uiTools.js';
 
 
 $.fn.ready(() => {

app/Resources/static/themes/material/css/main.css

@@ -62,8 +62,8 @@
   font-feature-settings: 'liga';
 }
 
-[class^="icon-"],
-[class*=" icon-"] {
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
   font-family: icomoon;
   speak: none;
   font-style: normal;
@@ -71,12 +71,64 @@
   font-variant: normal;
   text-transform: none;
   line-height: 1;
+  background-size: 24px;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  -o-font-feature-settings: "liga";
+  font-feature-settings: "liga";
 
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-image {
+  background-size: 16px;
+  background-repeat: no-repeat;
+  padding-right: 1em !important;
+  padding-left: 1em !important;
+}
+
+.icon-eye::before {
+  content: "\e9ce";
+}
+
+.icon-no-eye::before {
+  content: "\e9d1";
+}
+
+.icon-calendar::before {
+  content: "\e953";
+}
+
+.icon-mail::before {
+  content: "\ea86";
+}
+
+.icon-time::before {
+  content: "\e952";
+}
+
+/* Carrot (http://carrot.org) */
+.icon-image--carrot {
+  background-image: url("../../_global/img/icons/carrot-icon--black.png");
+}
+
+/* Diaspora */
+.icon-image--diaspora {
+  background-image: url("../../_global/img/icons/diaspora-icon--black.png");
+}
+
+/* Shaarli */
+.icon-image--shaarli {
+  background-image: url("../../_global/img/icons/shaarli.png");
+}
+
 body {
   display: flex;
   min-height: 100vh;
@@ -416,8 +468,9 @@ main ul.row {
   color: #fff;
 }
 
-.quickstart .card .card-action a, .quickstart .card .card-action a:hover {
-    color: #fff !important;
+.quickstart .card .card-action a,
+.quickstart .card .card-action a:hover {
+  color: #fff !important;
 }
 
 .settings .div_tabs {
@@ -643,7 +696,7 @@ main ul.row {
 }
 
 .icon-twitter::before {
-  content: "\ea91";
+  content: "\ea96";
 }
 
 .icon-apple::before {

app/Resources/static/themes/material/js/init.js

@@ -1,8 +1,10 @@
+import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
+
 const $ = require('jquery');
+
 global.jQuery = $;
 require('materialize'); // eslint-disable-line
 const annotator = require('annotator');
-import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js';
 
 $(document).ready(() => {
   // sideNav

app/config/tests/parameters_test.sqlite.yml

@@ -5,4 +5,4 @@ parameters:
     test_database_name: ~
     test_database_user: ~
     test_database_password: ~
-    test_database_path: "%kernel.root_dir%/../data/db/wallabag_testHU.sqlite"
+    test_database_path: "%kernel.root_dir%/../data/db/wallabag_test.sqlite"

docs/de/user/installation.rst

@@ -56,7 +56,7 @@ Um wallabag selbst zu installieren, musst du die folgenden Kommandos ausführen:
     git clone https://github.com/wallabag/wallabag.git
     cd wallabag
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console wallabag:install --env=prod
 
 Um PHPs eingebauten Server zu starten und zu testen, ob alles korrekt installiert wurde, kannst du folgendes Kommando ausführen:

docs/de/user/upgrade-2.0.x-2.1.y.rst

@@ -15,7 +15,7 @@ Das neueste Release ist auf https://www.wallabag.org/pages/download-wallabag.htm
     git fetch origin
     git fetch --tags
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console doctrine:migrations:migrate --env=prod
     php bin/console cache:clear --env=prod
 

docs/en/user/installation.rst

@@ -55,7 +55,7 @@ To install wallabag itself, you must run the following commands:
     git clone https://github.com/wallabag/wallabag.git
     cd wallabag
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console wallabag:install --env=prod
 
 To start PHP's build-in server and test if everything did install correctly, you can do:

docs/en/user/upgrade-2.0.x-2.1.y.rst

@@ -15,7 +15,7 @@ The last release is published on https://www.wallabag.org/pages/download-wallaba
     git fetch origin
     git fetch --tags
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console doctrine:migrations:migrate --env=prod
     php bin/console cache:clear --env=prod
 

docs/fr/user/installation.rst

@@ -53,7 +53,7 @@ Pour installer wallabag, vous devez exécuter ces commandes :
     git clone https://github.com/wallabag/wallabag.git
     cd wallabag
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console wallabag:install --env=prod
 
 Pour démarrer le serveur interne à php et vérifier que tout s'est installé correctement, vous pouvez exécuter :

docs/fr/user/upgrade-2.0.x-2.1.y.rst

@@ -15,7 +15,7 @@ La dernière version de wallabag est publiée à cette adresse : https://www.wal
     git fetch origin
     git fetch --tags
     git checkout 2.1.0
-    ASSETS=build ./install.sh
+    SYMFONY_ENV=prod composer install --no-dev -o --prefer-dist
     php bin/console doctrine:migrations:migrate --env=prod
     php bin/console cache:clear --env=prod
 

install.sh

@@ -1,13 +0,0 @@
-#! /usr/bin/env bash
-
-echo " > Installing PHP dependencies through Composer..."
-SYMFONY_ENV=prod composer install --no-interaction --no-progress --prefer-dist -o --no-dev
-
-chmod ugo+x vendor/mouf/nodejs-installer/bin/local/npm
-echo " > Downloading librairies through npm..."
-vendor/mouf/nodejs-installer/bin/local/npm install
-
-echo " > Concat, minify and installing assets..."
-node_modules/grunt/bin/grunt
-
-echo " > Install finished"

install_dev.sh

@@ -1,14 +0,0 @@
-#! /usr/bin/env bash
-
-echo " > Installing PHP dependencies (including dev) through Composer..."
-composer install -o  --no-interaction --no-progress --prefer-dist
-
-if [[ $ASSETS == 'build' || $TRAVIS_BUILD_DIR == '' ]]; then
-    echo " > Downloading librairies through npm..."
-    npm install
-
-    echo " > Concat, minify and installing assets..."
-    grunt
-fi
-
-echo " > Install finished"

package.json

@@ -7,42 +7,6 @@
   "directories": {
     "doc": "docs"
   },
-  "dependencies": {
-    "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
-    "autoprefixer": "^6.3.6",
-    "babel-preset-es2015": "^6.14.0",
-    "babelify": "^7.3.0",
-    "browserify": "^13.0.0",
-    "browserify-shim": "^3.8.12",
-    "cssnano": "^3.5.2",
-    "es6-promise": "^3.2.1",
-    "grunt": ">=0.4.0",
-    "grunt-browserify": "^5.0.0",
-    "grunt-cli": "^1.2.0",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-concat": "^1.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-symlink": "^1.0.0",
-    "grunt-contrib-uglify": "^1.0.0",
-    "grunt-postcss": "^0.8.0",
-    "hammerjs": "^2.0.6",
-    "icomoon-free-npm": "0.0.0",
-    "jquery": "^2.2.4",
-    "jquery-ui-browserify": "^1.11.0-pre-seelio",
-    "jquery.cookie": "^1.4.1",
-    "jquery.tinydot": "^0.2.1",
-    "load-grunt-tasks": "^3.4.1",
-    "material-design-icons-iconfont": "^3.0.0",
-    "materialize-css": "0.97.5",
-    "npm": "^3.8.3",
-    "pickadate": "^3.5.6",
-    "pixrem": "^3.0.0",
-    "postcss-cssnext": "^2.5.1",
-    "prismjs": "^1.4.1",
-    "ptsans-npm-webfont": "0.0.4",
-    "roboto-fontface": "^0.6.0",
-    "through": "^2.3.8"
-  },
   "engines": {
     "node": ">0.12"
   },
@@ -93,10 +57,47 @@
     "url": "https://github.com/wallabag/wallabag/issues"
   },
   "devDependencies": {
+    "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
+    "autoprefixer": "^6.3.6",
     "babel-eslint": "^6.1.2",
-    "eslint": "^2.13.1",
-    "eslint-config-airbnb": "^9.0.1",
+    "babel-preset-es2015": "^6.14.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.0",
+    "browserify-shim": "^3.8.12",
+    "cssnano": "^3.5.2",
+    "es6-promise": "^3.2.1",
+    "eslint": "^3.7.1",
+    "eslint-config-airbnb-base": "^8.0.0",
+    "eslint-plugin-import": "^1.16.0",
+    "grunt": ">=0.4.0",
+    "grunt-browserify": "^5.0.0",
+    "grunt-cli": "^1.2.0",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-symlink": "^1.0.0",
+    "grunt-contrib-uglify": "^1.0.0",
+    "grunt-eslint": "^19.0.0",
+    "grunt-postcss": "^0.8.0",
+    "grunt-stylelint": "^0.6.0",
+    "hammerjs": "^2.0.6",
+    "icomoon-free-npm": "0.0.0",
+    "jquery": "^2.2.4",
+    "jquery-ui-browserify": "^1.11.0-pre-seelio",
+    "jquery.cookie": "^1.4.1",
+    "jquery.tinydot": "^0.2.1",
+    "load-grunt-tasks": "^3.4.1",
+    "material-design-icons-iconfont": "^3.0.0",
+    "materialize-css": "0.97.5",
+    "npm": "^3.8.3",
+    "pickadate": "^3.5.6",
+    "pixrem": "^3.0.0",
+    "postcss-cssnext": "^2.5.1",
+    "prismjs": "^1.4.1",
+    "ptsans-npm-webfont": "0.0.4",
+    "roboto-fontface": "^0.6.0",
     "stylelint": "^7.3.1",
-    "stylelint-config-standard": "^13.0.2"
+    "stylelint-config-standard": "^13.0.2",
+    "through": "^2.3.8"
   }
 }

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig

@@ -21,12 +21,15 @@
 
                 <li><a title="{{ markAsReadLabel|trans }}" class="tool icon icon-check {% if entry.isArchived == 0 %}archive-off{% else %}archive{% endif %}" href="{{ path('archive_entry', { 'id': entry.id }) }}"><span>{{ markAsReadLabel|trans }}</span></a></li>
                 <li><a title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" class="tool icon icon-star {% if entry.isStarred == 0 %}fav-off{% else %}fav{% endif %}" href="{{ path('star_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span></a></li>
-                <li><a id="nav-btn-add-tag" title="{{ 'entry.view.left_menu.add_a_tag'|trans }}"><span>{{ 'entry.view.left_menu.add_a_tag'|trans }}</span></a></li>
+                <li><a id="nav-btn-add-tag" class="tool icon icon-price-tags" title="{{ 'entry.view.left_menu.add_a_tag'|trans }}"><span>{{ 'entry.view.left_menu.add_a_tag'|trans }}</span></a></li>
                 <li><a title="{{ 'entry.view.left_menu.delete'|trans }}" class="tool delete icon icon-trash" href="{{ path('delete_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.delete'|trans }}</span></a></li>
-                {% if craue_setting('share_public') %}<li><a href="{{ path('share', {'id': entry.id }) }}" target="_blank" class="tool public" title="{{ 'entry.view.left_menu.public_link'|trans }}"><span>{{ 'entry.view.left_menu.public_link'|trans }}</span></a></li> <li><a href="{{ path('delete_share', {'id': entry.id }) }}" class="tool public" title="{{ 'entry.view.left_menu.delete_public_link'|trans }}"><span>{{ 'entry.view.left_menu.delete_public_link'|trans }}</span></a></li>{% endif %}
+                {% if craue_setting('share_public') %}
+                    <li><a href="{{ path('share', {'id': entry.id }) }}" target="_blank" class="tool icon icon-eye" title="{{ 'entry.view.left_menu.public_link'|trans }}"><span>{{ 'entry.view.left_menu.public_link'|trans }}</span></a></li>
+                    <li><a href="{{ path('delete_share', {'id': entry.id }) }}" class="tool icon icon-no-eye" title="{{ 'entry.view.left_menu.delete_public_link'|trans }}"><span>{{ 'entry.view.left_menu.delete_public_link'|trans }}</span></a></li>
+                {% endif %}
                 {% if craue_setting('share_twitter') %}<li><a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@wallabagapp" target="_blank" class="tool twitter icon icon-twitter" title="Tweet"><span>Tweet</span></a></li>{% endif %}
                 {% if craue_setting('share_mail') %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" class="tool email icon icon-mail" title="Email"><span>Email</span></a></li>{% endif %}
-                {% if craue_setting('share_shaarli') %}<li><a href="{{ craue_setting('shaarli_url') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="shaarli"><span>shaarli</span></a></li>{% endif %}
+                {% if craue_setting('share_shaarli') %}<li><a href="{{ craue_setting('shaarli_url') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool icon-image icon-image--shaarli" title="shaarli"><span>shaarli</span></a></li>{% endif %}
                 {% if craue_setting('share_diaspora') %}<li><a href="{{ craue_setting('diaspora_url') }}/bookmarklet?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}&notes=&v=1&noui=1&jump=doclose" target="_blank" class="tool diaspora icon-image icon-image--diaspora" title="diaspora"><span>diaspora</span></a></li>{% endif %}
                 {% if craue_setting('carrot') %}<li><a href="https://secure.carrot.org/GiveAndGetBack.do?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}" class="tool carrot icon-image icon-image--carrot" target="_blank" title="carrot"><span>Carrot</span></a></li>{% endif %}
                 {% if craue_setting('show_printlink') %}<li><a title="{{ 'entry.view.left_menu.print'|trans }}" class="tool icon icon-print" href="javascript: window.print();"><span>{{ 'entry.view.left_menu.print'|trans }}</span></a></li>{% endif %}
@@ -38,18 +41,18 @@
         </div>
 
         <div id="article-informations">
-            <div class="link mdi-action-today">
-                {{ 'entry.view.created_at'|trans }}: {{ entry.createdAt|date('Y-m-d') }}
-            </div>
+            <i class="tool icon icon-calendar" title="{{ 'entry.view.created_at'|trans }}">
+                {{ entry.createdAt|date('Y-m-d') }}
+            </i>
 
-            <div class="link mdi-action-query-builder">
+            <i class="tool icon icon-time">
                 {% set readingTime = entry.readingTime / app.user.config.readingSpeed %}
                 {% if readingTime > 0 %}
-                    {{ 'entry.list.reading_time_minutes'|trans({'%readingTime%': readingTime|round})|capitalize }}
+                    {{ 'entry.list.reading_time_minutes_short'|trans({'%readingTime%': readingTime|round}) }}
                 {% else %}
-                    {{ 'entry.list.reading_time_less_one_minute'|trans|raw }}
+                    {{ 'entry.list.reading_time_less_one_minute_short'|trans|raw }}
                 {% endif %}
-            </div>
+            </i>
 
             {% set nbAnnotations = entry.annotations | length %}
             <span class="tool link"><i class="material-icons link">comment</i> {{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations | length) }}</span>

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig

@@ -106,48 +106,50 @@
                 <ul>
                     {% if craue_setting('share_public') %}
                         <li>
-                            <a href="{{ path('share', {'id': entry.id }) }}" target="_blank" class="public icon-link" title="{{ 'entry.view.left_menu.public_link'|trans }}">
+                            <a href="{{ path('share', {'id': entry.id }) }}" target="_blank" title="{{ 'entry.view.left_menu.public_link'|trans }}" class="tool icon-eye">
                                 <span>{{ 'entry.view.left_menu.public_link'|trans }}</span>
                             </a>
                         </li>
                         <li>
-                            <a href="{{ path('delete_share', {'id': entry.id }) }}" class="tool public" title="{{ 'entry.view.left_menu.delete_public_link'|trans }}">
+                            <a href="{{ path('delete_share', {'id': entry.id }) }}" title="{{ 'entry.view.left_menu.delete_public_link'|trans }}" class="tool icon-no-eye">
                                 <span>{{ 'entry.view.left_menu.delete_public_link'|trans }}</span>
                             </a>
                         </li>
                     {% endif %}
                     {% if craue_setting('share_twitter') %}
                         <li>
-                            <a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@wallabagapp" target="_blank" class="tool twitter icon icon-twitter" title="twitter">
+                            <a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@wallabagapp" target="_blank" class="tool icon-twitter" title="twitter">
                                 <span>twitter</span>
                             </a>
                         </li>
                     {% endif %}
                     {% if craue_setting('share_shaarli') %}
                         <li>
-                            <a href="{{ craue_setting('shaarli_url') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="shaarli">
+                            <a href="{{ craue_setting('shaarli_url') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank">
+                                <i class="tool icon-image icon-image--shaarli" title="shaarli"></i>
                                 <span>shaarli</span>
                             </a>
                         </li>
                     {% endif %}
                     {% if craue_setting('share_diaspora') %}
                         <li>
-                            <a href="{{ craue_setting('diaspora_url') }}/bookmarklet?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}&notes=&v=1&noui=1&jump=doclose" target="_blank" class="tool diaspora icon-image icon-image--diaspora" title="diaspora}">
+                            <a href="{{ craue_setting('diaspora_url') }}/bookmarklet?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}&notes=&v=1&noui=1&jump=doclose" target="_blank">
+                                <i class="tool icon-image icon-image--diaspora" title="diaspora"></i>
                                 <span>diaspora*</span>
                             </a>
                         </li>
                     {% endif %}
                     {% if craue_setting('carrot') %}
                         <li>
-                            <a href="https://secure.carrot.org/GiveAndGetBack.do?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}" class="tool carrot icon-image icon-image--carrot" target="_blank" title="carrot">
+                            <a href="https://secure.carrot.org/GiveAndGetBack.do?url={{ entry.url|url_encode }}&title={{ entry.title|url_encode }}" target="_blank" title="carrot">
+                                <i class="tool icon-image icon-image--carrot"></i>
                                 <span>Carrot</span>
                             </a>
                         </li>
                     {% endif %}
                     {% if craue_setting('share_mail') %}
                         <li>
-                            <a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" title="{{ 'entry.view.left_menu.share_email_label'|trans }}">
-                                <i class="material-icons">email</i>
+                            <a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" title="{{ 'entry.view.left_menu.share_email_label'|trans }}" class="tool email icon icon-mail">
                                 <span>{{ 'entry.view.left_menu.share_email_label'|trans }}</span>
                             </a>
                         </li>
@@ -211,7 +213,7 @@
         </header>
         <aside>
             {% set readingTime = entry.readingTime / app.user.config.readingSpeed %}
-            <span class="mdi-action-query-builder"></span>
+            <i class="material-icons">timer</i>
             <span class="link">
                 {% if readingTime > 0 %}
                     {{ 'entry.list.reading_time_minutes_short'|trans({'%readingTime%': readingTime|round}) }}
@@ -219,7 +221,7 @@
                     {{ 'entry.list.reading_time_less_one_minute_short'|trans|raw }}
                 {% endif %}
             </span>
-            <span class="mdi-action-today" title="{{ 'entry.view.created_at'|trans }}"> </span> <span class="link">{{ entry.createdAt|date('Y-m-d') }}</span>
+            <i class="material-icons" title="{{ 'entry.view.created_at'|trans }}">today</i><span class="link">{{ entry.createdAt|date('Y-m-d') }}</span>
             <a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e }}" class="tool">
             <i class="material-icons link">link</i> <span class="link">{{ entry.domainName|removeWww }}</span></a>
             <span class="tool"><i class="material-icons link">comment</i> <span class="link">{{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations | length) }}</span>

web/bundles/wallabagcore/themes/_global/img

@@ -0,0 +1 @@
+../../../../../app/Resources/static/themes/_global/img