Merge branch 'develop'

.babelrc

@@ -4,6 +4,7 @@
       {
         "modules": false
       }
-    ]
+    ],
+    "@babel/react"
   ]
 }

build.sh

@@ -13,12 +13,12 @@ current_OS=`uname`
 # For macOS (Darwin)
 if [ $current_OS == "Darwin" ]; then
     find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
-    find ./src/scss/ ./src/admin/scss/ -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5
+    find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5
     find ./composer.json -type f \( -name "composer.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-composer-build.md5
     find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-package-build.md5
 else
     find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
-    find ./src/scss/ ./src/admin/scss/ -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5
+    find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5
     find ./composer.json -type f \( -name "composer.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-composer-build.md5
     find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-package-build.md5
 fi

compile-sass.sh

@@ -8,13 +8,12 @@ command -v sass >/dev/null 2>&1 || {
  
 # Define o caminho.
 echo "Compilando Sass..."
-cd src/scss
- 
-sass -E 'UTF-8' --cache-location ../../.tmp/sass-cache-1 tainacan-embeds.scss:../assets/css/tainacan-embeds.css
 
-cd ../admin/scss
-sass -E 'UTF-8' --cache-location ../../../.tmp/sass-cache-2 tainacan-admin.scss:../../assets/css/tainacan-admin.css
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-1 src/scss/tainacan-embeds.scss:src/assets/css/tainacan-embeds.css
 
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-2 src/admin/scss/tainacan-admin.scss:src/assets/css/tainacan-admin.css
+
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-blocks-style.css
 
 echo "Compilação do Sass Concluído!"
 exit 0

docs/csv-importer.md

@@ -0,0 +1,100 @@
+# CSV Importer
+
+The CSV importer allows user to import items to a collection from a CSV (comma separated values) file.
+
+The input file is a standard CSV file, where each line will hold one item information, and each column will hold the value for one specific metadata. Also, the first line brings the column titles.
+
+When the user starts the importer process, he/she must choose the right file encoding the CSV was saved in (usually UTF-8), the column separator and the cell enclosure. All this options are set when the user generates the CSV file using a spreadsheet editor.
+
+In this section user will also inform the character (or characters) used to separate values in a multi-valued cell.
+
+After configuring the importer and choosing the target collection, the CSV file is uploaded and the user has the chance to map the columns present in the CSV to the metadata present in the target collection.
+
+If the metadata was not created beforehand, user can create and map metadata in this screen, or choose the "Create metadatum" option in the mapper. If this option is selected, Tainacan will automatically create a metadatum when the importer runs (see "Creating metadata on the fly" section below to learn how to tell tainacan the type and other attributes of the metadatum that will be created).
+
+
+## Special Columns
+
+Each column of the CSV must be mapped to a metadatum in the target collection. However, there are special columns that can be used to set the value for other aspects of the item. For example, the item status can be set to say the item is public to everyone, in draft or private to editors.
+
+The special columns that can be used are:
+
+* **special_item_status** - Inform the item status. Possible values are draft, private or publish.
+* **special_item_id** - Inform the item ID in the Tainacan database. This is useful when re-importing items and let the user decide wether to update existing items or ignore them and only add new items.
+* **special_document** - let the user inform the item document. See "Importing files and attachments"
+* **special_attachments** - let the user inform the attachments. See "Importing files and attachments"
+
+
+## Importing files and attachments
+
+If you also have files you want to import, that are related to the items in your CSV, you can use some special columns in your csv to do so.
+
+There are two special columns you can use: `special_document`, which will set the Document of your item, and `special_attachments` to add one or many attachments.
+
+The values for the special_document must be prepended with 'url:'', 'file:'' or 'text:'. This will indicate the Document Type.
+
+Example:
+
+```
+name, special_document
+An image,file:http://example.com/image.jpg
+A youtube video,url:http://youtube.com/?w=123456
+A text,text:This is a sample text
+```
+
+The values for the special_attachments is just a list of files. If you want to add many attachments, use the separator you set in the Multivalued Delimiter option.
+
+In either case, you can point to a file using a full URL, or just a file name. In this last case, you should set the option below to tell Tainacan where to find the files in your server. You can then upload them directly (via FTP for example) and tainacan will add them to your items.
+
+Example:
+
+```
+name, special_attachments
+An image,http://example.com/image.jpg
+Many images,http://example.com/image.jpg||http://example.com/image2.jpg||http://example.com/image3.jpg
+Images uploaded via FTP,myfolder/image.jpg||myfolder/image2.jpg
+```
+
+## Creating metadata on the fly
+
+When the user maps the columns found in the CSV file to the metadata present in the collection, he/she has can choose the "Create metadatum" option, so the importer will automatically create the metadata as it process the file.
+
+By default, it will create a public text metadatum, but you can inform tainacan the type and other features of the metadata in the header of the CSV.
+
+In the first line, where you declare the name of each column, you can add some information that will be used by the importer to create the metadatum_id.
+
+Each information about the metadatum will be separated by a pipe "|" character. 
+
+The first information must be the metadata name, and the second, the metadata type.
+
+For example:
+
+```
+Name,Subject|taxonomy,Date of creation|date
+```
+
+The natively supported types right now are:
+
+* text
+* textarea
+* taxonomy - when this type is used, a new taxonomy will be created
+* date - Values must be informed in YYYY-MM-DD format 
+* numeric 
+* relationship - Values must be the ID of the related item
+
+After the type, you can use keywords to inform other features:
+
+* multiple - can have multiple values 
+* required - is required
+* display_yes - display in lists: yes 
+* display_no - display in lists: not by default 
+* display_never - display in lists: never 
+* status_public - visible to everyone
+* status_private - visible only to editors 
+* collection_key_yes - set this meta as a collection key (there cannot be two items with the same value).
+
+Examples combining multiple features:
+
+```
+Name,Subject|taxonomy|multiple|required,Internal code|numeric|required|collection_key_yes|status_private
+```

docs/faceted-search.md

@@ -0,0 +1,21 @@
+# Faceted Search 
+
+Tainacan implements a faceted search for your collections.
+
+Filters are displayed in the left side of the screen and allow users to filter the results.
+
+By default, tainacan will filter the available values in each facet depending on the current filters selected. It means it will only display values that will bring at least one item in the results. Everytime the user selects on value from one filter, all the other values from all other filters are reduced. This helps users to refine their filters.
+
+If you want to disable this behavior, and always display all possible values for a filter, even if there is no items that will meet the criteria, add this to you `wp-config.php`:
+
+```
+define('TAINACAN_FACETS_DISABLE_FILTER_ITEMS', true);
+```
+
+Tainacan will also add the number of items found for each value of each filter. This, when used without a Elastic Search* integration, might have performance issues. So if you want to remove the items count from the filters, add this to your `wp-config.php`:
+
+```
+define('TAINACAN_FACETS_DISABLE_COUNT_ITEMS', true);
+```
+
+\* Note: Elastic Search integration for this feature is still under development

docs/release.md

@@ -21,7 +21,7 @@ git pull
 
 ### Edit version numbers
 
-Edit `src/readme.txt` and 'src/tainacan.php' and change the version numbers to `$NEW_VERSION`.
+Edit `src/readme.txt` and `src/tainacan.php` and change the version numbers to `$NEW_VERSION`.
 
 ### Set build to production mode
 
@@ -38,7 +38,7 @@ git commit -am "Releasing verion $NEW_VERSION"
 ```
 ./build.sh
 cd $BUILD_PATH
-rm admin/scss/.sass-cache
+rm -r admin/scss/.sass-cache
 ```
 
 ### Prepare SVN repo
@@ -106,6 +106,6 @@ git push --tags
 
 ### Set build back to development mode
 
-Once you go back to develop branch, remember editing `webpack.config.js` to set production mode.
+Once you go back to develop branch, remember editing `webpack.config.js` to set production mode to false.
 
 

docs/search-engine.md

@@ -1,6 +1,6 @@
 # Search engine
 
-In addition to the faceted search, which allows users to filter items by specific metadata, Tainacan also offers a free textual search.
+In addition to the [faceted search](faceted-search.md), which allows users to filter items by specific metadata, Tainacan also offers a free textual search.
 
 By default, when using this option to search, WordPress searches only inside the Title (post_title) and Description (post_content). This, of course, is very limited, and this article presents and discusses the approach Tainacan will take to face this issue.
 
@@ -8,18 +8,18 @@ There is'nt one silver bullet to solve this problem. In some cases, perhaps for
 
 An intermediary approach could be creating index tables and tokenizing strings. This would allow even to order results based on relevance. (There is at least one paid WordPress plugin that does that)
 
-Considering all these options, our current approach was to filter the SQL query built by the WordPress WP_Query object and include all the joins and wheres needed to search also in metadata and taxonomies values. This approach is the same of the "Search Everything" plugin we mention below.
+Considering all these options, our current approach was to filter the SQL query built by the WordPress WP_Query object and include all the joins and wheres needed to search also in metadata and taxonomies values. This approach is the same of the "[Search Everything](https://wordpress.org/plugins/search-everything/)" plugin.
+
+This approach might slow down search queries, specially the open keyword search input.
 
 If you want to disable this change to the default WordPress behavior you can do this by adding the following line to you `wp-config.php`. You should do this if you are going to use another plugin for this purpose to avoid conflicts.
 
 ```
 define('TAINACAN_DISABLE_DEFAULT_SEARCH_ENGINE', true);
 ```
+Our efforts right now are to improve the compatibility with [ElasticPress](https://wordpress.org/plugins/elasticpress/) plugin. Its already working for searches and most parts of the plugin. We are now starting to make it work to build the facets.
 
-Eventually we will develop our own search engine plugins, to replace this initial approach, but for now we are investigating existing plugins that could work well with Tainacan. Since we made sure to build things in the "WordPress way", and since Tainacan search uses the native `WP_Query` class to make it queries, any plugin that filters its behavior might work with Tainacan.
 
-We are only starting this investigation, and we will keep this page updated with our findings. This is not (yet) a list of recommendation.
+Our understanding is that, if a reposiory gets too big, it might need a more robust infrastructure and Elastic Search is our call. Therefore we are working to better integrate it with the ElasticPress plugin.
 
-* [Search Everything](https://wordpress.org/plugins/search-everything/): Expands the native WordPress search to also search in taxonomies and metadata. It does so by joining tables in `WP_Query` and therefore might have performance issues for large repositories. Its core funcionality is already present in Tainacan, but it does work very well with our plugin.
-
-* [ElasticPress](https://wordpress.org/plugins/elasticpress/): integrates WordPress with an Elastic Search server. We are starting to test Tainacan with this plugin.
+However, since we made sure to build things in the "WordPress way", and since Tainacan search uses the native `WP_Query` class to make it queries, any plugin that filters its behavior might work with Tainacan. So feel free to try other search plugins for WordPress and please let us know how well they work!

docs/vocabulary-importer.md

@@ -0,0 +1,35 @@
+# Vocabulary Importer
+
+This importer allows user to add terms to a given taxonomy. It's useful to import controlled vocabularies to a Tainacan installation.
+
+The file format used to import vocabularies is a CSV - comma separated values. Each line of the file will represent one term.
+
+For each term, you can inform the name of the term and it's definition.
+
+For example:
+
+```
+Term 1,Definition of term 1
+Term 2,Definition of term 2
+Term 3,Definition of term 3
+```
+
+It's also possible to inform hierarchy. You do so by leaving empty cells to the left, indicating the level in the hierarchy the term is in.
+
+Your spreadsheet will look like this:
+
+![Vocabulary spreadsheet](assets/vocabulary-importer-sample.png)
+
+This same spreadsheet, saved in CSV format, will look like this:
+
+```
+Term 1,Definition of term 1,,
+Term 2,Definition of term 2,,
+,1st Child of term 2,Definition of this term,
+,2nd Child of term 2,Definition of this term,
+,,Gran child,Definition of grand child
+Term 3,Definition of term 3,,
+Term 4,Definition of term 4,,
+```
+
+Once you have your CSV ready, fire the Vocabulary CSV Importer, choose the target Taxonomy (or create one), and hit "Run".

package-lock.json

@@ -123,6 +123,16 @@
         "@babel/types": "^7.0.0"
       }
     },
+    "@babel/helper-builder-react-jsx": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz",
+      "integrity": "sha512-ebJ2JM6NAKW0fQEqN8hOLxK84RbRz9OkUhGS/Xd5u56ejMfVbayJ4+LykERZCOUM6faa6Fp3SZNX3fcT16MKHw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0",
+        "esutils": "^2.0.0"
+      }
+    },
     "@babel/helper-call-delegate": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.1.0.tgz",
@@ -491,6 +501,15 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0.tgz",
+      "integrity": "sha512-PdmL2AoPsCLWxhIr3kG2+F9v4WH06Q3z+NoGVpQgnUNGcagXHq5sB3OXxkSahKq9TLdNMN/AJzFYSOo8UKDMHg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-object-rest-spread": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz",
@@ -719,6 +738,46 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.0.0.tgz",
+      "integrity": "sha512-BX8xKuQTO0HzINxT6j/GiCwoJB0AOMs0HmLbEnAvcte8U8rSkNa/eSCAY+l1OA4JnCVq2jw2p6U8QQryy2fTPg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.0.0.tgz",
+      "integrity": "sha512-0TMP21hXsSUjIQJmu/r7RiVxeFrXRcMUigbKu0BLegJK9PkYodHstaszcig7zxXfaBji2LYUdtqIkHs+hgYkJQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-react-jsx": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-self": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.0.0.tgz",
+      "integrity": "sha512-pymy+AK12WO4safW1HmBpwagUQRl9cevNX+82AIAtU1pIdugqcH+nuYP03Ja6B+N4gliAaKWAegIBL/ymALPHA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-source": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.0.0.tgz",
+      "integrity": "sha512-OSeEpFJEH5dw/TtxTg4nijl4nHBbhqbKL94Xo/Y17WKIf2qJWeIk/QeXACF19lG1vMezkxqruwnTjVizaW7u7w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0"
+      }
+    },
     "@babel/plugin-transform-regenerator": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.0.0.tgz",
@@ -835,6 +894,19 @@
         "semver": "^5.3.0"
       }
     },
+    "@babel/preset-react": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.0.0.tgz",
+      "integrity": "sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-transform-react-display-name": "^7.0.0",
+        "@babel/plugin-transform-react-jsx": "^7.0.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.0.0",
+        "@babel/plugin-transform-react-jsx-source": "^7.0.0"
+      }
+    },
     "@babel/template": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.1.0.tgz",
@@ -890,6 +962,11 @@
         }
       }
     },
+    "@brainhubeu/react-carousel": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.10.1.tgz",
+      "integrity": "sha512-W8BdG9mWsU9c9F4GKBcQH1R7QiLmn9KELJdCIXop6Fkc6GT9gk7o8SPVfvdBLTQF3h/DpOtJTIUSjtTucIKDMg=="
+    },
     "@vue/component-compiler-utils": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz",
@@ -1979,7 +2056,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "requires": {
         "camelcase": "^2.0.0",
@@ -5043,7 +5120,7 @@
     },
     "is-builtin-module": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "requires": {
         "builtin-modules": "^1.0.0"
@@ -5295,8 +5372,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -5401,7 +5477,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -5531,7 +5607,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -5601,13 +5676,22 @@
       }
     },
     "md5.js": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
-      "integrity": "sha1-6b296UogpawYsENA/Fdk1bCdkB0=",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
       "dev": true,
       "requires": {
         "hash-base": "^3.0.0",
-        "inherits": "^2.0.1"
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
       }
     },
     "mdi": {
@@ -5661,7 +5745,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
@@ -5962,7 +6046,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
@@ -6273,7 +6357,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "requires": {
         "lcid": "^1.0.0"
@@ -6810,6 +6894,15 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -6837,16 +6930,25 @@
       "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ=="
     },
     "public-encrypt": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
-      "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
       "dev": true,
       "requires": {
         "bn.js": "^4.1.0",
         "browserify-rsa": "^4.0.0",
         "create-hash": "^1.1.0",
         "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1"
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
       }
     },
     "pump": {
@@ -6979,6 +7081,28 @@
         }
       }
     },
+    "react": {
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
+      "integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
+      }
+    },
+    "react-dom": {
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
+      "integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7448,10 +7572,18 @@
         }
       }
     },
+    "schedule": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
+      "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
-      "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+      "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
       "dev": true,
       "requires": {
         "ajv": "^6.1.0",
@@ -7459,21 +7591,27 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz",
-          "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=",
+          "version": "6.5.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.4.tgz",
+          "integrity": "sha512-4Wyjt8+t6YszqaXnLDfMmG/8AlO5Zbcsy3ATHncCzjW/NoPzAId8AK6749Ybjmdt+kUY1gP60fCu46oDxPv/mg==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^1.0.0",
+            "fast-deep-equal": "^2.0.1",
             "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.3.0",
-            "uri-js": "^3.0.2"
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
           }
         },
-        "ajv-keywords": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
-          "integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74=",
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
         }
       }
@@ -7889,6 +8027,24 @@
         "urix": "^0.1.0"
       }
     },
+    "source-map-support": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.9.tgz",
+      "integrity": "sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
@@ -8366,6 +8522,153 @@
         "inherits": "2"
       }
     },
+    "terser": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-3.10.2.tgz",
+      "integrity": "sha512-+QrFoqBImmsQGB4c/HvaqgZynmbNvNBwoBxuu7fYXtq5EEtlLUzph+WimDj+xMkuqawXPMl2lgCIz81CdXvt+w==",
+      "dev": true,
+      "requires": {
+        "commander": "~2.17.1",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.6"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.1.0.tgz",
+      "integrity": "sha512-61lV0DSxMAZ8AyZG7/A4a3UPlrbOBo8NIQ4tJzLPAdGOQ+yoNC7l5ijEow27lBAL2humer01KLS6bGIMYQxKoA==",
+      "dev": true,
+      "requires": {
+        "cacache": "^11.0.2",
+        "find-cache-dir": "^2.0.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^1.4.0",
+        "source-map": "^0.6.1",
+        "terser": "^3.8.1",
+        "webpack-sources": "^1.1.0",
+        "worker-farm": "^1.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.5.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.4.tgz",
+          "integrity": "sha512-4Wyjt8+t6YszqaXnLDfMmG/8AlO5Zbcsy3ATHncCzjW/NoPzAId8AK6749Ybjmdt+kUY1gP60fCu46oDxPv/mg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        },
+        "find-cache-dir": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz",
+          "integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^1.0.0",
+            "pkg-dir": "^3.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8374,7 +8677,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
@@ -8561,167 +8864,6 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
-    "uglify-js": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
-      "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
-      "dev": true,
-      "requires": {
-        "commander": "~2.17.1",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "uglifyjs-webpack-plugin": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.0.1.tgz",
-      "integrity": "sha512-1HhCHkOB6wRCcv7htcz1QRPVbWPEY074RP9vzt/X0LF4xXm9l4YGd0qja7z88abDixQlnVwBjXsTBs+Xsn/eeQ==",
-      "dev": true,
-      "requires": {
-        "cacache": "^11.2.0",
-        "find-cache-dir": "^2.0.0",
-        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^1.4.0",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.0.0",
-        "webpack-sources": "^1.1.0",
-        "worker-farm": "^1.5.2"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.5.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
-          "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-          "dev": true
-        },
-        "find-cache-dir": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz",
-          "integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^1.0.0",
-            "pkg-dir": "^3.0.0"
-          }
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
-          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "p-try": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
-          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        },
-        "pkg-dir": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-          "dev": true,
-          "requires": {
-            "find-up": "^3.0.0"
-          }
-        },
-        "punycode": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "uri-js": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-          "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-          "dev": true,
-          "requires": {
-            "punycode": "^2.1.0"
-          }
-        }
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -8862,18 +9004,18 @@
       "dev": true
     },
     "uri-js": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-3.0.2.tgz",
-      "integrity": "sha1-+QuFhQf4HepNz7s8TD2/orVX+qo=",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
       "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       },
       "dependencies": {
         "punycode": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
-          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
           "dev": true
         }
       }
@@ -9185,9 +9327,9 @@
       }
     },
     "webpack": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.20.2.tgz",
-      "integrity": "sha512-75WFUMblcWYcocjSLlXCb71QuGyH7egdBZu50FtBGl2Nso8CK3Ej+J7bTZz2FPFq5l6fzCisD9modB7t30ikuA==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.22.0.tgz",
+      "integrity": "sha512-2+3EYFqyhPl12buLQ42QPHEEh8BHn3P9ipRvGRHhdfKJ1u9svhZ3QjhIoEdL5SeIhL5gfOZVbBnartYEabkEsg==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.7.8",
@@ -9295,12 +9437,6 @@
             "once": "^1.3.1"
           }
         },
-        "punycode": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -9342,15 +9478,6 @@
             "worker-farm": "^1.5.2"
           }
         },
-        "uri-js": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-          "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-          "dev": true,
-          "requires": {
-            "punycode": "^2.1.0"
-          }
-        },
         "webpack-sources": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
   },
   "dependencies": {
+    "@brainhubeu/react-carousel": "^1.10.1",
     "axios": "^0.18.0",
     "buefy": "^0.7.0",
     "bulma": "^0.7.2",
@@ -14,6 +15,8 @@
     "moment": "^2.22.2",
     "node-sass": "^4.9.4",
     "qs": "^6.5.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "t": "^0.5.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.17",
@@ -27,6 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.2.1",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
@@ -43,7 +47,7 @@
     "vue-custom-element": "^3.2.6",
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.20.2",
+    "webpack": "^4.22.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.9"
   }

src/admin/admin.vue

@@ -2,24 +2,34 @@
     <div 
             id="tainacan-admin-app" 
             class="columns is-fullheight">
-        <primary-menu 
-                :active-route="activeRoute"
-                :is-menu-compressed="isMenuCompressed"/>
-        <button 
-                class="is-hidden-mobile"
-                id="menu-compress-button"
-                @click="isMenuCompressed = !isMenuCompressed">
-            <b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />
-        </button>
-        <tainacan-header />
-        <tainacan-repository-subheader 
-                :is-repository-level="isRepositoryLevel"
-                :is-menu-compressed="isMenuCompressed"/>
-        <div 
-                id="repository-container"
-                class="column is-main-content">  
+        <template v-if="activeRoute == 'HomePage'">
+            <tainacan-header />
             <router-view /> 
-        </div>
+        </template>
+        <template v-else>
+            <primary-menu 
+                    :active-route="activeRoute"
+                    :is-menu-compressed="isMenuCompressed"/>
+            <button 
+                    class="is-hidden-mobile"
+                    id="menu-compress-button"
+                    @click="isMenuCompressed = !isMenuCompressed">
+                <span class="icon">
+                    <i 
+                            :class="{ 'tainacan-icon-arrowleft' : !isMenuCompressed, 'tainacan-icon-arrowright' : isMenuCompressed }"
+                            class="tainacan-icon tainacan-icon-20px"/>
+                </span>
+            </button>
+            <tainacan-header />
+            <tainacan-repository-subheader 
+                    :is-repository-level="isRepositoryLevel"
+                    :is-menu-compressed="isMenuCompressed"/>
+            <div 
+                    id="repository-container"
+                    class="column is-main-content">  
+                <router-view /> 
+            </div>
+        </template>
     </div>
 </template>
 
@@ -113,7 +123,7 @@
         top: 192px;
         left: 0px;
         max-width: 25px;
-        height: 20px;
+        height: 25px;
         width: 25px;
         border: none;
         background-color: $blue5;

src/admin/class-tainacan-admin.php

@@ -67,7 +67,8 @@ class Admin {
 	function add_theme_files() {
 		global $TAINACAN_BASE_URL;
 		
-		wp_enqueue_style( 'style', $TAINACAN_BASE_URL . '/assets/css/fonts/materialdesignicons.css' );
+		// wp_enqueue_style( 'style', $TAINACAN_BASE_URL . '/assets/css/fonts/materialdesignicons.css' );
+		wp_enqueue_style( 'style', $TAINACAN_BASE_URL . '/assets/css/fonts/tainacanicons.css' );
 		wp_enqueue_script('underscore', includes_url('js') . '/underscore.min.js' );
 	}
 	
@@ -170,21 +171,22 @@ class Admin {
 		}
 
 		$settings = [
-			'root'                   => esc_url_raw( rest_url() ) . 'tainacan/v2',
-			'root_wp_api'            => esc_url_raw( rest_url() ) . 'wp/v2/',
-			'wp_ajax_url'            => admin_url( 'admin-ajax.php' ),
-			'nonce'                  => wp_create_nonce( 'wp_rest' ),
-			'components'             => $components,
-			'i18n'                   => $tainacan_admin_i18n,
-			'user_caps'              => $user_caps,
-			'user_prefs'             => $prefs,
-			'base_url'               => $TAINACAN_BASE_URL,
-			'admin_url'              => admin_url(),
-			'custom_header_support'  => get_theme_support('custom-header'),
-			'registered_view_modes'  => \Tainacan\Theme_Helper::get_instance()->get_registered_view_modes(),
-		    	'exposer_mapper_param'   => \Tainacan\Exposers\Exposers::MAPPER_PARAM,
-			'exposer_type_param'     => \Tainacan\Exposers\Exposers::TYPE_PARAM,
-			'repository_name'	 => get_bloginfo('name')
+			'root'                   	=> esc_url_raw( rest_url() ) . 'tainacan/v2',
+			'root_wp_api'            	=> esc_url_raw( rest_url() ) . 'wp/v2/',
+			'wp_ajax_url'            	=> admin_url( 'admin-ajax.php' ),
+			'nonce'                  	=> wp_create_nonce( 'wp_rest' ),
+			'components'             	=> $components,
+			'i18n'                   	=> $tainacan_admin_i18n,
+			'user_caps'              	=> $user_caps,
+			'user_prefs'             	=> $prefs,
+			'base_url'               	=> $TAINACAN_BASE_URL,
+			'admin_url'              	=> admin_url(),
+			'theme_collection_list_url' => get_post_type_archive_link( 'tainacan-collection' ),
+			'custom_header_support'  	=> get_theme_support('custom-header'),
+			'registered_view_modes'  	=> \Tainacan\Theme_Helper::get_instance()->get_registered_view_modes(),
+		    'exposer_mapper_param'   => \Tainacan\Exposers\Exposers::MAPPER_PARAM,
+			'exposer_type_param'     	=> \Tainacan\Exposers\Exposers::TYPE_PARAM,
+			'repository_name'	 		=> get_bloginfo('name')
 		];
 
 		$maps = [

src/admin/components/advanced-search/advanced-search.vue

@@ -11,9 +11,9 @@
                     v-if="!metadataIsLoading"
                     class="content has-text-gray has-text-centered">
                 <p>
-                    <b-icon
-                            icon="format-list-checks"
-                            size="is-large"/>
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                    </span>
                 </p>
                 <p>{{ isRepositoryLevel ?
                     $i18n.get('info_there_are_no_metadata_in_repository_level' ) :
@@ -128,9 +128,9 @@
                         <button
                                 @click="removeThis(searchCriterion)"
                                 class="button is-white is-pulled-right">
-                            <b-icon
-                                    type="is-secondary"
-                                    icon="close"/>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-close"/>
+                            </span>
                         </button>
                     </div>
                 </b-field>
@@ -143,13 +143,11 @@
                     :class="{'add-link-advanced-search-header': isHeader, 'add-link-advanced-search': !isHeader }"
                     class="field column is-12">
                 <a
-                    @click="addSearchCriteria"
-                    style="font-size: 0.75rem;">
-                    <b-icon
-                            class="add-i"
-                            icon="plus-circle"
-                            size="is-small"
-                            type="is-secondary"/>
+                        @click="addSearchCriteria"
+                        style="font-size: 0.75rem;">
+                    <span class="icon is-small">
+                        <i class="has-text-secondary tainacan-icon tainacan-icon-add"/>
+                    </span>
                     {{ searchCriteria.length &lt;= 0 ?
                         $i18n.get('add_one_search_criterion') :
                          $i18n.get('add_another_search_criterion')

src/admin/components/bulk-edition/bulk-edition-modal.vue

@@ -173,9 +173,9 @@
                                 v-if="!bulkEditionProcedures[criterion].isDone && !bulkEditionProcedures[criterion].isExecuting"
                                 @click="removeThis(criterion)"
                                 class="button is-white is-pulled-right">
-                            <b-icon
-                                    type="is-gray4"
-                                    icon="close-circle-outline"/>
+                            <span class="icon">
+                                <i class="has-text-gray4 tainacan-icon tainacan-icon-cancel"/>
+                            </span>
                         </button>
 
                         <div
@@ -191,9 +191,9 @@
                                     animated
                                     multilined
                                     :label="bulkEditionProcedures[criterion].actionResult.constructor.name !== 'Object' && bulkEditionProcedures[criterion].actionResult === 1 ? `${bulkEditionProcedures[criterion].actionResult} ${$i18n.get('info_item_affected')}` : `${bulkEditionProcedures[criterion].actionResult} ${$i18n.get('info_items_affected')}`">
-                                <b-icon
-                                        type="is-success"
-                                        icon="check-circle"/>
+                                <span class="icon">
+                                    <i class="has-text-success tainacan-icon tainacan-icon-approvedcircle"/>
+                                </span>
                             </b-tooltip>
                         </div>
 
@@ -210,9 +210,9 @@
                                     animated
                                     multilined
                                     :label="bulkEditionProcedures[criterion].actionResult.constructor.name !== 'Object' && bulkEditionProcedures[criterion].actionResult === 1 ? `${bulkEditionProcedures[criterion].actionResult} ${$i18n.get('info_item_affected')}` : `${bulkEditionProcedures[criterion].actionResult} ${$i18n.get('info_items_affected')}`">
-                                <b-icon
-                                        type="is-yellow2"
-                                        icon="exclamation"/>
+                                <span class="icon">
+                                    <i class="has-text-yello2 tainacan-icon tainacan-icon-alertcircle"/>
+                                </span>
                             </b-tooltip>
                         </div>
 
@@ -233,9 +233,9 @@
                                     animated
                                     multilined
                                     :label="bulkEditionProcedures[criterion].actionResult.constructor.name === 'Object' ? (bulkEditionProcedures[criterion].actionResult.error_message ? bulkEditionProcedures[criterion].actionResult.error_message : bulkEditionProcedures[criterion].actionResult.message) : ''">
-                                <b-icon
-                                        type="is-red2"
-                                        icon="sync-alert"/>
+                                <span class="icon">
+                                    <i class="has-text-danger tainacan-icon tainacan-icon-processerror"/>
+                                </span>
                             </b-tooltip>
                         </button>
 
@@ -248,14 +248,14 @@
                                     bulkEditionProcedures[criterion].action"
                                 @click="executeBulkEditionProcedure(criterion)"
                                 class="button is-white is-pulled-right">
-                            <b-icon
-                                    type="is-gray4"
-                                    icon="play-circle"/>
+                            <span class="icon">
+                                <i class="has-text-gray4 tainacan-icon tainacan-icon-play"/>
+                            </span>
                         </button>
 
                         <div v-if="bulkEditionProcedures[criterion].isExecuting">
                             <b-icon
-                                    class="tainacan-loader"
+                                    class="mdi-loader"
                                     type="is-success"
                                     icon="loading"/>
                         </div>
@@ -711,7 +711,7 @@
         cursor: not-allowed !important;
     }
 
-    .tainacan-loader {
+    .mdi-loader {
         -webkit-animation: spin 2s linear infinite; /* Safari */
         animation: spin 2s linear infinite;
     }

src/admin/components/edition/collection-edition-form.vue

@@ -28,6 +28,7 @@
                                 @blur="updateSlug"
                                 @focus="clearErrors('name')"/>
                     </b-field>
+
                     <!-- Hook for extra Form options -->
                     <template 
                             v-if="formHooks != undefined && 
@@ -65,18 +66,18 @@
                                         id="button-edit-thumbnail" 
                                         :aria-label="$i18n.get('label_button_edit_thumb')"
                                         @click.prevent="thumbnailMediaFrame.openFrame($event)">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="pencil" />
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-edit"/>
+                                    </span>
                                 </a>
                                 <a 
                                         class="button is-rounded is-secondary"
                                         id="button-delete-header-image" 
                                         :aria-label="$i18n.get('label_button_delete_thumb')" 
                                         @click="deleteThumbnail()">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="delete" />
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-delete"/>
+                                    </span>
                                 </a>
                             </div>
                         </div>
@@ -122,9 +123,9 @@
                                 <a 
                                         target="_blank"
                                         @click.prevent="removeCoverPage()">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="close"/>
+                                    <span class="icon is-small">
+                                        <i class="tainacan-icon tainacan-icon-close"/>
+                                    </span>
                                 </a>
                             </span>
                         </div>
@@ -134,15 +135,17 @@
                             <a 
                                     target="_blank" 
                                     :href="coverPage.link">
-                                <eye-icon :style="{fill: isNewCollection ? '#01295c' : '#298596' }" />
+                                <span class="icon is-small">
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
+                                </span>
                             </a>
                             &nbsp;&nbsp;
                             <a 
                                     target="blank" 
                                     :href="coverPageEditPath">
-                                <b-icon 
-                                        size="is-small"
-                                        icon="pencil"/>
+                                <span class="icon is-small">
+                                    <i class="tainacan-icon tainacan-icon-edit"/>
+                                </span>
                             </a>
                         </span>
                         <br>
@@ -151,11 +154,10 @@
                                 :class="{'disabled': form.enable_cover_page != 'yes'}"
                                 target="_blank"  
                                 :href="newPagePath">
-                            <b-icon
-                                    icon="plus-circle"
-                                    size="is-small"
-                                    type="is-secondary"/>
-                                {{ $i18n.get('label_create_new_page') }}</a>                        
+                            <span class="icon is-small">
+                                <i class="tainacan-icon tainacan-icon-add"/>
+                            </span>
+                            {{ $i18n.get('label_create_new_page') }}</a>                        
                     </b-field>
 
                     <!-- Enabled View Modes ------------------------------- --> 
@@ -176,7 +178,9 @@
                                         position="is-top-right"
                                         type="button">
                                     <span>{{ $i18n.get('label_enabled_view_modes') }}</span>
-                                    <b-icon icon="menu-down"/>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                                    </span>
                                 </button>
                                 <b-dropdown-item
                                         v-for="(viewMode, index) in Object.keys(registeredViewModes)"
@@ -264,8 +268,8 @@
                                     :native-value="statusOption.value">
                                 <span class="icon has-text-gray">
                                     <i 
-                                        class="mdi mdi-18px"
-                                        :class="'mdi-' + getStatusIcon(statusOption.value)"/>
+                                        class="tainacan-icon tainacan-icon-18px"
+                                        :class="'tainacan-icon-' + getStatusIcon(statusOption.value)"/>
                                 </span>
                                 {{ statusOption.label }}
                             </b-radio>
@@ -290,18 +294,18 @@
                                         id="button-edit-header-image" 
                                         :aria-label="$i18n.get('label_button_edit_header_image')"
                                         @click="headerImageMediaFrame.openFrame($event)">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="pencil" />
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-edit"/>
+                                    </span>
                                 </a>
                                 <a 
                                         class="button is-rounded is-secondary"
                                         id="button-delete-header-image" 
                                         :aria-label="$i18n.get('label_button_delete_thumb')" 
                                         @click="deleteHeaderImage()">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="delete" />
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-delete"/>
+                                    </span>
                                 </a>
                             </div>     
                         </div>
@@ -440,11 +444,28 @@
                             type="button"
                             @click="cancelBack">{{ $i18n.get('cancel') }}</button>
                 </div>
+                
+                <div 
+                        style="margin-left: auto;"
+                        class="control">
+                    <button
+                            v-if="isNewCollection"
+                            id="button-submit-goto-metadata"
+                            @click.prevent="onSubmit('metadata')"
+                            class="button is-turquoise5">{{ $i18n.get('label_save_goto_metadata') }}</button>
+                </div>
+                 <div class="control">
+                    <button
+                            v-if="isNewCollection"
+                            id="button-submit-goto-filter"
+                            @click.prevent="onSubmit('filters')"
+                            class="button is-turquoise5">{{ $i18n.get('label_save_goto_filter') }}</button>
+                </div>
                 <div class="control">
                     <button
                             id="button-submit-collection-creation"
-                            @click.prevent="onSubmit"
-                            class="button is-success">{{ $i18n.get('save') }}</button>
+                            @click.prevent="onSubmit('items')"
+                            class="button is-success">{{ $i18n.get('finish') }}</button>
                 </div>
             </div>
             <p class="help is-danger">{{ formErrorMessage }}</p> 
@@ -460,7 +481,6 @@
 import { mapActions } from 'vuex';
 import wpMediaFrames from '../../js/wp-media-frames';
 import FileItem from '../other/file-item.vue';
-import EyeIcon from '../other/eye-icon.vue';
 import { wpAjax, formHooks } from '../../js/mixins';
 
 export default {
@@ -529,8 +549,7 @@ export default {
         }
     },
     components: {
-        FileItem,
-        EyeIcon
+        FileItem
     },
     methods: {
         ...mapActions('collection', [
@@ -569,7 +588,7 @@ export default {
                     this.isUpdatingSlug = false;
                 });
         }, 500),
-        onSubmit() {
+        onSubmit(goTo) {
            
             this.isLoading = true;
             this.form.moderators_ids = [];
@@ -617,8 +636,14 @@ export default {
 
                 if (this.fromImporter)
                     this.$router.go(-1);
-                else
-                    this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
+                else {
+                    if (goTo == 'metadata')
+                        this.$router.push(this.$routerHelper.getCollectionMetadataPath(this.collectionId));
+                    else if (goTo == 'filters')
+                        this.$router.push(this.$routerHelper.getCollectionFiltersPath(this.collectionId));
+                    else
+                        this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
+                }
             })
             .catch((errors) => {
                 for (let error of errors.errors) {     
@@ -802,11 +827,11 @@ export default {
         },
         getStatusIcon(status) {
             switch(status) {
-                case 'publish': return 'earth';
-                case 'private': return 'lock';
-                case 'draft': return 'clipboard-text';
+                case 'publish': return 'public';
+                case 'private': return 'private';
+                case 'draft': return 'draft';
                 case 'trash': return 'delete';
-                default: return 'file';
+                default: return 'item';
             }
         }
     },
@@ -934,7 +959,7 @@ export default {
             display: inherit;
             padding: 0;
             margin: 0;
-            margin-top: 1px;
+            margin-top: -2px;
             font-size: 18px;
         }
     }
@@ -1010,20 +1035,12 @@ export default {
     }
     .selected-cover-page-buttons {
         float: right;
-        padding: 4px 6px;
-        .icon { font-size: 20px; }   
-        .eye-icon {
-            position: relative;
-            top: 2px;         
-        }
+        padding: 4px 6px;  
         &.disabled {
             pointer-events: none;
             cursor: not-allowed;
            
            .icon { color: $gray2; }
-            .eye-icon {
-                fill: $gray2 !important;
-            }
         }
     }
     .status-radios {

src/admin/components/edition/filter-edition-form.vue

@@ -112,10 +112,9 @@
                         class="button is-white is-pulled-right"
                         :aria-label="$i18n.getFrom('items','edit_item')"
                         @click.prevent="showEditMaxOptions = true">
-                    <b-icon
-                            size="is-small"
-                            type="is-secondary"
-                            icon="pencil"/>
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/>
+                    </span>
                 </button>
             </div>
             <div
@@ -129,10 +128,9 @@
                 <button
                         @click.prevent="showEditMaxOptions = false"
                         class="button is-white is-pulled-right">
-                    <b-icon
-                            size="is-small"
-                            type="is-secondary"
-                            icon="close"/>
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/>
+                    </span>
                 </button>
             </div>
         </b-field>

src/admin/components/edition/importer-edition-form.vue

@@ -50,11 +50,11 @@
                                     tag="a" 
                                     class="is-inline add-link"     
                                     :to="{ path: $routerHelper.getNewCollectionPath(), query: { fromImporter: true }}">
-                                <b-icon
-                                        icon="plus-circle"
-                                        size="is-small"
-                                        type="is-secondary"/>
-                                    {{ $i18n.get('new_blank_collection') }}</router-link>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-add"/>
+                                </span>
+                                {{ $i18n.get('new_blank_collection') }}
+                            </router-link>
                         </div>
                     </b-field>
                     <!-- File Source input -->
@@ -74,9 +74,9 @@
                             <section class="drop-inner">
                                 <div class="content has-text-centered">
                                     <p>
-                                        <b-icon
-                                                icon="upload"
-                                                size="is-large"/>
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-upload"/>
+                                        </span>
                                     </p>
                                     <p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
                                 </div>
@@ -90,7 +90,7 @@
                                     target="_blank"
                                     @click.prevent="importerFile = undefined">
                                 <span class="icon">
-                                    <i class="mdi mdi-18px mdi-close"/>
+                                    <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close"/>
                                 </span>
                             </a>
                         </div>

src/admin/components/edition/importer-mapping-form.vue

@@ -59,6 +59,9 @@
                             <option :value="undefined">
                                 {{ $i18n.get('label_select_metadatum') }}
                             </option>
+                            <option :value="'create_metadata' + index">
+                                {{ $i18n.get('label_create_metadatum') }}
+                            </option>
                             <option
                                     v-for="(metadatum, index) of collectionMetadata"
                                     :key="index"
@@ -124,11 +127,10 @@
                             v-if="collectionId != null && collectionId != undefined"
                             class="is-inline is-pulled-right add-link has-text-secondary"
                             @click="createNewMetadatum()">
-                        <b-icon
-                                icon="plus-circle"
-                                size="is-small"
-                                type="is-secondary"/>
-                            {{ $i18n.get('label_add_more_metadata') }}</a>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-add"/>
+                        </span>
+                        {{ $i18n.get('label_add_more_metadata') }}</a>
                 </div>
                 <div 
                         v-if="importerSourceInfo == undefined || 
@@ -214,7 +216,8 @@ export default {
             'updateImporterOptions',
             'fetchImporterSourceInfo',
             'updateImporterCollection',
-            'runImporter'
+            'runImporter',
+            'fetchMappingImporter'
         ]),
         ...mapActions('collection', [
             'fetchCollectionsForParent'
@@ -266,6 +269,13 @@ export default {
             .then((metadata) => {
                 this.collectionMetadata = JSON.parse(JSON.stringify(metadata));
                 this.isFetchingCollectionMetadata = false;
+
+                this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId })
+                    .then(res => {
+                        if( res ) {
+                            this.mappedCollection['mapping'] = res;
+                        }
+                    })
             })
             .catch((error) => {
                 this.$console.error(error);

src/admin/components/edition/item-bulk-edition-form.vue

@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <b-loading
+                :is-full-page="false"
+                :active.sync="isLoading"
+                :can-cancel="false"/>
+        <div class="tainacan-page-title">
+            <h1>{{ $i18n.get('add_items_bulk') }}</h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
+        <form
+                v-if="!isLoading"
+                class="tainacan-form" 
+                label-width="120px">
+                
+            <!-- File Source input -->
+            <b-field :addons="false">
+                <label class="label">{{ $i18n.get('label_documents_upload') }}</label>
+                <br>
+                <b-upload
+                        native
+                        v-model="submitedFileList"
+                        drag-drop
+                        multiple
+                        @input="uploadFiles()"
+                        class="source-file-upload">
+                    <section class="drop-inner">
+                        <div class="content has-text-centered">
+                            <p>
+                                <b-icon
+                                        icon="upload"
+                                        size="is-large"/>
+                            </p>
+                            <p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
+                        </div>
+                    </section>
+                </b-upload>
+            </b-field>
+        
+            <div class="document-list">
+
+                <!-- Sequence Progress Info -->
+                <div class="sequence-progress-info">
+                    <p v-if="uploadedItems.length > 0 && uploadedItems.length != amountFinished">
+                        <span class="icon is-small has-text-secondary">
+                            <i class="mdi mdi-18px mdi-autorenew"/>
+                        </span>
+                        {{ $i18n.get('label_upload_file_prepare_items') }}
+                    </p>
+                    <p v-if="uploadedItems.length > 0 && uploadedItems.length == amountFinished">
+                        <span class="icon is-small has-text-success">
+                            <i class="mdi mdi-18px mdi-checkbox-marked-circle"/>
+                        </span>
+                        {{ $i18n.get('label_process_completed') }}
+                    </p>
+                    <p    
+                            v-if="uploadedItems.length > 0 && (uploadedItems.length - amountFinished) > 1"
+                            class="has-text-gray">
+                        {{ (uploadedItems.length - amountFinished) + " " + $i18n.get('label_files_remaining') }}
+                    </p>
+                    <p    
+                            v-if="uploadedItems.length > 0 && (uploadedItems.length - amountFinished) == 1"
+                            class="has-text-gray">
+                        {{ "1 " + $i18n.get('label_file_remaining') }}
+                    </p>
+                </div>
+
+                <!-- Sequence Progress Bar -->
+                <div 
+                        v-if="uploadedItems.length > 0"
+                        :style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }"
+                        class="sequence-progress"/>
+                <div    
+                        v-if="uploadedItems.length > 0"
+                        class="sequence-progress-background"/>
+                
+                <!-- Uploaded Items -->
+                <transition-group name="item-appear">
+                    <div 
+                            class="document-item"
+                            v-for="(item, index) of uploadedItems"
+                            :key="index">
+                        <img 
+                                v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
+                                class="document-thumb"
+                                :alt="item.title"
+                                :src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small : (item.thumbnail.thumb ? item.thumbnail.thumb : thumbPlaceholderPath)" > 
+                        <span 
+                            class="document-name"
+                            v-html="item.title" />                            
+                        <span 
+                                v-if="item.errorMessage != undefined" 
+                                class="help is-danger">
+                            {{ item.errorMessage }}
+                        </span>                       
+                        <div class="document-process-state">
+                            <span 
+                                    v-if="(item.errorMessage == undefined) && (item.document == '' || item.document_type == 'empty')"
+                                    class="icon has-text-success loading-icon">
+                                <div class="control has-icons-right is-loading is-clearfix" />
+                            </span>  
+                            <span 
+                                    v-if="item.document != '' && item.document_type != 'empty'"
+                                    class="icon has-text-success">
+                                <i class="mdi mdi-24px mdi-checkbox-marked-circle" />
+                            </span>  
+                        </div>   
+                        <div 
+                                v-if="item.document != '' && item.document_type != 'empty'"
+                                class="document-actions">
+                            <span 
+                                    v-tooltip="{
+                                        content: $i18n.get('label_button_delete_document'),
+                                        autoHide: false,
+                                        placement: 'auto-start'
+                                    }"
+                                    class="icon has-text-secondary action-icon"
+                                    @click="deleteOneItem(item.id, index)">
+                                <i class="mdi mdi-18px mdi-delete"/>
+                            </span>
+                        </div>                 
+                    </div>
+                </transition-group>
+            </div>
+            <footer class="footer">
+                <div class="form-submission-footer field is-grouped form-submit">
+                    <div class="control">
+                        <button 
+                                type="button"
+                                class="button is-outlined" 
+                                @click.prevent="$router.go(-1)" 
+                                slot="trigger">{{ $i18n.get('cancel') }}</button>
+                    </div>
+                    <div 
+                            style="margin-left: auto;"
+                            class="control">
+                        <button 
+                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished) || isCreatingBulkEditGroup"
+                                class="button is-secondary" 
+                                :class="{'is-loading': isCreatingSequenceEditGroup }"
+                                @click.prevent="sequenceEditGroup()"
+                                type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>
+                    </div>
+                    <div class="control">
+                        <button 
+                                :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished) || isCreatingSequenceEditGroup"
+                                class="button is-secondary" 
+                                :class="{'is-loading': isCreatingBulkEditGroup }"
+                                @click.prevent="createBulkEditGroup()"
+                                type="submit">{{ $i18n.get('label_bulk_edit_items') }}</button>
+                    </div>
+                </div>
+            </footer>
+        </form>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import CustomDialog from '../other/custom-dialog.vue';
+
+export default {
+    name: 'ItemBulkEditionForm',
+    data(){
+        return {
+            collectionId: '',
+            isLoading: false,
+            isCreatingBulkEditGroup: false,
+            isCreatingSequenceEditGroup: false,
+            submitedFileList: [],
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
+            uploadedItems: [],
+            amountFinished: 0
+        }
+    },
+    computed: {
+        uploadedFileList() {
+            return this.getFiles();
+        }
+    },
+    methods: {
+        ...mapActions('collection', [
+            'sendFile',
+            'cleanFiles',
+            'deleteItem'
+        ]),
+         ...mapGetters('collection', [
+            'getFiles',
+        ]),
+        ...mapActions('item', [
+            'sendItem',
+            'updateItemDocument',
+        ]),
+        ...mapActions('bulkedition', [
+            'createEditGroup',
+            'setStatusInBulk',
+            'setBulkAddItems'
+        ]),
+        uploadFiles() {
+            
+            for (let file of this.submitedFileList) {
+
+                // Creates draft Item
+                let data = {
+                    collection_id: this.collectionId, 
+                    status: 'auto-draft', 
+                    title: file.name
+                };
+                this.sendItem(data)
+                    .then(item => {
+
+                        let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
+                        if ( index >= 0)
+                            this.$set( this.uploadedItems, index, item );
+                        else 
+                            this.uploadedItems.push( item );
+                        
+                        // Uploads Media Document
+                        this.sendFile(file)
+                            .then((uploadedFile) => {
+                                
+                                // Updates Item with Document
+                                this.updateItemDocument({ 
+                                        item_id: item.id, 
+                                        document: new String(uploadedFile.id), 
+                                        document_type: 'attachment' 
+                                    })
+                                    .then((item) => {     
+                                        this.amountFinished++;
+
+                                        let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
+                                        if ( index >= 0)
+                                            this.$set( this.uploadedItems, index, item);
+                                        else 
+                                            this.uploadedItems.unshift( item );
+                                    })
+                                    .catch((error) => {
+                                        this.$console.error(error);
+                                    });
+                            })
+                            .catch((error) => {
+
+                                let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
+                                if ( index >= 0)
+                                    this.uploadedItems.splice(index, 1);
+
+                                item.errorMessage = error.data.message;
+                                this.$toast.open({
+                                    message: item.errorMessage + ": " + file.name,
+                                    type: 'is-danger',
+                                    position: 'is-bottom',
+                                    duration: 3500
+                                });
+             
+                                this.$console.error(error);
+                            });
+                })
+                .catch((error) => {
+                    this.$console.error(error)
+                });
+
+                    
+            }
+        },
+        sequenceEditGroup() {
+            let onlyItemIds = this.uploadedItems.map(item => item.id);
+            this.isCreatingSequenceEditGroup = true;
+            this.createEditGroup({
+                object: onlyItemIds,
+                collectionID: this.collectionId
+            }).then((group) => {
+                let sequenceId = group.id;
+                this.setStatusInBulk({
+                    groupID: sequenceId,
+                    collectionID: this.collectionId,
+                    bodyParams: { value: 'draft' }
+                }).then(() => {
+                    this.isCreatingSequenceEditGroup = true;
+                    this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, sequenceId, 1));
+                });
+            });
+        },
+        createBulkEditGroup() {
+            // Sends to store, so we can retrieve in next page.
+            this.setBulkAddItems(this.uploadedItems);
+
+            let onlyItemIds = this.uploadedItems.map(item => item.id);
+
+            this.isCreatingBulkEditGroup = true;
+            this.createEditGroup({
+                object: onlyItemIds,
+                collectionID: this.collectionId
+            }).then((group) => {
+                let groupId = group.id;
+                this.setStatusInBulk({
+                    groupID: groupId,
+                    collectionID: this.collectionId,
+                    bodyParams: { value: 'draft' }
+                }).then(() => {
+                    this.isCreatingBulkEditGroup = false;
+                    this.$router.push(this.$routerHelper.getItemMetadataBulkAddPath(this.collectionId, groupId));
+                });
+            }); 
+        },
+        deleteOneItem(itemId, index) {
+            this.$modal.open({
+                parent: this,
+                component: CustomDialog,
+                props: {
+                    icon: 'alert',
+                    title: this.$i18n.get('label_warning'),
+                    message: this.isOnTrash ? this.$i18n.get('info_warning_item_delete') : this.$i18n.get('info_warning_item_trash'),
+                    onConfirm: () => {
+                        this.teste
+                        this.deleteItem({
+                            itemId: itemId
+                        }).then(() => {
+                            this.uploadedItems.splice(index, 1); 
+                            this.amountFinished --;
+                        });
+                    }
+                }
+            });
+        },
+    },
+    created() {
+        // Obtains collection ID
+        this.collectionId = this.$route.params.collectionId;
+
+        this.cleanFiles();
+        this.setBulkAddItems([]);
+
+        // Updates Collection BreadCrumb
+        this.$root.$emit('onCollectionBreadCrumbUpdate', [
+            { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+            { path: '', label: this.$i18n.get('add_items_bulk') }
+        ]);
+    }
+   
+}
+</script>
+
+<style lang="scss" scoped>
+
+    @import "../../scss/_variables.scss";
+
+
+    .page-container {
+
+        &>.tainacan-form {
+            margin-bottom: 110px;
+        }
+
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                flex-shrink: 1;
+                flex-grow: 1;
+            }
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 3px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
+        }
+        .source-file-upload {
+            width: 100%;
+            padding: 0.75rem $page-side-padding;
+            display: grid;
+        }
+        .document-list {
+            display: inline-block;
+            width: 100%;
+            padding: 1rem 8.333333%;
+
+            .document-item {
+                display: flex;
+                flex-wrap: nowrap;
+                width: 100%;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.5rem 0.75rem;
+                position: relative;
+                cursor: default;
+
+                .document-thumb {
+                    max-height: 42px;
+                    max-width: 42px;
+                    margin-right: 1rem;
+                }
+
+                .document-name {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                    white-space: nowrap;
+                }
+
+                .document-process-state {
+                    margin-left: auto;
+                    
+                    .loading-icon .control.is-loading::after {
+                        position: relative !important;
+                        right: 0;
+                        top: 0;
+                    }
+                }
+
+                .document-actions {
+                    position: absolute;
+                    right: 0;
+                    background: $gray2;
+                    height: 100%;
+                    display: none;
+                    justify-content: center;
+                    visibility: hidden;
+                    align-items: center;
+                    width: 42px;
+
+                    .icon {
+                        cursor: pointer;
+                    }
+                }
+
+                &:hover {
+                    background-color: $gray1;
+
+                    .document-actions {
+                        display: flex;
+                        visibility: visible;
+                    }
+                }
+
+                .help.is-danger {
+                    margin-left: auto;
+                    width: 100%;
+                    text-align: right;
+                }
+            }
+            .sequence-progress-info {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 0.25rem;
+
+                .i::before {
+                    font-size: 18px;
+                    margin-left: 0.5rem;
+                }
+            }
+            .sequence-progress {
+                height: 5px;
+                background: $turquoise5;
+                width: 0%;
+                transition: width 0.2s;
+                margin-bottom: 1rem;
+            }
+            .sequence-progress-background {
+                height: 5px;
+                background: $gray3;
+                width: 100%;
+                top: -21px;
+                z-index: -1;
+                position: relative;
+                margin-bottom: 1rem;
+            }        
+        }
+
+        .footer {
+            padding: 18px $page-side-padding;
+            position: absolute;
+            bottom: 0;
+            z-index: 999999;
+            background-color: $gray1;
+            width: 100%;
+            height: 65px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            left: 0;
+
+            .form-submission-footer {    
+                .button {
+                    margin-left: 16px;
+                    margin-right: 6px;
+                }
+            }
+        }
+    }
+
+</style>

src/admin/components/edition/item-edition-form.vue

@@ -7,21 +7,37 @@
         <button 
                 id="metadata-column-compress-button"
                 @click="isMetadataColumnCompressed = !isMetadataColumnCompressed">
-            <b-icon :icon="isMetadataColumnCompressed ? 'menu-left' : 'menu-right'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : isMetadataColumnCompressed, 'tainacan-icon-arrowright' : !isMetadataColumnCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
         </button>
         <div class="tainacan-page-title">
-            <h1 v-if="isCreatingNewItem">{{ $i18n.get('title_create_item_collection') + ' ' }}<span style="font-weight: 600;">{{ collectionName }}</span></h1>
-            <h1 v-else>{{ $i18n.get('title_edit_item') + ' ' }}<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span></h1>
-            <a 
-                    @click="$router.go(-1)"
-                    class="back-link has-text-secondary">
-                {{ $i18n.get('back') }}
-            </a>
+            <h1 v-if="isCreatingNewItem">
+                {{ $i18n.get('title_create_item_collection') + ' ' }}
+                <span style="font-weight: 600;">{{ collectionName }}</span>
+                <span 
+                        v-if="(item != null && item != undefined && item.status != undefined && !isLoading)"
+                        class="status-tag">{{ $i18n.get(item.status) }}</span>
+            </h1>
+            <h1 v-else>
+                {{ $i18n.get('title_edit_item') + ' ' }}
+                <span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span>
+                <span 
+                        v-if="(item != null && item != undefined)"
+                        class="status-tag">{{ $i18n.get(item.status) }}</span>
+                <a 
+                        @click="$router.go(-1)"
+                        class="back-link has-text-secondary">
+                    {{ $i18n.get('back') }}
+                </a>
+            </h1>
             <hr>
         </div>
         <transition 
                 mode="out-in"
-                :name="isOnSequenceEdit && sequenceRightDirection != undefined ? (sequenceRightDirection ? 'page-right' : 'page-left') : ''">
+                :name="(isOnSequenceEdit && sequenceRightDirection != undefined) ? (sequenceRightDirection ? 'page-right' : 'page-left') : ''">
             <form
                     v-if="!isLoading"
                     class="tainacan-form"
@@ -62,9 +78,9 @@
                                                 id="button-edit-document"
                                                 :aria-label="$i18n.get('label_button_edit_document')"
                                                 @click.prevent="setFileDocument($event)">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="pencil" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-edit"/>
+                                            </span>
                                         </a>
                                         <a
                                                 class="button is-rounded is-secondary"
@@ -72,9 +88,9 @@
                                                 id="button-delete-document"
                                                 :aria-label="$i18n.get('label_button_delete_document')"
                                                 @click.prevent="removeDocument()">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="delete" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </div>
                                 </div>
@@ -86,9 +102,9 @@
                                                 :aria-label="$i18n.get('label_button_edit_document')"
                                                 id="button-edit-document"
                                                 @click.prevent="setTextDocument()">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="pencil" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-edit"/>
+                                            </span>
                                         </a>
                                         <a
                                                 class="button is-rounded is-secondary"
@@ -96,9 +112,9 @@
                                                 :aria-label="$i18n.get('label_button_delete_document')"
                                                 id="button-delete-document"
                                                 @click.prevent="removeDocument()">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="delete" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </div>
                                 </div>
@@ -111,9 +127,9 @@
                                                 :aria-label="$i18n.get('label_button_edit_document')"
                                                 id="button-edit-document"
                                                 @click.prevent="setURLDocument()">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="pencil" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-edit"/>
+                                            </span>
                                         </a>
                                         <a
                                                 class="button is-rounded is-secondary"
@@ -121,9 +137,9 @@
                                                 :aria-label="$i18n.get('label_button_delete_document')"
                                                 id="button-delete-document"
                                                 @click.prevent="removeDocument()">
-                                            <b-icon 
-                                                    size="is-small"
-                                                    icon="delete" />
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </div>
                                 </div>
@@ -133,7 +149,9 @@
                                     <button 
                                             type="button"
                                             @click.prevent="setFileDocument($event)">
-                                        <b-icon icon="upload"/>
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-upload"/>
+                                        </span>
                                     </button>
                                     <p>{{ $i18n.get('label_file') }}</p>
                                 </li>
@@ -141,7 +159,9 @@
                                     <button 
                                             type="button"
                                             @click.prevent="setTextDocument()">
-                                        <b-icon icon="format-text"/>
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-text"/>
+                                        </span>
                                     </button>
                                     <p>{{ $i18n.get('label_text') }}</p>
                                 </li>
@@ -149,7 +169,9 @@
                                     <button 
                                             type="button"
                                             @click.prevent="setURLDocument()">
-                                        <b-icon icon="code-tags"/>
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
+                                        </span>
                                     </button>
                                     <p>{{ $i18n.get('label_url') }}</p>
                                 </li>
@@ -257,9 +279,9 @@
                                             id="button-edit-thumbnail"
                                             :aria-label="$i18n.get('label_button_edit_thumb')"
                                             @click.prevent="thumbnailMediaFrame.openFrame($event)">
-                                        <b-icon 
-                                                size="is-small"
-                                                icon="pencil" />
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-edit"/>
+                                        </span>
                                     </a>
                                     <a
                                             v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
@@ -267,9 +289,9 @@
                                             class="button is-rounded is-secondary"
                                             :aria-label="$i18n.get('label_button_delete_thumb')"
                                             @click="deleteThumbnail()">
-                                    <b-icon 
-                                            size="is-small"
-                                            icon="delete" />
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-delete"/>
+                                    </span>
                                     </a>
                                 </div>
                             </div>
@@ -356,16 +378,18 @@
                                         value="publish"
                                         native-value="publish">
                                     <span class="icon">
-                                        <i class="mdi mdi-earth"/>
-                                    </span> {{ $i18n.get('publish_visibility') }}
+                                        <i class="tainacan-icon tainacan-icon-public"/>
+                                    </span>
+                                    {{ $i18n.get('publish_visibility') }}
                                 </b-radio>
                                 <b-radio
                                         v-model="visibility"
                                         value="private"
                                         native-value="private">
                                     <span class="icon">
-                                        <i class="mdi mdi-lock"/>
-                                    </span>  {{ $i18n.get('private_visibility') }}
+                                        <i class="tainacan-icon tainacan-icon-private"/>
+                                    </span>
+                                    {{ $i18n.get('private_visibility') }}
                                 </b-radio>
                             </div>
                         </div>
@@ -391,7 +415,11 @@
                                 class="collapse-all"
                                 @click="toggleCollapseAll()">
                             {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                            <b-icon :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                                        class="tainacan-icon tainacan-icon-20px"/>
+                            </span>
                         </a>
                         <tainacan-form-item
                                 v-for="(metadatum, index) of metadatumList"
@@ -438,7 +466,10 @@
                 <p 
                         class="update-warning"
                         v-if="isUpdatingValues">
-                    <b-icon icon="autorenew" />{{ $i18n.get('info_updating_metadata_values') }}
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-updating"/>
+                    </span>
+                    {{ $i18n.get('info_updating_metadata_values') }}
                     <span class="help is-danger">{{ formErrorMessage }}</span>
                 </p> 
             </div>  
@@ -451,7 +482,7 @@
                         type="button"
                         class="button sequence-button">
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-left"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-previous"/>
                     </span>
                     <span>{{ $i18n.get('previous') }}</span>
                 </button>
@@ -474,9 +505,19 @@
                         class="button sequence-button">
                     <span>{{ $i18n.get('next') }}</span>
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-right"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-next"/>
                     </span>
                 </button>
+                <button 
+                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                        @click="$router.push($routerHelper.getCollectionPath(form.collectionId))"
+                        type="button"
+                        class="button sequence-button">
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-approved"/>
+                    </span>
+                    <span>{{ $i18n.get('finish') }}</span>
+                </button>
             </div>
             <div 
                     class="form-submission-footer"
@@ -487,7 +528,7 @@
                         type="button"
                         class="button sequence-button">                    
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-left"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-previous"/>
                     </span>
                     <span>{{ $i18n.get('previous') }}</span>
                 </button>
@@ -516,9 +557,19 @@
                         class="button sequence-button">
                     <span>{{ $i18n.get('next') }}</span>
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-right"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-next"/>
                     </span>
                 </button>
+                <button 
+                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                        @click="$router.push($routerHelper.getCollectionPath(form.collectionId))"
+                        type="button"
+                        class="button sequence-button">
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-approved"/>
+                    </span>
+                    <span>{{ $i18n.get('finish') }}</span>
+                </button>
             </div>
             <div 
                     class="form-submission-footer"
@@ -529,7 +580,7 @@
                         type="button"
                         class="button sequence-button">
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-left"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-previous"/>
                     </span>
                     <span>{{ $i18n.get('previous') }}</span>
                 </button>
@@ -553,9 +604,19 @@
                         class="button sequence-button">
                     <span>{{ $i18n.get('next') }}</span>
                     <span class="icon is-large">
-                        <i class="mdi mdi-24px mdi-chevron-right"/>
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-next"/>
                     </span>
                 </button>
+                <button 
+                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                        @click="$router.push($routerHelper.getCollectionPath(form.collectionId))"
+                        type="button"
+                        class="button sequence-button">
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-approved"/>
+                    </span>
+                    <span>{{ $i18n.get('finish') }}</span>
+                </button>
             </div>
         </footer>
     </div>
@@ -587,7 +648,7 @@ export default {
             isLoading: false,
             isMetadataColumnCompressed: false,
             metadatumCollapses: [],
-            collapseAll: false,
+            collapseAll: true,
             visibility: 'publish',
             form: {
                 collectionId: Number,
@@ -649,9 +710,7 @@ export default {
     },
     watch: {
         '$route.params.itemPosition'(newItemPosition, oldItemPosition) {
-            if (oldItemPosition == undefined)
-                this.sequenceRightDirection; 
-            else if (oldItemPosition == newItemPosition)
+            if (oldItemPosition == undefined || oldItemPosition == newItemPosition)
                 this.sequenceRightDirection = undefined;     
             
             this.itemPosition = Number(newItemPosition);
@@ -716,6 +775,7 @@ export default {
         onSubmit(status) {
             // Puts loading on Item edition
             this.isLoading = true;
+            this.sequenceRightDirection = undefined; 
 
             let previousStatus = this.form.status;
             this.form.status = status;
@@ -799,8 +859,9 @@ export default {
             // Obtains Item Metadatum
             this.fetchMetadata(this.itemId).then((metadata) => {
                 this.isLoading = false;
-                for (let metadatum of metadata) {
-                    this.metadatumCollapses.push(metadatum.metadatum.required == 'yes');
+                for (let i = 0; i < metadata.length; i++) {
+                    this.metadatumCollapses.push(false);
+                    this.metadatumCollapses[i] = true;
                 }
             });
         },
@@ -1179,6 +1240,16 @@ export default {
                 flex-shrink: 1;
                 flex-grow: 1;
             }
+            .status-tag {
+                color: white;
+                background: $turquoise5;
+                padding: 0.15rem 0.5rem;
+                font-size: 0.75rem;
+                margin: 0 1rem;
+                font-weight: 600;
+                position: relative;
+                top: -2px;
+            }
             a.back-link{
                 font-weight: 500;
                 float: right;
@@ -1193,17 +1264,17 @@ export default {
         }
 
         .column.is-5-5 {
-            width: 45.833333333%;
+            max-width: 55%; 
             padding-left: $page-side-padding;
             padding-right: $page-side-padding;
             transition: width 0.6s;
 
             @media screen and (max-width: 769px) {
-                width: 100%;
+                max-width: 100%;
             }
         }
         .column.is-4-5 {
-            width: 37.5%;
+            max-width: 45%;
             padding-left: $page-side-padding;
             padding-right: $page-side-padding;
             transition: all 0.6s;
@@ -1213,7 +1284,7 @@ export default {
             }
 
             @media screen and (max-width: 769px) {
-                width: 100%;
+                max-width: 100%;
             }
 
         }
@@ -1317,7 +1388,7 @@ export default {
             display: inherit;
             padding: 0;
             margin: 0;
-            margin-top: 1px;
+            margin-top: -2px;
             font-size: 18px;
         }
     }
@@ -1369,9 +1440,6 @@ export default {
                 margin-left: 16px;
                 margin-right: 6px;
             }
-            .is-outlined {
-                border: none;
-            }
         }
 
         @keyframes blink {
@@ -1422,10 +1490,6 @@ export default {
             background-color: transparent;
             color: $turquoise5;
             border: none;
-
-            .icon {
-                margin-top: 0.3rem;
-            }
         }
     }
 

src/admin/components/edition/item-metadata-bulk-edition-form.vue

@@ -0,0 +1,655 @@
+<template>
+    <div>
+        <b-loading
+                :is-full-page="false"
+                :active.sync="isLoadingMetadata"
+                :can-cancel="false"/>
+        <div class="tainacan-page-title">
+            <h1>{{ $i18n.get('label_bulk_edit_items') }}<span class="status-tag">{{ $i18n.get(status) }}</span></h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
+        <form
+                class="tainacan-form" 
+                label-width="120px">
+                
+            <div class="columns">
+                <div class="column is-half document-list">
+                    <div class="section-label">
+                        <label>{{ $i18n.get('label_added_items') }}
+                            <span 
+                                    v-if="!isLoadingGroupInfo && bulkEditGroup.items_count != undefined"
+                                    class="has-text-gray has-text-weight-normal">{{ ' (' + bulkEditGroup.items_count + ')' }}</span>
+                        </label>
+                    </div>
+                    <br>
+                    <p v-if="items.length <= 0 && !isLoadingGroupInfo && bulkEditGroup.items_count == 1">
+                        {{ $i18n.get('info_there_is') + ' ' + bulkEditGroup.items_count + ' ' + $i18n.get('info_item_being_edited') + '.' }}
+                    </p>
+                    <p v-if="items.length <= 0 && !isLoadingGroupInfo && bulkEditGroup.items_count > 1">
+                        {{ $i18n.get('info_there_are') + ' ' + bulkEditGroup.items_count + ' ' + $i18n.get('info_items_being_edited') + '.' }}
+                    </p>
+                    <p v-if="items.length <= 0 && !isLoadingGroupInfo">
+                        {{ $i18n.get('info_no_preview_found') }}
+                    </p>
+                    <transition-group name="item-appear">
+                        <div 
+                                class="document-item"
+                                v-for="(item, index) of items"
+                                :key="index">
+                            <img 
+                                    v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
+                                class="document-thumb"
+                                :alt="item.title"
+                                :src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small : (item.thumbnail.thumb ? item.thumbnail.thumb : thumbPlaceholderPath)" > 
+                            <span 
+                                class="document-name"
+                                v-html="item.title" />                            
+                            <span 
+                                    v-if="item.errorMessage != undefined" 
+                                    class="help is-danger">
+                                {{ item.errorMessage }}
+                            </span>                                 
+                        </div>
+                    </transition-group>
+                </div>
+                <div class="column is-half">
+                     
+                    <!-- Visibility (status public or private) -------------------------------- -->
+                    <div class="section-label">
+                        <label>{{ $i18n.get('label_status') }}</label>
+                        <span class="required-metadatum-asterisk">*</span>
+                        <help-button
+                                :title="$i18n.get('label_status')"
+                                :message="$i18n.get('info_visibility_helper')"/>
+                    </div>
+                    <div class="section-status">
+                        <div class="field has-addons">
+                            <b-radio
+                                    v-model="status"
+                                    @input="changeStatus($event)"
+                                    value="publish"
+                                    native-value="publish">
+                                <span class="icon">
+                                    <i class="mdi mdi-earth"/>
+                                </span> {{ $i18n.get('publish_visibility') }}
+                            </b-radio>
+                            <b-radio
+                                    v-model="status"
+                                    @input="changeStatus($event)"
+                                    value="private"
+                                    native-value="private">
+                                <span class="icon">
+                                    <i class="mdi mdi-lock"/>
+                                </span>  {{ $i18n.get('private_visibility') }}
+                            </b-radio>
+                            <b-radio
+                                    v-model="status"
+                                    @input="changeStatus($event)"
+                                    value="draft"
+                                    native-value="draft">
+                                <span class="icon">
+                                    <i class="mdi mdi-file"/>
+                                </span>  {{ $i18n.get('draft') }}
+                            </b-radio>
+                        </div>
+                    </div>
+
+                    <!-- Metadata from Collection-------------------------------- -->
+                    <span class="section-label">
+                        <label>{{ $i18n.get('metadata') }}</label>
+                    </span>
+                    <br>
+                    <a
+                            class="collapse-all"
+                            @click="toggleCollapseAll()">
+                        {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
+                        <b-icon :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                    </a>
+
+                    <template 
+                                v-for="(metadatum, index) of metadata">
+                        <b-field
+                                :key="index"
+                                :addons="false"
+                                :message="getErrorMessage(formErrors[metadatum.id])"
+                                :type="getErrorMessage(formErrors[metadatum.id]) != '' ? 'is-danger' : ''">
+                            <span   
+                                    class="collapse-handle"
+                                    @click="changeCollapse(!metadatumCollapses[index], index)">
+                                <b-icon 
+                                        type="is-secondary"
+                                        :icon="metadatumCollapses[index] ? 'menu-down' : 'menu-right'" />
+                                <label class="label">{{ metadatum.name }}</label>
+                                <span
+                                        v-if="metadatum.required == 'yes'"
+                                        class="required-metadatum-asterisk">*</span>
+                                <span class="metadata-type">({{ $i18n.get(metadatum.metadata_type_object.component) }})</span>
+                                <help-button 
+                                        :title="metadatum.name"
+                                        :message="metadatum.description"/>
+                            </span>
+                            <transition name="filter-item">
+                                <div v-show="metadatumCollapses[index]">
+                                    <component
+                                            :forced-component-type="false"
+                                            :allow-new="false"
+                                            :allow-select-to-create="metadatum.metadata_type_options.allow_new_terms === 'yes'"
+                                            :maxtags="1"
+                                            :id="metadatum.metadata_type_object.component + '-' + metadatum.slug"
+                                            :is="metadatum.metadata_type_object.component"
+                                            :metadatum="{ metadatum: metadatum }"
+                                            @input="clearErrorMessage(metadatum.id); bulkEdit($event, metadatum)"/>
+                                            <!-- :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
+                                            :disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting" -->
+                                </div>
+                            </transition>
+                        </b-field>
+                    </template>
+
+                    <b-loading 
+                            :is-full-page="false"
+                            :active.sync="isLoadingMetadata"
+                            :can-cancel="false"/>
+                </div>
+            </div>
+            <footer class="footer">
+                <!-- Last Updated Info --> 
+                <div class="update-info-section"> 
+                    <p v-if="!isExecutingBulkEdit && lastUpdated != ''">
+                        {{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
+                        <span class="help is-danger">{{ formErrorMessage }}</span>
+                    </p>
+                    <p v-if="!isExecutingBulkEdit && lastUpdated == ''">
+                        <span class="help is-danger">{{ formErrorMessage }}</span>
+                    </p>          
+                    <p 
+                            class="update-warning"
+                            v-if="isExecutingBulkEdit">
+                        <b-icon icon="autorenew" />{{ $i18n.get('info_updating_metadata_values') }}
+                        <span class="help is-danger">{{ formErrorMessage }}</span>
+                    </p> 
+                </div>  
+                <div class="form-submission-footer">
+                    <button 
+                            @click="onSubmit('trash')"
+                            type="button"
+                            :class="{ 'is-loading': isTrashingItems }"
+                            class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button>        
+                    <button 
+                            class="button is-secondary" 
+                            :class="{'is-loading': isCreatingSequenceEditGroup }"
+                            @click.prevent="sequenceEditGroup()"
+                            type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>           
+                    <button 
+                            :disabled="formErrorMessage != undefined && formErrorMessage != ''"
+                            @click="onSubmit(status)"
+                            type="button"
+                            :class="{ 'is-loading': isPublishingItems }"
+                            class="button is-success">{{ $i18n.get('finish') }}</button>
+                </div>
+            </footer>
+        </form>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import CustomDialog from '../other/custom-dialog.vue';
+
+export default {
+    name: 'ItemMetadataBulkEditionForm',
+    data(){
+        return {
+            collectionId: '',
+            isLoadingItems: false,
+            isLoadingMetadata: false,
+            isLoadingGroupInfo: false,
+            isExecutingBulkEdit: false,
+            isCreatingSequenceEditGroup: false,
+            isUpdatingItems: false,
+            isTrashingItems: false,
+            isPublishingItems: false,
+            collapseAll: true,
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
+            metadatumCollapses: [],
+            formErrors: {},
+            status: 'draft',
+            groupID: null,
+            formErrorMessage: ''
+        }
+    },
+    computed: {
+        metadata() {
+            return this.getMetadata();
+        },
+        lastUpdated() {
+            return this.getLastUpdated();
+        },
+        items() {
+            return this.getBulkAddItems();
+        },
+        bulkEditGroup() {
+            return this.getGroup();
+        }
+    },
+    methods: {
+        ...mapActions('item', [
+            'updateItem'
+        ]),
+        ...mapActions('metadata', [
+            'fetchMetadata',
+        ]),
+        ...mapGetters('metadata', [
+            'getMetadata',
+        ]),
+        ...mapActions('bulkedition', [
+            'setValueInBulk',
+            'addValueInBulk',
+            'replaceValueInBulk',
+            'redefineValueInBulk',
+            'setStatusInBulk',
+            'removeValueInBulk',
+            'createEditGroup',
+            'deleteItemsInBulk',
+            'trashItemsInBulk',
+            'fetchItemIdInSequence',
+            'fetchGroup'  
+        ]),
+        ...mapGetters('bulkedition', [
+            'getItemIdInSequence',
+            'getGroup',
+            'getLastUpdated',
+            'getBulkAddItems'
+        ]),
+        toggleCollapseAll() {
+            this.collapseAll = !this.collapseAll;
+
+            for (let i = 0; i < this.metadatumCollapses.length; i++)
+                this.metadatumCollapses[i] = this.collapseAll;
+        },
+        changeCollapse(event, index) {
+            this.metadatumCollapses.splice(index, 1, event);
+        },
+        bulkEdit: _.debounce(function(newValue, metadatum) {
+            let values = [];
+            if (!(Array.isArray(newValue)))
+                values.push(newValue);
+            else
+                values = newValue;
+
+            for (let value of values) {
+                this.isExecutingBulkEdit = true;
+                this.setValueInBulk({
+                    collectionID: this.collectionId,
+                    groupID: this.groupID,
+                    bodyParams: {
+                        metadatum_id: metadatum.id,
+                        value: value,
+                    }
+                }).then(() => {
+                    this.isExecutingBulkEdit = false;
+
+                }).catch(() => this.isExecutingBulkEdit = false);
+            }
+
+        }, 1000),
+        onSubmit(status) {
+            this.isExecutingBulkEdit = true;
+
+            if (status != 'trash') {
+                this.status = status;
+                this.isPublishingItems = false;
+                this.isExecutingBulkEdit = false;
+   
+                this.$modal.open({
+                    parent: this,
+                    component: CustomDialog,
+                    props: {
+                        icon: 'alert',
+                        title: this.$i18n.get('label_warning'),
+                        message: this.$i18n.get('info_leaving_bulk_edition'	),
+                        onConfirm: () => {
+                            this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
+                        }
+                    }
+                });
+                
+            } else if (status == 'trash') {
+
+                this.$modal.open({
+                    parent: this,
+                    component: CustomDialog,
+                    props: {
+                        icon: 'alert',
+                        title: this.$i18n.get('label_warning'),
+                        message: this.$i18n.get('info_warning_selected_items_trash'),
+                        onConfirm: () => {
+                            
+                            this.isTrashingItems = true;
+                            this.trashItemsInBulk({
+                                    groupID: this.groupID,
+                                    collectionID: this.collectionId
+                                }).then(() => {
+                                    this.status = status;
+                                    this.isTrashingItems = false;
+                                    this.isExecutingBulkEdit = false;
+                                    this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
+                                }).catch(() => {
+                                    this.isExecutingBulkEdit = false;
+                                    this.isTrashingItems = false;
+                                });
+                        }
+                    }
+                });            
+            }
+        },
+        sequenceEditGroup() {
+            this.isCreatingSequenceEditGroup = true;
+            this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, this.groupID, 1));    
+        },
+        changeStatus(status) {
+            this.isPublishingItems = true;
+
+            // Gets an item from the bulk group
+            this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.groupID, itemPosition: 1 })
+                .then((itemId) => {
+
+                    // Test if this item can be set to this status
+                    this.updateItem({ id: itemId, status: status })
+                        .then(() => {
+
+                            // The status can be applied to everyone.
+                            this.setStatusInBulk({
+                                groupID: this.groupID,
+                                collectionID: this.collectionId,
+                                bodyParams: { value: status }
+                            }).then(() => {
+                            
+                                this.status = status;
+                                this.isPublishingItems = false;
+                                this.isExecutingBulkEdit = false;
+                                
+                            }).catch(() => {
+                                this.isPublishingItems = false;
+                                this.isExecutingBulkEdit = false;
+                            });
+                        })
+                        .catch((errors) => {
+                            // The status can not be applied.
+                            this.isPublishingItems = false;
+                            this.isExecutingBulkEdit = false;
+
+                            for (let error of errors.errors) {
+                                for (let metadatum of Object.keys(error)){
+                                    this.formErrors[metadatum] = error[metadatum];
+                                }
+                            }
+                            this.formErrorMessage = errors.error_message;
+                        });
+                })
+                .catch(() => {
+                    this.isPublishingItems = false;
+                    this.isExecutingBulkEdit = false;
+                });
+        },
+        clearErrorMessage(metadatumId) {
+            this.formErrors[metadatumId] = false;
+            let amountClean = 0;
+
+            for (let formError in this.formErrors) {
+                if (formError == false || formError == undefined)
+                    amountClean++;
+            }
+
+            if (amountClean == 0)
+                this.formErrorMessage = '';
+        },
+        getErrorMessage(errors) {
+                
+            let msg = '';
+            if ( errors != undefined && errors != false) {
+                for (let error of errors) { 
+                    for (let index of Object.keys(error)) {
+                        msg += error[index] + '\n';
+                    }
+                }
+            } 
+            return msg;
+        },
+    },
+    created() {
+        // Obtains collection ID
+        this.collectionId = this.$route.params.collectionId;
+        this.groupID = this.$route.params.groupId;
+
+        // Updates Collection BreadCrumb
+        this.$root.$emit('onCollectionBreadCrumbUpdate', [
+            { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+            { path: '', label: this.$i18n.get('add_items_bulk') }
+        ]);
+
+        this.isLoadingMetadata = true;
+        this.fetchMetadata({
+            collectionId: this.collectionId,
+            isRepositoryLevel: false,
+            isContextEdit: true,
+            includeDisabled: false,
+        }).then(() => {
+            this.isLoadingMetadata = false;
+            for (let i = 0; i < this.metadata.length; i++) {
+                this.metadatumCollapses.push(false);
+                this.metadatumCollapses[i] = true;
+            }
+        });
+
+        this.isLoadingGroupInfo = true;
+        this.fetchGroup({ collectionId: this.collectionId, groupId: this.groupID })
+            .then(() => this.isLoadingGroupInfo = false)
+            .then(() => this.isLoadingGroupInfo = false)
+       
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+    @import "../../scss/_variables.scss";
+
+
+    .page-container {
+
+        &>.tainacan-form {
+            padding: 0 $page-side-padding; 
+            margin-bottom: 110px;
+        }
+
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                flex-shrink: 1;
+                flex-grow: 1;
+            }
+            .status-tag {
+                color: white;
+                background: $turquoise5;
+                padding: 0.15rem 0.5rem;
+                font-size: 0.75rem;
+                margin: 0 1rem;
+                font-weight: 600;
+                position: relative;
+                top: -2px;
+            }
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 0px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
+        }
+
+        .document-list {
+            display: inline-block;
+
+            .document-item {
+                display: flex;
+                flex-wrap: nowrap;
+                width: 100%;
+                justify-content: flex-start;
+                align-items: center;
+                padding: 0.5rem 0.75rem;
+                position: relative;
+                cursor: default;
+
+                .document-thumb {
+                    max-height: 42px;
+                    max-width: 42px;
+                    margin-right: 1rem;
+                }
+
+                .document-name {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                    white-space: nowrap;
+                }
+            }
+        }
+
+        .column {
+
+            .section-status{
+                padding: 16px 0;     
+                .field {
+                    border-bottom: none;
+                    .b-radio {
+                        margin-right: 24px;
+                        .icon  {
+                            font-size: 18px !important; 
+                            color: $gray3;
+                        }
+                    }
+                }
+            }
+
+            .section-label {
+                cursor: default;
+                position: relative;
+                label {
+                    font-size: 16px !important;
+                    font-weight: 500 !important;
+                    color: $gray5 !important;
+                    line-height: 1.2em;
+                }
+            }
+
+            .collapse-all {
+                font-size: 12px;
+                .icon { 
+                    vertical-align: bottom; 
+                }
+            }
+
+            .multiple-inputs {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .field {
+                border-bottom: 1px solid $gray2;
+                padding: 10px 0px 10px 60px;
+
+                .label {
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    margin-left: 15px;
+                    margin-bottom: 0.5em;
+                }
+                .metadata-type {
+                    font-size: 0.8125rem;
+                    font-weight: 400;
+                    color: $gray3;
+                    top: -0.2em;
+                    position: relative;
+                }
+                .help-wrapper {
+                    top: -0.2em;
+                }
+                .collapse-handle {
+                    cursor: pointer;
+                    position: relative;
+                    margin-left: -42px;
+                }
+            }
+        }
+
+        .footer {
+            padding: 18px $page-side-padding;
+            position: absolute;
+            bottom: 0;
+            z-index: 999999;
+            background-color: $gray1;
+            width: 100%;
+            height: 65px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            left: 0;
+
+            .form-submission-footer {    
+                .button {
+                    margin-left: 16px;
+                    margin-right: 6px;
+                }
+            }
+            
+
+            @keyframes blink {
+                from { color: $blue5; }
+                to { color: $gray4; }
+            }
+
+            .update-warning {
+                color: $blue5;
+                animation-name: blink;
+                animation-duration: 0.5s;
+                animation-delay: 0.5s;
+                align-items: center;
+                display: flex;
+            }
+
+            .update-info-section {
+                color: $gray4;
+                margin-right: auto;
+            }
+
+            .help {
+                display: inline-block;
+                font-size: 1.0em;
+                margin-top: 0;
+                margin-left: 24px;
+            }
+        }
+
+    }
+
+</style>

src/admin/components/edition/taxonomy-edition-form.vue

@@ -89,7 +89,6 @@
                             <help-button 
                                     :title="$i18n.getHelperTitle('taxonomies', 'slug')" 
                                     :message="$i18n.getHelperMessage('taxonomies', 'slug')"/>
-                            <b-icon :class="{'is-loading': isUpdatingSlug}"/>
                             <b-input
                                     @input="updateSlug()"
                                     id="tainacan-text-slug"
@@ -146,7 +145,9 @@
                 
                 <b-tab-item :label="$i18n.get('terms')">
                     <!-- Terms List -->    
-                    <terms-list :taxonomy-id="taxonomyId"/>
+                    <terms-list 
+                            @isEditingTermUpdate="isEditingTermUpdate"
+                            :taxonomy-id="taxonomyId"/>
                 </b-tab-item>
 
                 <b-loading 
@@ -173,6 +174,7 @@
                 taxonomy: null,
                 isLoadingTaxonomy: false,
                 isUpdatingSlug: false,
+                isEditinTerm: false,
                 form: {
                     name: String,
                     status: String,
@@ -228,6 +230,19 @@
                         }
                     }
                 });  
+            } else if (this.isEditinTerm) {
+                this.$modal.open({
+                    parent: this,
+                    component: CustomDialog,
+                    props: {
+                        icon: 'alert',
+                        title: this.$i18n.get('label_warning'),
+                        message: this.$i18n.get('info_warning_terms_not_saved'),
+                        onConfirm: () => {
+                            next();
+                        }
+                    }
+                });  
             } else {
                 next();
             }  
@@ -358,6 +373,9 @@
             },
             labelNewTerms(){
                 return ( this.form.allowInsert === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
+            },
+            isEditingTermUpdate (value) {
+                this.isEditinTerm = value;
             }
         },
         mounted(){
@@ -397,5 +415,6 @@
         }
     }
 </script>
+<style>
 
 

src/admin/components/edition/term-edition-form.vue

@@ -27,18 +27,18 @@
                             id="button-edit-header"
                             :aria-label="$i18n.get('label_button_edit_header_image')"
                             @click="headerImageMediaFrame.openFrame($event)">
-                        <b-icon 
-                            size="is-small"
-                            icon="pencil"/>
+                        <span class="icon is-small">
+                            <i class="tainacan-icon tainacan-icon-edit"/>
+                        </span>
                     </a>
                     <a
                             class="button is-rounded is-secondary"
                             id="button-delete-header"
                             :aria-label="$i18n.get('label_button_delete_thumb')"
                             @click="deleteHeaderImage()">
-                        <b-icon 
-                            size="is-small"
-                            icon="delete" />
+                        <span class="icon is-small">
+                            <i class="tainacan-icon tainacan-icon-delete"/>
+                        </span>
                     </a>
                 </div>
                 <br>
@@ -453,7 +453,7 @@
                     display: inherit;
                     padding: 0;
                     margin: 0;
-                    margin-top: 1px;
+                    margin-top: -2px;
                     font-size: 18px;
                 }
             }

src/admin/components/lists/basic-term-item.vue

@@ -26,12 +26,12 @@
             <a
                     @click.prevent="editTerm()">
                 <span class="icon">
-                    <i class="mdi mdi-18px mdi-pencil"/>
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
                 </span>
             </a>
             <a @click.prevent="tryToRemoveTerm()">
                 <span class="icon">
-                    <i class="mdi mdi-18px mdi-delete"/>
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-delete"/>
                 </span>
             </a>
         </span>

src/admin/components/lists/collections-home-list.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="tainacan-cards-container">
+        <template v-if="collections.length <= 0 && !isLoading">
+            <ul class="new-collection-menu">
+                <li>
+                    <router-link
+                            tag="a" 
+                            :to="$routerHelper.getNewCollectionPath()"
+                            class="first-card">
+                        <div class="list-metadata">
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
+                            </span>
+                            <div>{{ $i18n.get('label_create_collection') }}</div>
+                        </div>                         
+                    </router-link>
+                </li>
+                <li>
+                    <router-link 
+                            tag="a" 
+                            :to="{ path: $routerHelper.getNewCollectionPath() }" 
+                            :aria-label="$i18n.get('label_collection_items')">
+                        <span class="icon is-medium">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
+                        </span>
+                        <span class="menu-text">{{ $i18n.get('items') }}</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link  
+                            tag="a" 
+                            :to="{ path: $routerHelper.getNewCollectionPath() }"
+                            :aria-label="$i18n.get('label_collection_metadata')">
+                        <span class="icon is-medium">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                        </span>
+                        <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link 
+                            tag="a" 
+                            :to="{ path: $routerHelper.getNewCollectionPath() }" 
+                            :aria-label="$i18n.get('label_collection_filters')">
+                        <span class="icon is-medium">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
+                        </span>
+                        <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
+                    </router-link>
+                </li>
+            </ul>
+        </template>
+        <template v-if="collections.length > 0 && !isLoading">
+            <masonry 
+                    :cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }"
+                    :gutter="25"
+                    style="width=100%;">
+                <router-link
+                        tag="a" 
+                        :to="$routerHelper.getNewCollectionPath()"
+                        class="tainacan-card new-card">
+                    <div class="list-metadata">
+                        <span class="icon is-large">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
+                        </span>
+                        <div>{{ $i18n.get('label_create_collection') }}</div>
+                    </div>
+                    <ul class="menu-list">
+                        <li>
+                            <router-link 
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getNewCollectionPath() }" 
+                                    :aria-label="$i18n.get('label_collection_items')">
+                                <b-tooltip 
+                                        :label="$i18n.get('items')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-items"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link  
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getNewCollectionPath() }"
+                                    :aria-label="$i18n.get('label_collection_metadata')">
+                                <b-tooltip 
+                                        :label="$i18n.getFrom('metadata', 'name')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-metadata"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link 
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getNewCollectionPath() }" 
+                                    :aria-label="$i18n.get('label_collection_filters')">
+                                <b-tooltip 
+                                        animated
+                                        :label="$i18n.getFrom('filters', 'name')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-filters"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
+                            </router-link>
+                        </li>
+                    </ul>
+                </router-link>
+                <div
+                        v-if="collections.length > 0 && !isLoading" 
+                        :key="index"
+                        v-for="(collection, index) of collections"
+                        class="tainacan-card">       
+                    <ul class="menu-list">
+                        <li>
+                            <a 
+                                    :href="collection.url"
+                                    target="_blank" 
+                                    :aria-label="$i18n.get('label_view_collection')">
+                                <b-tooltip 
+                                        :label="$i18n.get('label_view_collection')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
+                                    </span>
+                                </b-tooltip>
+                            </a>
+                        </li>
+                        <li>
+                            <router-link 
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }" 
+                                    :aria-label="$i18n.get('label_collection_items')">
+                                <b-tooltip 
+                                        :label="$i18n.get('items')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-items"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getCollectionEditPath(collection.id) }" 
+                                    :aria-label="$i18n.get('label_settings')">
+                                <b-tooltip 
+                                        :label="$i18n.get('label_settings')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-settings"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link  
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
+                                    :aria-label="$i18n.get('label_collection_metadata')">
+                                <b-tooltip 
+                                        :label="$i18n.getFrom('metadata', 'name')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-metadata"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link 
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }" 
+                                    :aria-label="$i18n.get('label_collection_filters')">
+                                <b-tooltip 
+                                        animated
+                                        :label="$i18n.getFrom('filters', 'name')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-filters"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
+                            </router-link>
+                        </li>
+                        <li>
+                            <router-link 
+                                    tag="a" 
+                                    :to="{ path: $routerHelper.getCollectionEventsPath(collection.id) }" 
+                                    :aria-label="$i18n.get('label_collection_events')">
+                                <b-tooltip 
+                                        :label="$i18n.get('events')"
+                                        position="is-bottom">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-activities"/>
+                                    </span>
+                                </b-tooltip>
+                                <!-- <span class="menu-text">{{ $i18n.get('events') }}</span> -->
+                            </router-link> 
+                        </li>
+                    </ul>
+                    <router-link
+                            tag="a"
+                            :to="$routerHelper.getCollectionPath(collection.id)"
+                            class="card-body">
+                        <img 
+                            v-if="collection.thumbnail != undefined"
+                            :src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">  
+                        
+                        <!-- Name -->
+                        <div class="metadata-title">
+                            <p>{{ collection.name != undefined ? collection.name : '' }}</p>                            
+                        </div>
+                    </router-link>      
+                </div>
+            </masonry>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CollectionsHomeList',
+    data(){
+        return {
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
+        }
+    },
+    props: {
+        isLoading: false,
+        collections: Array,
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+    @import "../../scss/_variables.scss";
+    @import "../../scss/_collection-home-cards.scss";
+
+    .new-collection-menu {
+        display: flex;
+        width: calc(100% + 1.25rem);
+        justify-content: space-between;
+        flex-wrap: nowrap;
+        margin: 0 -0.75rem;
+
+        @media screen and (max-width: 768px) {
+            flex-wrap: wrap;
+        }
+
+        li {
+            padding: 0.75rem;
+            display: flex;
+            background-color: $gray1;
+            flex-grow: 1;
+            margin: 0.75rem;
+            height: 120px;
+            min-width: 140px; 
+            text-align: center;
+
+            &:first-of-type {
+                width: 56.7%;
+            }
+
+            a { 
+                width: 100%;
+                color: $turquoise5; 
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-evenly;
+
+            }
+        }
+    }
+    
+</style>
+
+

src/admin/components/lists/collections-list.vue

@@ -20,7 +20,9 @@
                             class="button is-white"
                             slot="trigger">
                         <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <b-icon icon="menu-down"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                        </span>
                     </button> 
 
                     <b-dropdown-item
@@ -177,18 +179,20 @@
                                 <a 
                                         id="button-edit" 
                                         :aria-label="$i18n.getFrom('collections','edit_item')" 
-                                        @click.prevent.stop="goToCollectionEditPage(collection.id)">
-                                    <b-icon 
-                                            type="is-secondary" 
-                                            icon="settings"/>
+                                        @click.prevent.stop="goToCollectionEditPage(collection.id)">                      
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-settings"/>
+                                    </span>
                                 </a>
                                 <a 
                                         id="button-delete" 
                                         :aria-label="$i18n.get('label_button_delete')" 
                                         @click.prevent.stop="deleteOneCollection(collection.id)">
-                                    <b-icon 
-                                            type="is-secondary" 
-                                            :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                                    <span class="icon">
+                                        <i 
+                                                :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                                class="tainacan-icon tainacan-icon-20px"/>
+                                    </span>
                                 </a>
                             </div>
                         </td>

src/admin/components/lists/events-list.vue

@@ -79,8 +79,9 @@
                                         <!--id="button-approve"-->
                                         <!--:aria-label="$i18n.get('approve_item')"-->
                                         <!--@click.prevent.stop="approveEvent(event.id)">-->
-                                    <!--<b-icon-->
-                                        <!--icon="check" />-->
+                                        <!-- <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-finish"/>
+                                        </span> -->
                                 <!--</a>-->
 
                                 <!--<a-->
@@ -103,7 +104,9 @@
             <section class="section">
                 <div class="content has-text-grey has-text-centered">
                     <p>
-                        <activities-icon />
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-activities"/>
+                        </span>
                     </p>
                     <p>{{ $i18n.get('info_no_events') }}</p>
                 </div>
@@ -113,8 +116,6 @@
 </template>
 
 <script>
-    import ActivitiesIcon from '../other/activities-icon.vue';
-
     export default {
         name: 'EventsList',
         data(){
@@ -122,9 +123,6 @@
                 selectedEvents: []
             }
         },
-        components: {
-            ActivitiesIcon
-        },
         props: {
             isLoading: false,
             totalEvents: 0,
@@ -151,11 +149,4 @@
             }
         }
     }
-</script>
-
-<style scoped>
-    .activities-icon {
-        height: 24px;
-        width: 24px;
-    }
-</style>
+</script>

src/admin/components/lists/filters-list.vue

@@ -1,7 +1,20 @@
 <template>
-    <div>
+    <div class="filters-list-page">
         <b-loading :active.sync="isLoadingMetadatumTypes"/>
-        <tainacan-title v-if="!isRepositoryLevel"/>
+        <div 
+                v-if="!isRepositoryLevel"
+                class="tainacan-page-title">
+            <h1>
+                {{ $i18n.get('title_collection_filters_edition') + ' ' }}
+                <span style="font-weight: 600;">{{ collectionName }}</span>
+            </h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
         <p v-if="isRepositoryLevel">{{ $i18n.get('info_repository_filters_inheritance') }}</p>
         <br>
         <div class="columns">
@@ -11,9 +24,9 @@
                         class="field is-grouped-centered section">
                     <div class="content has-text-gray has-text-centered">
                         <p>
-                            <b-icon
-                                    icon="filter"
-                                    size="is-large"/>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
+                            </span>
                         </p>
                         <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>  
                         <p>{{ $i18n.get('info_create_filters' ) }}</p>
@@ -43,11 +56,13 @@
                             v-for="(filter, index) in activeFilterList" 
                             :key="index">
                         <div class="handle">
-                            <grip-icon/>
+                            <span class="icon grip-icon">
+                                <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
+                            </span>
                             <span class="icon icon-level-identifier">
                                 <i 
-                                    :class="{ 'mdi-folder has-text-turquoise5': filter.collection_id == collectionId, 'mdi-folder-multiple has-text-blue5': filter.collection_id != collectionId }"
-                                    class="mdi" />
+                                    :class="{ 'tainacan-icon-collections has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }"
+                                    class="tainacan-icon" />
                             </span> 
                             <span 
                                     class="filter-name"
@@ -79,16 +94,16 @@
                                 <a 
                                         :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }"
                                         @click.prevent="editFilter(filter)">
-                                    <b-icon 
-                                            type="is-gray" 
-                                            icon="pencil"/>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                                    </span>
                                 </a>
                                 <a 
                                         :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
                                         @click.prevent="removeFilter(filter)">
-                                    <b-icon 
-                                            type="is-gray" 
-                                            icon="delete"/>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-delete"/>
+                                    </span>
                                 </a>
                             </span>
                         </div>
@@ -159,11 +174,13 @@
                                 v-for="(metadatum, index) in availableMetadatumList"
                                 :key="index"
                                 @click.prevent="addMetadatumViaButton(metadatum, index)">
-                            <grip-icon/> 
+                            <span class="icon grip-icon">
+                                <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
+                            </span>
                             <span class="icon icon-level-identifier">
                                 <i 
-                                    :class="{ 'mdi-folder has-text-turquoise5': metadatum.collection_id == collectionId, 'mdi-folder-multiple has-text-blue5': metadatum.collection_id != collectionId }"
-                                    class="mdi" />
+                                    :class="{ 'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId && !isRepositoryLevel, 'tainacan-icon-repository has-text-blue5': isRepositoryLevel || metadatum.collection_id != collectionId }"
+                                    class="tainacan-icon" />
                             </span>  
                             <span class="metadatum-name">{{ metadatum.name }}</span>
                         </div>
@@ -174,9 +191,9 @@
                             class="field is-grouped-centered section">
                         <div class="content has-text-gray has-text-centered">
                             <p>
-                                <b-icon
-                                        icon="format-list-checks"
-                                        size="is-large"/>
+                                <span class="icon is-large">
+                                    <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                                </span>
                             </p>
                             <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
                             <router-link
@@ -195,7 +212,6 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import GripIcon from '../other/grip-icon.vue';
 import FilterEditionForm from './../edition/filter-edition-form.vue';
 import CustomDialog from '../other/custom-dialog.vue';
 
@@ -204,6 +220,7 @@ export default {
     data(){           
         return {
             collectionId: '',
+            collectionName: '',
             isRepositoryLevel: false,
             isDraggingFromAvailable: false,
             isLoadingMetadatumTypes: true,
@@ -234,8 +251,7 @@ export default {
         }
     },
     components: {
-        FilterEditionForm,
-        GripIcon
+        FilterEditionForm
     },
     beforeRouteLeave ( to, from, next ) {
         let hasUnsavedForms = false;
@@ -282,6 +298,9 @@ export default {
         ...mapGetters('metadata', [
             'getMetadata',
         ]),
+        ...mapActions('collection', [
+            'fetchCollectionName'
+        ]),
         handleChange($event) {     
             if ($event.added) {
                 this.addNewFilter($event.added.element, $event.added.newIndex);
@@ -492,6 +511,13 @@ export default {
             .catch(() => {
                 this.isLoadingFilters = false;
             });
+
+        
+        // Obtains collection name
+        this.fetchCollectionName(this.collectionId).then((collectionName) => {
+            this.collectionName = collectionName;
+        });
+        
     }
 }
 </script>
@@ -500,317 +526,353 @@ export default {
 
     @import "../../scss/_variables.scss";
 
-    .loading-spinner {
-        animation: spinAround 500ms infinite linear;
-        border: 2px solid #dbdbdb;
-        border-radius: 290486px;
-        border-right-color: transparent;
-        border-top-color: transparent;
-        content: "";
-        display: inline-block;
-        height: 1em; 
-        width: 1em;
-    }
+    .filters-list-page {
 
-    .active-filters-area {
-        font-size: 14px;
-        margin-right: 0.8em;
-        margin-left: -0.8em;
-        padding-right: 6em;
-        min-height: 330px;
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
 
-        @media screen and (max-width: 769px) {
-            min-height: 45px;
-            margin: 0; 
-            padding-right: 0em;
-        }
-        @media screen and (max-width: 1216px) {
-            padding-right: 1em;
-        }
-
-        &.filters-area-receive {
-            border: 1px dashed gray;
-        }
-
-        .collapse {
-            display: initial;
-        }
-
-        .active-filter-item {
-            background-color: white;
-            padding: 0.7em 0.9em;
-            margin: 4px;
-            min-height: 40px;
-            position: relative;
-            display: block; 
-            transition: top 0.1s ease;
-            cursor: grab;
-
-            form.tainacan-form {
-                padding: 1.0em 2.0em;
-                margin-top: 1.0em;
-                border-top: 1px solid $gray2;
-                border-bottom: 1px solid $gray2;
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                width: 80%;
+                flex-shrink: 1;
+                flex-grow: 1;
             }
-        
-            &>.field, form {
-                background-color: white !important;
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 3px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
+        }
+                    
+        .column:not(.available-metadata-area){
+            overflow: hidden;
+            flex-grow: 2;
+        }
+
+        .loading-spinner {
+            animation: spinAround 500ms infinite linear;
+            border: 2px solid #dbdbdb;
+            border-radius: 290486px;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            content: "";
+            display: inline-block;
+            height: 1em; 
+            width: 1em;
+        }
+
+        .active-filters-area {
+            font-size: 14px;
+            margin-right: 0.8em;
+            margin-left: -0.8em;
+            padding-right: 6em;
+            min-height: 330px;
+
+            @media screen and (max-width: 769px) {
+                min-height: 45px;
+                margin: 0; 
+                padding-right: 0em;
+            }
+            @media screen and (max-width: 1216px) {
+                padding-right: 1em;
             }
 
-            .handle {
-                padding-right: 6em;
+            &.filters-area-receive {
+                border: 1px dashed gray;
             }
-            .grip-icon { 
-                fill: $gray3;
-                top: 1px;
+
+            .collapse {
+                display: initial;
+            }
+
+            .active-filter-item {
+                background-color: white;
+                padding: 0.7em 0.9em;
+                margin: 4px;
+                min-height: 40px;
                 position: relative;
-            }
-            .filter-name {
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                white-space: nowrap;
-                font-weight: bold;
-                margin-left: 0.4em;
-                margin-right: 0.4em;
+                display: block; 
+                transition: top 0.1s ease;
+                cursor: grab;
 
-                &.is-danger {
-                    color: $danger !important;
+                form.tainacan-form {
+                    padding: 1.0em 2.0em;
+                    margin-top: 1.0em;
+                    border-top: 1px solid $gray2;
+                    border-bottom: 1px solid $gray2;
                 }
-            }
-            .label-details {
-                font-weight: normal;
-                color: $gray3;
-            }
-            .not-saved {
-                font-style: italic;
-                font-weight: bold;
-                color: $danger;
-            }
-            .controls { 
-                position: absolute;
-                right: 5px; 
-                top: 10px;
-                .switch {
-                    position: relative;
-                    bottom: 3px;
-                }
-                .icon {
-                    bottom: 1px;   
-                    position: relative;
-                    i, i:before { font-size: 20px; }
-                }
-            }
-
-            &.not-sortable-item, &.not-sortable-item:hover {
-                cursor: default;
-                background-color: white !important;
-
-                .handle .label-details, .handle .icon {
-                    color: $gray3 !important;
-                }
-            } 
-            &.not-focusable-item, &.not-focusable-item:hover {
-                cursor: default;
-               
-                .metadatum-name {
-                    color: $secondary;
-                }
-                .handle .label-details, .handle .icon {
-                    color: $gray3 !important;
-                }
-            }
-            &.disabled-metadatum {
-                color: $gray3;
-            }    
-        }
-        .active-filter-item:hover:not(.not-sortable-item) {
-            background-color: $secondary;
-            border-color: $secondary;
-            color: white !important;
-
-            &>.field, form {
-                background-color: white !important;
-            }
-
-            .grip-icon { 
-                fill: $white;
-            }
-
-            .label-details, .icon, .icon-level-identifier>i {
-                color: white !important;
-            }
-
-            .switch.is-small {
-                input[type="checkbox"] + .check {
-                    background-color: $secondary !important;
-                    border: 1.5px solid white !important;
-                    &::before { background-color: white !important; }
-                } 
-                input[type="checkbox"]:checked + .check {
-                    border: 1.5px solid white !important;
-                    &::before { background-color: white !important; }
-                }
-                &:hover input[type="checkbox"] + .check {
-                    border: 1.5px solid white !important;
-                    background-color: $secondary !important;
-                }
-            }
-        }
-        .sortable-ghost {
-            border: 1px dashed $gray2;
-            display: block;
-            padding: 0.7em 0.9em;
-            margin: 4px;
-            height: 40px;
-            position: relative;
-
-            .grip-icon { 
-                fill: $gray3;
-                top: 2px;
-                position: relative;
-            }
-        }
-    }
-
-    .available-metadata-area {
-        padding: 10px 0px 10px 10px;
-        margin: 0;
-        max-width: 280px;
-        font-size: 14px;
-
-        @media screen and (max-width: 769px) {
-            max-width: 100%;
-            padding: 10px;
-            h3 {
-                margin: 1em 0em 1em 0em !important;
-            }
-            .available-metadatum-item::before,
-            .available-metadatum-item::after {
-                display: none !important;
-            }
-        }
-
-        h3 {
-            margin: 0.2em 0em 1em -1.2em;
-            font-weight: 500;
-        }
-
-        .available-metadatum-item {
-            padding: 0.7em;
-            margin: 4px;
-            background-color: white;
-            cursor: pointer;
-            left: 0;
-            line-height: 1.3em;
-            height: 40px;
-            position: relative;
-            border: 1px solid $gray2;
-            border-radius: 1px;
-            transition: left 0.2s ease;
             
-            .grip-icon { 
-                fill: $gray3;
-                top: -3px;
-                position: relative;
-                display: inline-block;
+                &>.field, form {
+                    background-color: white !important;
+                }
+
+                .handle {
+                    padding-right: 6em;
+                    white-space: nowrap;
+                    display: flex;
+                }
+                .grip-icon { 
+                    color: $gray3;
+                    position: relative;
+                }
+                .filter-name {
+                    text-overflow: ellipsis;
+                    overflow-x: hidden;
+                    white-space: nowrap;
+                    font-weight: bold;
+                    margin-left: 0.4em;
+                    margin-right: 0.4em;
+
+                    &.is-danger {
+                        color: $danger !important;
+                    }
+                }
+                .label-details {
+                    font-weight: normal;
+                    color: $gray3;
+                }
+                .not-saved {
+                    font-style: italic;
+                    font-weight: bold;
+                    color: $danger;
+                    margin-left: 0.5rem;
+                }
+                .controls { 
+                    position: absolute;
+                    right: 5px; 
+                    top: 10px;
+                    .switch {
+                        position: relative;
+                        bottom: 3px;
+                    }
+                    .icon {
+                        bottom: 1px;   
+                        position: relative;
+                        i, i:before { font-size: 20px; }
+                    }
+                }
+
+                &.not-sortable-item, &.not-sortable-item:hover {
+                    cursor: default;
+                    background-color: white !important;
+                } 
+                &.not-focusable-item, &.not-focusable-item:hover {
+                    cursor: default;
+                
+                    .metadatum-name {
+                        color: $secondary;
+                    }
+                    .handle .label-details, .handle .icon {
+                        color: $gray3 !important;
+                    }
+                }
+                &.disabled-metadatum {
+                    color: $gray3;
+                }    
             }
-            .icon {
-                position: relative;
-                bottom: 3px;
-            }
-            .metadatum-name {
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                white-space: nowrap;
-                font-weight: bold;
-                margin-left: 0.4em;
-                display: inline-block;
-                max-width: 180px;
-            }
-            &:after,
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 100%;
-                width: 0;
-                height: 0;
-                border-style: solid;
-            }
-            &:after {
-                top: -1px;
-                border-color: transparent white transparent transparent;
-                border-right-width: 16px;
-                border-top-width: 20px;
-                border-bottom-width: 20px;
-                left: -19px;
-            }
-            &:before {
-                top: -1px;
-                border-color: transparent $gray2 transparent transparent;
-                border-right-width: 16px;
-                border-top-width: 20px;
-                border-bottom-width: 20px;
-                left: -20px;
-            }
-        }
-        .sortable-drag {
-            opacity: 1 !important;
-        }
-        .available-metadatum-item:not(.disabled-metadatum)  {
-            &:hover{
+            .active-filter-item:hover:not(.not-sortable-item) {
                 background-color: $secondary;
                 border-color: $secondary;
                 color: white !important;
-                position: relative;
-                left: -4px;
 
-                &:after {
-                    border-color: transparent $secondary transparent transparent;
+                &>.field, form {
+                    background-color: white !important;
                 }
-                &:before {
-                    border-color: transparent $secondary transparent transparent;
+
+                .grip-icon { 
+                    color: $white;
                 }
-                .icon-level-identifier>i {
+
+                .label-details, .icon, .icon-level-identifier>i {
                     color: white !important;
                 }
-                .grip-icon {
-                    fill: white !important;
+
+                .switch.is-small {
+                    input[type="checkbox"] + .check {
+                        background-color: $secondary !important;
+                        border: 1.5px solid white !important;
+                        &::before { background-color: white !important; }
+                    } 
+                    input[type="checkbox"]:checked + .check {
+                        border: 1.5px solid white !important;
+                        &::before { background-color: white !important; }
+                    }
+                    &:hover input[type="checkbox"] + .check {
+                        border: 1.5px solid white !important;
+                        background-color: $secondary !important;
+                    }
+                }
+            }
+            .sortable-ghost {
+                border: 1px dashed $gray2;
+                display: block;
+                padding: 0.7em 0.9em;
+                margin: 4px;
+                height: 40px;
+                position: relative;
+
+                .grip-icon { 
+                    color: $gray3;
+                    top: 2px;
+                    position: relative;
                 }
             }
         }
-    }
 
-   .inherited-filter {
-        &.active-filter-item:hover:not(.not-sortable-item) {
-            background-color: $blue5;
-            border-color: $blue5;
+        .available-metadata-area {
+            padding: 10px 0px 10px 10px;
+            margin: 0;
+            max-width: 500px;
+            min-width: 20.8333333%;
+            font-size: 0.875rem;
+
+            @media screen and (max-width: 769px) {
+                max-width: 100%;
+                padding: 10px;
+                h3 {
+                    margin: 1em 0em 1em 0em !important;
+                }
+                .available-metadatum-item::before,
+                .available-metadatum-item::after {
+                    display: none !important;
+                }
+            }
+
+            h3 {
+                margin: 0.2em 0em 1em -1.2em;
+                font-weight: 500;
+            }
+
+            .available-metadatum-item {
+                padding: 0.7em;
+                margin: 4px;
+                background-color: white;
+                cursor: pointer;
+                left: 0;
+                line-height: 1.3em;
+                height: 40px;
+                position: relative;
+                border: 1px solid $gray2;
+                border-radius: 1px;
+                transition: left 0.2s ease;
+                
+                .grip-icon { 
+                    color: $gray3;
+                    top: -4px;
+                    position: relative;
+                    display: inline-block;
+                }
+                .icon {
+                    position: relative;
+                    bottom: 4px;
+                }
+                .metadatum-name {
+                    text-overflow: ellipsis;
+                    overflow-x: hidden;
+                    white-space: nowrap;
+                    font-weight: bold;
+                    margin-left: 0.4em;
+                    display: inline-block;
+                    max-width: 180px;
+                    width: 60%;
+                }
+                &:after,
+                &:before {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    right: 100%;
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                }
+                &:after {
+                    top: -1px;
+                    border-color: transparent white transparent transparent;
+                    border-right-width: 16px;
+                    border-top-width: 20px;
+                    border-bottom-width: 20px;
+                    left: -19px;
+                }
+                &:before {
+                    top: -1px;
+                    border-color: transparent $gray2 transparent transparent;
+                    border-right-width: 16px;
+                    border-top-width: 20px;
+                    border-bottom-width: 20px;
+                    left: -20px;
+                }
+            }
+            .sortable-drag {
+                opacity: 1 !important;
+            }
+            .available-metadatum-item:not(.disabled-metadatum)  {
+                &:hover{
+                    background-color: $secondary;
+                    border-color: $secondary;
+                    color: white !important;
+                    position: relative;
+                    left: -4px;
+
+                    &:after {
+                        border-color: transparent $secondary transparent transparent;
+                    }
+                    &:before {
+                        border-color: transparent $secondary transparent transparent;
+                    }
+                    .icon-level-identifier>i {
+                        color: white !important;
+                    }
+                    .grip-icon {
+                        color: white !important;
+                    }
+                }
+            }
+        }
+
+    .inherited-filter {
+            &.active-filter-item:hover:not(.not-sortable-item) {
+                background-color: $blue5;
+                border-color: $blue5;
+                
+                .switch.is-small {
+                    input[type="checkbox"] + .check {
+                        background-color: $blue5 !important;
+                    } 
+                    &:hover input[type="checkbox"] + .check {
+                        background-color: $blue5 !important;
+                    }
+                }
+            }
+        }
+        .inherited-metadatum {
+
+            &.available-metadatum-item:hover {
+                background-color: $blue5 !important;
+                border-color: $blue5 !important;
             
-            .switch.is-small {
-                input[type="checkbox"] + .check {
-                    background-color: $blue5 !important;
-                } 
-                &:hover input[type="checkbox"] + .check {
-                    background-color: $blue5 !important;
+                &:after {
+                    border-color: transparent $blue5 transparent transparent !important;
                 }
+                &:before {
+                    border-color: transparent $blue5 transparent transparent !important;
+                }
+
             }
         }
     }
-    .inherited-metadatum {
-
-        &.available-metadatum-item:hover {
-            background-color: $blue5 !important;
-            border-color: $blue5 !important;
-        
-            &:after {
-                border-color: transparent $blue5 transparent transparent !important;
-            }
-            &:before {
-                border-color: transparent $blue5 transparent transparent !important;
-            }
-
-        }
-    }
-
 </style>
 

src/admin/components/lists/items-list.vue

@@ -36,7 +36,9 @@
                             class="button is-white"
                             slot="trigger">
                         <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <b-icon icon="menu-down"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                        </span>
                     </button>
 
                     <b-dropdown-item
@@ -129,26 +131,28 @@
                                 id="button-edit"   
                                 :aria-label="$i18n.getFrom('items','edit_item')" 
                                 @click.prevent.stop="goToItemEditPage(item)">
-                            <b-icon
-                                    type="is-secondary" 
-                                    icon="pencil"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                            </span>
                         </a>
                         <a
                                 :aria-lavel="$i18n.get('label_button_untrash')"
                                 @click.prevent.stop="untrashOneItem(item.id)"
                                 v-if="isOnTrash">
-                            <b-icon
-                                    type="is-secondary"
-                                    icon="delete-restore"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-undo"/>
+                            </span>
                         </a>
                         <a
                                 v-if="collectionId"
                                 id="button-delete" 
                                 :aria-label="$i18n.get('label_button_delete')" 
                                 @click.prevent.stop="deleteOneItem(item.id)">
-                            <b-icon 
-                                    type="is-secondary" 
-                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                        class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                            </span>
                         </a>
                     </div>
             
@@ -213,26 +217,28 @@
                                 id="button-edit"   
                                 :aria-label="$i18n.getFrom('items','edit_item')" 
                                 @click.prevent.stop="goToItemEditPage(item)">
-                            <b-icon
-                                    type="is-secondary" 
-                                    icon="pencil"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                            </span>
                         </a>
                         <a
                                 :aria-lavel="$i18n.get('label_button_untrash')"
                                 @click.prevent.stop="untrashOneItem(item.id)"
                                 v-if="isOnTrash">
-                            <b-icon
-                                    type="is-secondary"
-                                    icon="delete-restore"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-undo"/>
+                            </span>
                         </a>
                         <a
                                 v-if="collectionId"
                                 id="button-delete" 
                                 :aria-label="$i18n.get('label_button_delete')" 
                                 @click.prevent.stop="deleteOneItem(item.id)">
-                            <b-icon 
-                                    type="is-secondary" 
-                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                        class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                            </span>
                         </a>
                     </div>
                 </div>
@@ -284,26 +290,28 @@
                                 id="button-edit"   
                                 :aria-label="$i18n.getFrom('items','edit_item')" 
                                 @click.prevent.stop="goToItemEditPage(item)">
-                            <b-icon
-                                    type="is-secondary" 
-                                    icon="pencil"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                            </span>
                         </a>
                         <a
                                 :aria-lavel="$i18n.get('label_button_untrash')"
                                 @click.prevent.stop="untrashOneItem(item.id)"
                                 v-if="isOnTrash">
-                            <b-icon
-                                    type="is-secondary"
-                                    icon="delete-restore"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-undo"/>
+                            </span>
                         </a>
                         <a
                                 v-if="collectionId"
                                 id="button-delete" 
                                 :aria-label="$i18n.get('label_button_delete')" 
                                 @click.prevent.stop="deleteOneItem(item.id)">
-                            <b-icon 
-                                    type="is-secondary" 
-                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                        class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                            </span>
                         </a>
                     </div>
                     
@@ -423,26 +431,28 @@
                                 id="button-edit"   
                                 :aria-label="$i18n.getFrom('items','edit_item')" 
                                 @click.prevent.stop="goToItemEditPage(item)">
-                            <b-icon
-                                    type="is-secondary" 
-                                    icon="pencil"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                            </span>
                         </a>
                         <a
                                 :aria-lavel="$i18n.get('label_button_untrash')"
                                 @click.prevent.stop="untrashOneItem(item.id)"
                                 v-if="isOnTrash">
-                            <b-icon
-                                    type="is-secondary"
-                                    icon="delete-restore"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-undo"/>
+                            </span>
                         </a>
                         <a
                                 v-if="collectionId"
                                 id="button-delete" 
                                 :aria-label="$i18n.get('label_button_delete')" 
                                 @click.prevent.stop="deleteOneItem(item.id)">
-                            <b-icon 
-                                    type="is-secondary" 
-                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                        class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                            </span>
                         </a>
                     </div>
                     
@@ -620,26 +630,28 @@
                                         id="button-edit"   
                                         :aria-label="$i18n.getFrom('items','edit_item')" 
                                         @click.prevent.stop="goToItemEditPage(item)">
-                                    <b-icon
-                                            type="is-secondary" 
-                                            icon="pencil"/>
+                                    <span class="icon">
+                                        <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                                    </span>
                                 </a>
                                 <a
                                         :aria-lavel="$i18n.get('label_button_untrash')"
                                         @click.prevent.stop="untrashOneItem(item.id)"
                                         v-if="isOnTrash">
-                                    <b-icon
-                                            type="is-secondary"
-                                            icon="delete-restore"/>
+                                    <span class="icon">
+                                        <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-undo"/>
+                                    </span>
                                 </a>
                                 <a
                                         v-if="collectionId"
                                         id="button-delete" 
                                         :aria-label="$i18n.get('label_button_delete')" 
                                         @click.prevent.stop="deleteOneItem(item.id)">
-                                    <b-icon 
-                                            type="is-secondary" 
-                                            :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                                    <span class="icon">
+                                    <i 
+                                            :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                            class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                </span>
                                 </a>
                             </div>
                         </td>

src/admin/components/lists/metadata-list.vue

@@ -1,8 +1,21 @@
 <template>
-    <div>
+    <div class="metadata-list-page">
         <b-loading :active.sync="isLoadingMetadatumTypes"/>
         <b-loading :active.sync="isLoadingMetadatumMappers"/>
-        <tainacan-title v-if="!isRepositoryLevel"/>
+                <div 
+                v-if="!isRepositoryLevel"
+                class="tainacan-page-title">
+            <h1>
+                {{ $i18n.get('title_collection_metadata_edition') + ' ' }}
+                <span style="font-weight: 600;">{{ collectionName }}</span>
+            </h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
         <p v-if="isRepositoryLevel">{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
         <br>
         <b-tabs v-model="activeTab">    
@@ -14,9 +27,9 @@
                                 class="field is-grouped-centered section">
                             <div class="content has-text-gray has-text-centered">
                                 <p>
-                                    <b-icon
-                                            icon="format-list-bulleted-type"
-                                            size="is-large"/>
+                                    <span class="icon is-large">
+                                        <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                                    </span>
                                 </p>
                                 <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
                                 <p>{{ $i18n.get('info_create_metadata' ) }}</p>
@@ -47,14 +60,16 @@
                                     v-for="(metadatum, index) in activeMetadatumList"
                                     :key="index">
                                 <div class="handle">
-                                    <grip-icon/>
+                                    <span class="icon grip-icon">
+                                        <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
+                                    </span>
                                     <span class="icon icon-level-identifier">
                                         <i 
                                             :class="{ 
-                                                'mdi-folder has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                                'mdi-folder-multiple has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
+                                                'tainacan-icon-collections has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                                'tainacan-icon-repository has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
                                             }"
-                                            class="mdi" />
+                                            class="tainacan-icon" />
                                     </span>  
                                     <span 
                                             class="metadatum-name"
@@ -102,9 +117,9 @@
                                                         ? 'hidden' : 'visible'
                                                     }" 
                                                 @click.prevent="editMetadatum(metadatum)">
-                                            <b-icon 
-                                                    type="is-gray" 
-                                                    icon="pencil"/>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                                            </span>
                                         </a>
                                         <a 
                                                 :style="{ visibility: 
@@ -114,9 +129,9 @@
                                                         ? 'hidden' : 'visible'
                                                     }" 
                                                 @click.prevent="removeMetadatum(metadatum)">
-                                            <b-icon 
-                                                    type="is-gray" 
-                                                    icon="delete"/>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </span>
                                 </div>
@@ -153,7 +168,9 @@
                                         :class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }"
                                         v-for="(metadatum, index) in availableMetadatumList"
                                         :key="index">
-                                    <grip-icon/>
+                                    <span class="icon grip-icon">
+                                        <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
+                                    </span>
                                     <span class="metadatum-name">{{ metadatum.name }}</span>
                                     <span 
                                             class="loading-spinner" 
@@ -174,9 +191,9 @@
                             class="field is-grouped-centered section">
                         <div class="content has-text-gray has-text-centered">
                             <p>
-                                <b-icon
-                                        icon="format-list-bulleted-type"
-                                        size="is-large"/>
+                                <span class="icon is-large">
+                                    <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                                </span>
                             </p>
                             <p>{{ $i18n.get('info_there_is_no_metadatum') }}</p>  
                             <p>{{ $i18n.get('info_create_metadata') }}</p>
@@ -254,9 +271,9 @@
                                                         ? 'visible' : 'hidden'
                                                     }" 
                                                 @click.prevent="editMetadatumCustomMapper(props.row)">
-                                            <b-icon 
-                                                    type="is-gray" 
-                                                    icon="pencil"/>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                                            </span>
                                         </a>
                                         <a 
                                                 :style="{ visibility: 
@@ -264,9 +281,9 @@
                                                         ? 'visible' : 'hidden'
                                                     }" 
                                                 @click.prevent="removeMetadatumCustomMapper(props.row)">
-                                            <b-icon 
-                                                    type="is-gray" 
-                                                    icon="delete"/>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </b-table-column>
                                 </template>
@@ -280,10 +297,9 @@
                                         v-if="collectionId != null && collectionId != undefined"
                                         class="is-inline is-pulled-left add-link"
                                         @click="onNewMetadataMapperMetadata()">
-                                    <b-icon
-                                            icon="plus-circle"
-                                            size="is-small"
-                                            type="is-secondary"/>
+                                    <span class="icon is-small">
+                                        <i class="tainacan-icon tainacan-icon-add"/>
+                                    </span>
                                     {{ $i18n.get('label_add_more_mapper_metadata') }}
                                 </a>
                             </div>
@@ -351,7 +367,6 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import GripIcon from '../other/grip-icon.vue';
 import MetadatumEditionForm from './../edition/metadatum-edition-form.vue';
 import CustomDialog from '../other/custom-dialog.vue';
 
@@ -383,8 +398,7 @@ export default {
         }
     },
     components: {
-        MetadatumEditionForm,
-        GripIcon
+        MetadatumEditionForm
     },
     computed: {
         availableMetadatumList: {
@@ -456,6 +470,9 @@ export default {
             'getMetadata',
             'getMetadatumMappers'
         ]),
+        ...mapActions('collection', [
+            'fetchCollectionName'
+        ]),
         handleChange(event) {     
             if (event.added) {
                 this.addNewMetadatum(event.added.element, event.added.newIndex);
@@ -783,6 +800,11 @@ export default {
             .catch(() => {
                 this.isLoadingMetadatumMappers = false;
             });
+
+        // Obtains collection name
+        this.fetchCollectionName(this.collectionId).then((collectionName) => {
+            this.collectionName = collectionName;
+        });
     }
 }
 </script>
@@ -791,395 +813,433 @@ export default {
 
     @import "../../scss/_variables.scss";
 
-    .page-title {
-        border-bottom: 1px solid $secondary;
-        h2 {
-            color: $blue5;
-            font-weight: 500;
+    .metadata-list-page {
+
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                width: 80%;
+                flex-shrink: 1;
+                flex-grow: 1;
+            }
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 3px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
         }
-        margin: 1em 0em 2.0em 0em;
-    }
-
-    .w-100 {
-        width: 100%;
-        position: relative;
-        float: left;
-    }
-    
-    .modal-new-link {
-        padding: 0.5em 1em 3em 1em;
-    }
-
-    .loading-spinner {
-        animation: spinAround 500ms infinite linear;
-        border: 2px solid #dbdbdb;
-        border-radius: 290486px;
-        border-right-color: transparent;
-        border-top-color: transparent;
-        content: "";
-        display: inline-block;
-        height: 1em; 
-        width: 1em;
-    }
-
-    .active-metadata-area {
-        font-size: 14px;
-        margin-right: 0.8em;
-        margin-left: -0.8em;
-        padding-right: 6em;
-        min-height: 330px;
-
-        @media screen and (max-width: 769px) {
-            min-height: 45px;
-            margin: 0; 
-            padding-right: 0em;
-        }
-        @media screen and (max-width: 1216px) {
-            padding-right: 1em;
-        }
-
-        &.metadata-area-receive {
-            border: 1px dashed gray;
-        }
-
-        .collapse {
-            display: initial;
-        }
-
-        .active-metadatum-item {
-            background-color: white;
-            padding: 0.7em 0.9em;
-            margin: 4px;
-            min-height: 40px;
-            display: block; 
-            position: relative;
-            cursor: grab;
-            opacity: 1 !important;
                     
-            &>.field, form {
-                background-color: white !important;
-            }
-            
-            .handle {
-                padding-right: 6em;
-            }
-            .grip-icon { 
-                fill: $gray3; 
-                top: 1px;
-                position: relative;
-            }
-            .metadatum-name {
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                white-space: nowrap;
-                font-weight: bold;
-                margin-left: 0.4em;
-                margin-right: 0.4em;
+        .column:not(.available-metadata-area){
+            overflow: hidden;
+            flex-grow: 2;
+        }
 
-                &.is-danger {
-                    color: $danger !important;
+        .page-title {
+            border-bottom: 1px solid $secondary;
+            h2 {
+                color: $blue5;
+                font-weight: 500;
+            }
+            margin: 1em 0em 2.0em 0em;
+        }
+
+        .w-100 {
+            width: 100%;
+            position: relative;
+            float: left;
+        }
+        
+        .modal-new-link {
+            padding: 0.5em 1em 3em 1em;
+        }
+
+        .loading-spinner {
+            animation: spinAround 500ms infinite linear;
+            border: 2px solid #dbdbdb;
+            border-radius: 290486px;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            content: "";
+            display: inline-block;
+            height: 1em; 
+            width: 1em;
+        }
+
+        .active-metadata-area {
+            font-size: 14px;
+            margin-right: 0.8em;
+            margin-left: -0.8em;
+            padding-right: 6em;
+            min-height: 330px;
+
+            @media screen and (max-width: 769px) {
+                min-height: 45px;
+                margin: 0; 
+                padding-right: 0em;
+            }
+            @media screen and (max-width: 1216px) {
+                padding-right: 1em;
+            }
+
+            &.metadata-area-receive {
+                border: 1px dashed gray;
+            }
+
+            .collapse {
+                display: initial;
+            }
+
+            .active-metadatum-item {
+                background-color: white;
+                padding: 0.7em 0.9em;
+                margin: 4px;
+                min-height: 40px;
+                display: block; 
+                position: relative;
+                cursor: grab;
+                opacity: 1 !important;
+                        
+                &>.field, form {
+                    background-color: white !important;
+                }
+                
+                .handle {
+                    padding-right: 6em;
+                    white-space: nowrap;
+                    display: flex;
+                }
+                .grip-icon { 
+                    color: $gray3; 
+                    position: relative;
+                }
+                .metadatum-name {
+                    text-overflow: ellipsis;
+                    overflow-x: hidden;
+                    white-space: nowrap;
+                    font-weight: bold;
+                    margin-left: 0.4em;
+                    margin-right: 0.4em;
+
+                    &.is-danger {
+                        color: $danger !important;
+                    }
+                }
+                .label-details {
+                    font-weight: normal;
+                    color: $gray3;
+                }
+                .not-saved {
+                    font-style: italic;
+                    font-weight: bold;
+                    color: $danger;
+                    margin-left: 0.5rem;
+                }
+                .controls { 
+                    position: absolute;
+                    right: 5px;
+                    top: 10px;
+                    .switch {
+                        position: relative;
+                        bottom: 3px;
+                    }
+                    .icon {
+                        bottom: 1px;   
+                        position: relative;
+                        i, i:before { font-size: 20px; }
+                    }
+                }
+        
+                &.not-sortable-item, &.not-sortable-item:hover {
+                    cursor: default;
+                    background-color: white !important;
+                } 
+                &.not-focusable-item, &.not-focusable-item:hover {
+                    cursor: default;
+                
+                    .metadatum-name {
+                        color: $secondary;
+                    }
+                    .handle .label-details, .handle .icon {
+                        color: $gray3 !important;
+                    }
+                }
+                &.disabled-metadatum {
+                    color: $gray3;
+                }    
+            }
+            .active-metadatum-item:hover:not(.not-sortable-item) {
+                background-color: $secondary;
+                border-color: $secondary;
+                color: white !important;
+                        
+                &>.field, form {
+                    background-color: white !important;
+                }
+
+                .label-details, .icon, .not-saved, .icon-level-identifier>i {
+                    color: white !important;
+                }
+
+                .grip-icon { 
+                    color: white; 
+                }
+
+                .switch.is-small {
+                    input[type="checkbox"] + .check {
+                        background-color: $secondary !important;
+                        border: 1.5px solid white !important;
+                        &::before { background-color: white !important; }
+                    } 
+                    input[type="checkbox"]:checked + .check {
+                        border: 1.5px solid white !important;
+                        &::before { background-color: white !important; }
+                    }
+                    &:hover input[type="checkbox"] + .check {
+                        border: 1.5px solid white !important;
+                        background-color: $secondary !important;
+                    }
                 }
             }
-            .label-details {
-                font-weight: normal;
-                color: $gray3;
+            .sortable-ghost {
+                border: 1px dashed $gray2;
+                display: block;
+                padding: 0.7em 0.9em;
+                margin: 4px;
+                height: 40px;
+                position: relative;
+
+                .grip-icon { 
+                    color: white; 
+                }
             }
-            .not-saved {
-                font-style: italic;
-                font-weight: bold;
-                color: $danger;
+        }
+
+        .available-metadata-area {
+            padding: 10px 0px 10px 10px;
+            margin: 0;
+            max-width: 500px;
+            min-width: 20.8333333%;
+            font-size: 0.875rem;
+
+            @media screen and (max-width: 769px) {
+                max-width: 100%;
+                padding: 10px;
+                h3 {
+                    margin: 1em 0em 1em 0em !important;
+                }
+                .available-metadatum-item::before,
+                .available-metadatum-item::after {
+                    display: none !important;
+                }
             }
-            .controls { 
-                position: absolute;
-                right: 5px;
-                top: 10px;
-                .switch {
+
+            h3 {
+                margin: 0.2em 0em 1em -1.2em;
+                font-weight: 500;
+            }
+
+            .available-metadatum-item {
+                padding: 0.7em;
+                margin: 4px;
+                background-color: white;
+                cursor: pointer;
+                left: 0;
+                line-height: 1.3em;
+                height: 40px;
+                position: relative;
+                border: 1px solid $gray2;
+                border-radius: 1px;
+                transition: left 0.2s ease;
+                
+                .grip-icon { 
+                    color: $gray3;
+                    top: -4px;
                     position: relative;
-                    bottom: 3px;
+                    display: inline-block;
                 }
                 .icon {
-                    bottom: 1px;   
                     position: relative;
-                    i, i:before { font-size: 20px; }
+                    bottom: 1px;
                 }
-            }
-    
-            &.not-sortable-item, &.not-sortable-item:hover {
-                cursor: default;
-                background-color: white !important;
-
-                // .handle .label-details, .handle .icon, {
-                //     color: $gray3 !important;
-                // }
-            } 
-            &.not-focusable-item, &.not-focusable-item:hover {
-                cursor: default;
-               
                 .metadatum-name {
-                    color: $secondary;
+                    text-overflow: ellipsis;
+                    overflow-x: hidden;
+                    white-space: nowrap;
+                    font-weight: bold;
+                    margin-left: 0.4em;
+                    display: inline-block;
+                    max-width: 180px;
+                    width: 60%;
                 }
-                .handle .label-details, .handle .icon {
-                    color: $gray3 !important;
+                &:after,
+                &:before {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    right: 100%;
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                }
+                &:after {
+                    top: -1px;
+                    border-color: transparent white transparent transparent;
+                    border-right-width: 16px;
+                    border-top-width: 20px;
+                    border-bottom-width: 20px;
+                    left: -19px;
+                }
+                &:before {
+                    top: -1px;
+                    border-color: transparent $gray2 transparent transparent;
+                    border-right-width: 16px;
+                    border-top-width: 20px;
+                    border-bottom-width: 20px;
+                    left: -20px;
                 }
             }
-            &.disabled-metadatum {
-                color: $gray3;
-            }    
-        }
-        .active-metadatum-item:hover:not(.not-sortable-item) {
-            background-color: $secondary;
-            border-color: $secondary;
-            color: white !important;
-                    
-            &>.field, form {
-                background-color: white !important;
+
+            .sortable-drag {
+                opacity: 1 !important;
             }
 
-            .label-details, .icon, .not-saved, .icon-level-identifier>i {
-                color: white !important;
-            }
-
-            .grip-icon { 
-                fill: white; 
-            }
-
-            .switch.is-small {
-                input[type="checkbox"] + .check {
-                    background-color: $secondary !important;
-                    border: 1.5px solid white !important;
-                    &::before { background-color: white !important; }
-                } 
-                input[type="checkbox"]:checked + .check {
-                    border: 1.5px solid white !important;
-                    &::before { background-color: white !important; }
+            @keyframes hightlighten {
+                0%   {
+                    color: #222;             
+                    background-color: white;
+                    border-color: white;
                 }
-                &:hover input[type="checkbox"] + .check {
-                    border: 1.5px solid white !important;
-                    background-color: $secondary !important;
+                25%  {
+                    color: white;            
+                    background-color: #2cb4c1; 
+                    border-color: #2cb4c1;
+                }
+                75%  {
+                    color: white;            
+                    background-color: #2cb4c1; 
+                    border-color: #2cb4c1;
+                }
+                100% {
+                    color: #222;             
+                    background-color: white;
+                    border-color: white;
                 }
             }
-        }
-        .sortable-ghost {
-            border: 1px dashed $gray2;
-            display: block;
-            padding: 0.7em 0.9em;
-            margin: 4px;
-            height: 40px;
-            position: relative;
-
-            .grip-icon { 
-                fill: white; 
+            @keyframes hightlighten-icon {
+                0%   { color: #b1b1b1; }
+                25%  { color: white; }
+                75%  { color: white; }
+                100% { color: #b1b1b1; }
             }
-        }
-    }
-
-    .available-metadata-area {
-        padding: 10px 0px 10px 10px;
-        margin: 0;
-        max-width: 280px;
-        font-size: 14px;
-
-        @media screen and (max-width: 769px) {
-            max-width: 100%;
-            padding: 10px;
-            h3 {
-                margin: 1em 0em 1em 0em !important;
+            @keyframes hightlighten-arrow {
+                0%   {
+                    border-color: transparent white transparent transparent;
+                    border-color: transparent white transparent transparent; 
+                }
+                25%  {
+                    border-color: transparent #2cb4c1 transparent transparent;
+                    border-color: transparent #2cb4c1 transparent transparent; 
+                }
+                75%  {
+                    border-color: transparent #2cb4c1 transparent transparent;
+                    border-color: transparent #2cb4c1 transparent transparent; 
+                }
+                100% {
+                    border-color: transparent white transparent transparent;
+                    border-color: transparent white transparent transparent;  
+                }
             }
-            .available-metadatum-item::before,
-            .available-metadatum-item::after {
-                display: none !important;
-            }
-        }
-
-        h3 {
-            margin: 0.2em 0em 1em -1.2em;
-            font-weight: 500;
-        }
-
-        .available-metadatum-item {
-            padding: 0.7em;
-            margin: 4px;
-            background-color: white;
-            cursor: pointer;
-            left: 0;
-            line-height: 1.3em;
-            height: 40px;
-            position: relative;
-            border: 1px solid $gray2;
-            border-radius: 1px;
-            transition: left 0.2s ease;
-            
-            .grip-icon { 
-                fill: $gray3;
-                top: -3px;
-                position: relative;
-                display: inline-block;
-            }
-            .icon {
-                position: relative;
-                bottom: 1px;
-            }
-            .metadatum-name {
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                white-space: nowrap;
-                font-weight: bold;
-                margin-left: 0.4em;
-                display: inline-block;
-                max-width: 200px;
-            }
-            &:after,
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 100%;
-                width: 0;
-                height: 0;
-                border-style: solid;
-            }
-            &:after {
-                top: -1px;
-                border-color: transparent white transparent transparent;
-                border-right-width: 16px;
-                border-top-width: 20px;
-                border-bottom-width: 20px;
-                left: -19px;
-            }
-            &:before {
-                top: -1px;
-                border-color: transparent $gray2 transparent transparent;
-                border-right-width: 16px;
-                border-top-width: 20px;
-                border-bottom-width: 20px;
-                left: -20px;
-            }
-        }
-
-        .sortable-drag {
-            opacity: 1 !important;
-        }
-
-        @keyframes hightlighten {
-            0%   {
-                color: #222;             
+            .hightlighted-metadatum {
                 background-color: white;
-                border-color: white;
-            }
-            25%  {
-                color: white;            
-                background-color: #2cb4c1; 
-                border-color: #2cb4c1;
-            }
-            75%  {
-                color: white;            
-                background-color: #2cb4c1; 
-                border-color: #2cb4c1;
-            }
-            100% {
-                color: #222;             
-                background-color: white;
-                border-color: white;
-            }
-        }
-        @keyframes hightlighten-icon {
-            0%   { fill: #b1b1b1; }
-            25%  { fill: white; }
-            75%  { fill: white; }
-            100% { fill: #b1b1b1; }
-        }
-        @keyframes hightlighten-arrow {
-            0%   {
-                border-color: transparent white transparent transparent;
-                border-color: transparent white transparent transparent; 
-            }
-            25%  {
-                border-color: transparent #2cb4c1 transparent transparent;
-                border-color: transparent #2cb4c1 transparent transparent; 
-            }
-            75%  {
-                border-color: transparent #2cb4c1 transparent transparent;
-                border-color: transparent #2cb4c1 transparent transparent; 
-            }
-            100% {
-                border-color: transparent white transparent transparent;
-                border-color: transparent white transparent transparent;  
-            }
-        }
-        .hightlighted-metadatum {
-            background-color: white;
-            position: relative;
-            left: 0px;
-            animation-name: hightlighten;
-            animation-duration: 1.0s;
-            animation-iteration-count: 2;
-            
-            .grip-icon{
-                animation-name: hightlighten-icon;
-                animation-duration: 1.0s;
-                animation-iteration-count: 2; 
-            }
-
-            &::before,
-            &::after {
-                animation-name: hightlighten-arrow;
+                position: relative;
+                left: 0px;
+                animation-name: hightlighten;
                 animation-duration: 1.0s;
                 animation-iteration-count: 2;
-            }
-        }
-        .available-metadatum-item:hover {
-            background-color: $secondary;
-            border-color: $secondary;
-            color: white;
-            position: relative;
-            left: -4px;
+                
+                .grip-icon{
+                    animation-name: hightlighten-icon;
+                    animation-duration: 1.0s;
+                    animation-iteration-count: 2; 
+                }
 
-            &:after {
-                border-color: transparent $secondary transparent transparent;
-            }
-            &:before {
-                border-color: transparent $secondary transparent transparent;
-            }
-            .icon {
-                color: white !important;
-            }
-          
-            .grip-icon { 
-                fill: white;
-            }
-            
-        }
-    }
-    .inherited-metadatum {
-        &.active-metadatum-item:hover:not(.not-sortable-item) {
-            background-color: $blue5;
-            border-color: $blue5;
-            
-            .switch.is-small {
-                input[type="checkbox"] + .check {
-                    background-color: $blue5 !important;
-                } 
-                &:hover input[type="checkbox"] + .check {
-                    background-color: $blue5 !important;
+                &::before,
+                &::after {
+                    animation-name: hightlighten-arrow;
+                    animation-duration: 1.0s;
+                    animation-iteration-count: 2;
                 }
             }
-        }
-        &.available-metadatum-item:hover {
-            background-color: $blue5 !important;
-            border-color: $blue5 !important;
-        
-            &:after {
-                border-color: transparent $blue5 transparent transparent !important;
-            }
-            &:before {
-                border-color: transparent $blue5 transparent transparent !important;
-            }
+            .available-metadatum-item:hover {
+                background-color: $secondary;
+                border-color: $secondary;
+                color: white;
+                position: relative;
+                left: -4px;
 
+                &:after {
+                    border-color: transparent $secondary transparent transparent;
+                }
+                &:before {
+                    border-color: transparent $secondary transparent transparent;
+                }
+                .icon {
+                    color: white !important;
+                }
+            
+                .grip-icon { 
+                    color: white;
+                }
+                
+            }
         }
-    }
-    #mappers-options-dropdown {
-        background-color: transparent;
-        color: #fff;
+        .inherited-metadatum {
+            &.active-metadatum-item:hover:not(.not-sortable-item) {
+                background-color: $blue5;
+                border-color: $blue5;
+                
+                .switch.is-small {
+                    input[type="checkbox"] + .check {
+                        background-color: $blue5 !important;
+                    } 
+                    &:hover input[type="checkbox"] + .check {
+                        background-color: $blue5 !important;
+                    }
+                }
+            }
+            &.available-metadatum-item:hover {
+                background-color: $blue5 !important;
+                border-color: $blue5 !important;
+            
+                &:after {
+                    border-color: transparent $blue5 transparent transparent !important;
+                }
+                &:before {
+                    border-color: transparent $blue5 transparent transparent !important;
+                }
+
+            }
+        }
+        #mappers-options-dropdown {
+            background-color: transparent;
+            color: #fff;
+        }
+
     }
 
 </style>

src/admin/components/lists/processes-list.vue

@@ -20,7 +20,9 @@
                             class="button is-white"
                             slot="trigger">
                         <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <b-icon icon="menu-down"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                        </span>
                     </button> 
 
                     <b-dropdown-item
@@ -171,7 +173,7 @@
                                         v-if="bgProcess.done <= 0"
                                         class="icon has-text-gray action-icon"
                                         @click="pauseProcess(index)">
-                                    <i class="mdi mdi-18px mdi-stop-circle"/>
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-stop"/>
                                 </span>
                                 <span 
                                         v-tooltip="{
@@ -181,7 +183,7 @@
                                         }"
                                         v-if="bgProcess.done > 0 && !bgProcess.error_log"
                                         class="icon has-text-success">
-                                    <i class="mdi mdi-18px mdi-checkbox-marked-circle"/>
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-finish"/>
                                 </span>
                                 <span 
                                         v-tooltip="{
@@ -191,7 +193,7 @@
                                         }"
                                         v-if="bgProcess.done > 0 && bgProcess.error_log"
                                         class="icon has-text-danger">
-                                    <i class="mdi mdi-18px mdi-sync-alert" />
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-processerror" />
                                 </span>
                             </div>
                         </td>

src/admin/components/lists/recursive-term-item.vue

@@ -12,15 +12,15 @@
         <span 
                 v-if="term.parent != 0 && index == 0"
                 class="icon children-icon">
-            <i class="mdi mdi-24px mdi-subdirectory-arrow-right"/>
+            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-nextlevel"/>
         </span> 
         <span class="children-dropdown icon">
             <i 
                     :class="{ 
-                        'mdi-menu-right': !showChildren,  
-                        'mdi-menu-down': showChildren,
+                        'tainacan-icon-arrowright': !showChildren,  
+                        'tainacan-icon-arrowdown': showChildren,
                         'is-disabled': isEditingTerm }"
-                    class="mdi mdi-36px"
+                    class="tainacan-icon tainacan-icon-36px"
                     v-if="term.total_children > 0"
                     @click.prevent="toggleShowChildren()"/>
         </span>
@@ -46,18 +46,18 @@
                 :class="{'is-disabled': isEditingTerm}">
             <a @click="addNewChildTerm(term, index)">
                 <span class="icon">
-                    <i class="mdi mdi-18px mdi-plus-circle"/>
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-add"/>
                 </span>
             </a>
             <a
                     @click.prevent="editTerm()">
                 <span class="icon">
-                    <i class="mdi mdi-18px mdi-pencil"/>
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
                 </span>
             </a>
             <a @click.prevent="tryToRemoveTerm()">
                 <span class="icon">
-                    <i class="mdi mdi-18px mdi-delete"/>
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-delete"/>
                 </span>
             </a>
         </span>
@@ -233,8 +233,11 @@ export default {
             });  
         },
         eventOnChildTermDeleted(parentTermId) {
-            if (this.term.id == parentTermId && this.totalTerms > 0)
+            if (this.term.id == parentTermId && this.totalTerms > 0) {
                 this.totalTerms--;
+                this.loadChildTerms(parentTermId);
+            }
+            
         },
         eventOnEditTerm() {
             this.isEditingTerm = true;
@@ -296,6 +299,8 @@ export default {
             color: $blue2;
             position: absolute;
             left: -21px;
+            top: 1px;
+            font-size: 24px;
         }
         .children-dropdown {
             color: $blue4;

src/admin/components/lists/taxonomies-list.vue

@@ -21,7 +21,9 @@
                             class="button is-white"
                             slot="trigger">
                         <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <b-icon icon="menu-down"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                        </span>
                     </button> 
 
                     <b-dropdown-item
@@ -110,17 +112,19 @@
                                         id="button-edit" 
                                         :aria-label="$i18n.getFrom('taxonomies','edit_item')" 
                                         @click="onClickTaxonomy($event, taxonomy.id, index)">
-                                    <b-icon 
-                                            type="is-secondary" 
-                                            icon="pencil"/>
+                                    <span class="icon">
+                                        <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
+                                    </span>
                                 </a>
                                 <a 
                                         id="button-delete" 
                                         :aria-label="$i18n.get('label_button_delete')" 
                                         @click.prevent.stop="deleteOneTaxonomy(taxonomy.id)">
-                                    <b-icon 
-                                            type="is-secondary" 
-                                            :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                                    <span class="icon">
+                                        <i 
+                                                :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
+                                                class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                    </span>
                                 </a>
                             </div>
                         </td>

src/admin/components/lists/terms-list.vue

@@ -15,17 +15,17 @@
                     :disabled="localTerms.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
                     class="button is-white is-small"
                     @click="onChangeOrder('asc')">
-                <b-icon 
-                        class="gray-icon"
-                        icon="sort-ascending"/>
+                <span class="icon gray-icon">
+                    <i class="tainacan-icon tainacan-icon-sortascending"/>
+                </span>
             </button>
             <button
                     :disabled="localTerms.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
                     class="button is-white is-small"
                     @click="onChangeOrder('desc')">
-                <b-icon 
-                        class="gray-icon"
-                        icon="sort-descending"/>
+                <span class="icon gray-icon">
+                    <i class="tainacan-icon tainacan-icon-sortdescending"/>
+                </span>
             </button>
         </b-field>
         <div class="search-area is-hidden-mobile">
@@ -41,7 +41,7 @@
                     <span
                             @click="searchTerms(0)"
                             class="icon is-right">
-                        <i class="mdi mdi-magnify" />
+                        <i class="tainacan-icon tainacan-icon-search" />
                     </span>
             </div>
         </div>
@@ -113,7 +113,9 @@
         <section class="section">
             <div class="content has-text-grey has-text-centered">
                 <p>
-                    <taxonomies-icon class="taxonomies-term-icon"/>
+                    <span class="icon is-medium">
+                        <i class="tainacan-icon tainacan-icon-36px tainacan-icon-terms"/>
+                    </span>
                 </p>
                 <p>{{ $i18n.get('info_no_terms_created_on_taxonomy') }}</p>
                 <button
@@ -133,7 +135,6 @@ import { mapActions, mapGetters } from 'vuex';
 import TermEditionForm from '../edition/term-edition-form.vue';
 import RecursiveTermItem from './recursive-term-item.vue'
 import BasicTermItem from './basic-term-item.vue'
-import TaxonomiesIcon from '../other/taxonomies-icon.vue';
 import t from 't';
 
 export default {
@@ -175,13 +176,15 @@ export default {
         },
         taxonomyId() {
             this.loadTerms(0);
+        },
+        isEditingTerm(value) {
+            this.$emit('isEditingTermUpdate', value);
         }
     },
     components: {
         RecursiveTermItem,
         BasicTermItem,
-        TermEditionForm,
-        TaxonomiesIcon
+        TermEditionForm
     },
     methods: {
         ...mapActions('taxonomy', [
@@ -354,8 +357,10 @@ export default {
                 });
         },
         eventOnChildTermDeleted(parentTermId) {
-            if ((parentTermId == 0 || parentTermId == undefined ) && this.totalTerms > 0)
+            if ((parentTermId == 0 || parentTermId == undefined ) && this.totalTerms > 0) {
                 this.totalTerms--;
+                this.loadTerms(parentTermId);
+            }
         },
         eventOnEditTerm(term) {
             // Position edit form in a visible area
@@ -404,10 +409,6 @@ export default {
 </script>
 
 <style lang="scss">
-    .taxonomies-term-icon {
-        height: 24px;
-        width: 24px;
-    }
     @import "../../scss/_variables.scss";
 
     .columns {
@@ -424,11 +425,15 @@ export default {
             padding: 4px;
             margin-left: auto;
 
-            .gray-icon, .gray-icon .icon {
+            .gray-icon, 
+            .gray-icon .icon {
                 color: $gray4 !important;
             }
-            .gray-icon .icon i::before, .gray-icon i::before {
+            .gray-icon 
+            .icon i::before, 
+            .gray-icon i::before {
                 font-size: 21px !important;
+                width: 26px;
             }
         }
 

src/admin/components/navigation/primary-menu.vue

@@ -14,9 +14,9 @@
                             tag="a"
                             to="/collections"
                             :class="activeRoute == 'CollectionsPage' || $route.params.collectionId != undefined ? 'is-active':''">
-                        <b-icon
-                                size="is-small"
-                                icon="folder-multiple"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-collections"/>
+                        </span>
                         <span class="menu-text">{{ $i18n.getFrom('collections', 'name') }}</span>
                     </router-link>
                 </li>
@@ -25,9 +25,9 @@
                             tag="a"
                             to="/items"
                             :class="activeRoute == 'ItemsPage' ? 'is-active':''">
-                        <b-icon
-                                size="is-small"
-                                icon="file-multiple"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-items"/>
+                        </span>
                         <span class="menu-text">{{ $i18n.getFrom('items', 'name') }}</span>
                     </router-link>
                 </li>
@@ -38,7 +38,7 @@
                             to="/metadata"
                             :class="activeRoute == 'MetadataPage' ? 'is-active':''">
                         <span class="icon">
-                            <i class="mdi mdi-format-list-bulleted-type"/>
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-metadata"/>
                         </span>
                         <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
                     </router-link>
@@ -49,7 +49,7 @@
                             to="/filters"
                             :class="activeRoute == 'FiltersPage' ? 'is-active':''">
                         <span class="icon">
-                            <i class="mdi mdi-filter"/>
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-filters"/>
                         </span>
                         <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
                     </router-link>
@@ -59,7 +59,9 @@
                             tag="a"
                             to="/taxonomies"
                             :class="activeRoute == 'Page' ? 'is-active':''">
-                        <taxonomies-icon />
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-taxonomies"/>
+                        </span>
                         <span class="menu-text">{{ $i18n.getFrom('taxonomies', 'name') }}</span>
                     </router-link>
                 </li>
@@ -68,7 +70,10 @@
                             tag="a"
                             to="/events"
                             :class="activeRoute == 'EventsPage' ? 'is-active':''">
-                        <activities-icon /><span class="menu-text">{{ $i18n.get('events') }}</span>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-activities"/>
+                        </span>
+                        <span class="menu-text">{{ $i18n.get('events') }}</span>
                     </router-link>
                 </li>
                 <li>
@@ -81,7 +86,7 @@
                                 activeRoute == 'ImporterCreationForm' ||
                                 activeRoute == 'ImporterMappingForm' ) ? 'is-active':''">
                         <span class="icon">
-                            <i class="mdi mdi-24px mdi-import"/>
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-importers"/>
                         </span>
                         <span class="menu-text menu-text-import">{{ $i18n.get('importers') }}</span>
                     </router-link>
@@ -92,19 +97,12 @@
 </template>
 
 <script>
-import ActivitiesIcon from '../other/activities-icon.vue';
-import TaxonomiesIcon from '../other/taxonomies-icon.vue';
-
 export default {
     name: 'PrimaryMenu',
     props: {
         isMenuCompressed: false,
         activeRoute: '/collections'
-    },
-    components: {
-        ActivitiesIcon,
-        TaxonomiesIcon
-    },
+    }
 }
 </script>
 
@@ -157,25 +155,12 @@ export default {
                 -webkit-transition: padding 0.2s linear; /* Safari */
                 transition: padding 0.2s linear;
 
-                .activities-icon {
-                    fill: white;
-                    margin-bottom: -4px;
-                }
-                .taxonomies-icon {
-                    fill: white;
-                    margin-bottom: -2px;
-                }
-                .mdi-import::before {
-                    font-size: 22px !important;
-                    position: relative;
-                    left: -2px;
-                }
                 .icon {
                     height: auto;
                     width: auto;
-                    i {
-                        font-size: 18px !important;
-                    }
+                    // i, i::before {
+                    //     font-size: 18px !important;
+                    // }
                 }
             }
 

src/admin/components/navigation/tainacan-collection-subheader.vue

@@ -8,7 +8,7 @@
                     @click="$router.go(-1)"
                     class="button is-turquoise4">
                 <span class="icon">
-                    <i class="mdi mdi-chevron-left"/>
+                    <i class="tainacan-icon tainacan-icon-previous"/>
                 </span>
             </button>
         </div>
@@ -19,7 +19,7 @@
                             @click="$router.go(-1)"
                             class="button is-turquoise4">
                         <span class="icon">
-                            <i class="mdi mdi-chevron-left"/>
+                            <i class="tainacan-icon tainacan-icon-previous"/>
                         </span>
                     </button>
                 </div>
@@ -63,7 +63,7 @@
                                 :label="$i18n.get('items')"
                                 position="is-bottom">
                             <span class="icon">
-                                <i class="mdi mdi-file-multiple"/>
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-items"/>
                             </span>
                         </b-tooltip>
                         <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
@@ -80,7 +80,7 @@
                                 :label="$i18n.get('label_settings')"
                                 position="is-bottom">
                             <span class="icon">
-                                <i class="mdi mdi-settings"/>
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-settings"/>
                             </span>
                         </b-tooltip>
                         <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
@@ -97,7 +97,7 @@
                                 :label="$i18n.getFrom('metadata', 'name')"
                                 position="is-bottom">
                             <span class="icon">
-                                <i class="mdi mdi-format-list-bulleted-type"/>
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-metadata"/>
                             </span>
                         </b-tooltip>
                         <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
@@ -115,7 +115,7 @@
                                 :label="$i18n.getFrom('filters', 'name')"
                                 position="is-bottom">
                             <span class="icon">
-                                <i class="mdi mdi-filter"/>
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-filters"/>
                             </span>
                         </b-tooltip>
                         <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
@@ -131,7 +131,9 @@
                         <b-tooltip 
                                 :label="$i18n.get('events')"
                                 position="is-bottom">
-                            <activities-icon />
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-activities"/>
+                            </span>
                         </b-tooltip>
                         <!-- <span class="menu-text">{{ $i18n.get('events') }}</span> -->
                     </router-link>
@@ -145,7 +147,6 @@
 
 <script>
 import { mapActions } from 'vuex';
-import ActivitiesIcon from '../other/activities-icon.vue';
 
 export default {
     name: 'TainacanCollectionSubheader',
@@ -159,9 +160,6 @@ export default {
             childrenBreadCrumbItems: []
         }
     },
-    components: {
-        ActivitiesIcon
-    },
     props: {
         id: Number,
     },
@@ -262,7 +260,6 @@ export default {
             background-color: $gray1;
             color: $turquoise4;
             display: flex;
-            align-items: center;
 
             button, 
             button:hover, 
@@ -272,8 +269,10 @@ export default {
                 color: $turquoise4;
                 background-color: transparent !important;
                 border: none;
-                .icon i {
-                    font-size: 34px;
+                height: 42px !important;
+                .icon {
+                    margin-top: -2px;
+                    font-size: 24px;
                 }
             }
         }
@@ -305,11 +304,6 @@ export default {
             // overflow: hidden;
             // max-width: 50px;
 
-            svg.activities-icon {
-                top: 3px;
-                position: relative;
-            }
-
             &.is-active {
                 background-color: $turquoise4;
                 a { 
@@ -318,10 +312,6 @@ export default {
                     color: white;
                     text-decoration: none;
                 }
-                svg.activities-icon {
-                    transition: fill 0.2s ease;
-                    fill: white !important;
-                }
             }
             &:hover:not(.is-active) {
                 // max-width: 100%;
@@ -332,9 +322,6 @@ export default {
                     text-decoration: none; 
                     color: $turquoise5;
                 }
-                svg.activities-icon {
-                    fill: $turquoise5 !important;
-                }
                 // .menu-text {
                 //     opacity: 1.0;
                 //     width: 100%;

src/admin/components/navigation/tainacan-header.vue

@@ -3,7 +3,16 @@
             id="tainacan-header"
             class="level is-mobile">
         <div class="level-left">
-            <div class="level-item">
+            <div class="level-item home-area">
+                <router-link
+                        tag="a"
+                        to="/">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-home has-text-blue5"/>
+                    </span>
+                </router-link>
+            </div>
+            <div class="level-item logo-area">
                 <router-link
                         tag="a"
                         to="/">
@@ -17,10 +26,10 @@
         <div class="level-right">
             <div class="is-hidden-tablet">
                 <button
-                    @click="$router.push($routerHelper.getItemsPath())"
-                    class="button is-small is-white level-item">
-                    <span class="icon is-right">
-                        <i class="mdi mdi-24px mdi-magnify"/>
+                        @click="$router.push($routerHelper.getItemsPath())"
+                        class="button is-small is-white level-item">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-search"/>
                     </span>
                 </button>
             </div>
@@ -35,9 +44,9 @@
                             @input="futureSearchQuery = $event.target.value"
                             @keyup.enter="updateSearch()">
                     <span class="icon is-right">
-                        <i
+                        <i 
                                 @click="updateSearch()"
-                                class="mdi mdi-magnify"/>
+                                class="tainacan-icon tainacan-icon-search"/>
                     </span>
                 </div>
                 <b-dropdown
@@ -52,11 +61,11 @@
                     <b-dropdown-item>
                         <div :style="{'height': '25px'}">
                             <p class="is-pulled-left advanced-search-text-di">{{ $i18n.get('advanced_search') }}</p>
-                            <b-icon
-                                    style="margin-top: 2px"
-                                    type="is-secondary"
-                                    icon="menu-up"
-                                    class="is-pulled-right" />
+                            <span 
+                                    style="margin-top: 10px;"
+                                    class="icon is-pulled-right">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowup has-text-secondary"/>
+                            </span>
                         </div>
                         <hr class="advanced-search-hr">
                     </b-dropdown-item>
@@ -73,7 +82,9 @@
             <button
                     @click="showProcesses = !showProcesses"
                     class="button is-small is-white level-item">
-                <b-icon icon="swap-vertical"/>
+                <span class="icon">
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-processes"/>
+                </span>
             </button>
             <processes-popup
                     v-if="showProcesses"
@@ -81,7 +92,9 @@
             <a
                     class="level-item"
                     :href="wordpressAdmin">
-                <b-icon icon="wordpress"/>
+                <span class="icon">
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-wordpress"/>
+                </span>
             </a>
         </div>
     </div>
@@ -163,8 +176,14 @@
 
         .level-left {
             margin-left: -12px;
-
-            .level-item {
+            .home-area {
+                font-size: 24px;
+                width: 50px;
+                height: $header-height;
+                background-color: $gray1;
+                padding-bottom: 0.4rem;
+            }
+            .logo-area {
                 height: $header-height;
                 width: $side-menu-width;
                 cursor: pointer;
@@ -175,7 +194,7 @@
                 .tainacan-logo {
                     height: 24px;
                     padding: 0px;
-                    margin-left: 19px;
+                    // margin-left: 19px;
                 }
             }
         }
@@ -196,7 +215,7 @@
                 .control {
                     .search-header {
                         border: 1px solid $gray2 !important;
-                        height: 27px;
+                        height: 28px;
                         transition: width linear 0.15s;
                         -webkit-transition: width linear 0.15s;
                         width: 220px;

src/admin/components/navigation/tainacan-repository-subheader.vue

@@ -11,14 +11,16 @@
                 v-if="!isRepositoryLevel"
                 class="button"
                 id="view-collection-button">
-            <eye-icon /> {{ $i18n.get('label_view_collection') }}
+            <span class="icon">
+                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
+            </span>
+             {{ $i18n.get('label_view_collection') }}
         </a>
     </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import EyeIcon from '../other/eye-icon.vue';
 
 export default {
     name: 'TainacanRepositorySubheader',
@@ -28,9 +30,6 @@ export default {
             collectionId: ''
         }
     },
-    components: {
-        EyeIcon
-    },
     props: {
         isMenuCompressed: false,
         isRepositoryLevel: true
@@ -115,7 +114,7 @@ export default {
             background-color: $turquoise4;
             color: white;
             
-            .eye-icon {
+            .icon {
                 margin-right: 0.75rem;
             }
         }

src/admin/components/other/activities-icon.vue

@@ -1,30 +0,0 @@
-<template>
-<svg 
-xmlns="http://www.w3.org/2000/svg" 
-x="0px" 
-y="0px"
-width="20" 
-height="20" 
-viewBox="0 0 24 24" 
-class="activities-icon" 
-xml:space="preserve">
-<path 
-d="M20,11c0,1-0.2,2.1-0.5,3h-2.2c0.4-0.9,0.7-1.9,0.7-3c0-3.9-3.1-7-7-7s-7,3.1-7,7c0,3.5,2.6,6.5,6,6.9v2
-	c-4.5-0.5-8-4.3-8-8.9c0-5,4-9,9-9S20,6,20,11z M14,22h-2v-2h2V22z M14,18h-2v-2h2V18z M22,22h-6v-2h6V22z M22,18h-6v-2h6V18z M12,6
-	h-2l0,6l2.7,2H16l-4-3V6z"/>
-</svg>
-</template>
-
-<script>
-export default {
-    name: 'ActivitiesIcon'
-}
-</script>
-
-<style type="text/scss">
-
-	svg.activities-icon {
-        fill: #898d8f;
-    }
-    
-</style>

src/admin/components/other/alert-icon.vue

@@ -1,25 +0,0 @@
-<template>
-
-<svg 
-xmlns="http://www.w3.org/2000/svg" 
-x="0px" 
-y="0px"
-width="6.44px" 
-height="32.202px" 
-viewBox="0 0 6.44 32.202" 
-enable-background="new 0 0 6.44 32.202" 
-xml:space="preserve">
-<path
-fill="#BB3636" 
-d="M0,25.761h6.44v6.44H0V25.761 M0,0h6.44v19.321H0V0"/>
-</svg>
-
-</template>
-
-<script>
-export default {
-    name: 'AlertIcon'
-}
-</script>
-
-

src/admin/components/other/check-icon.vue

@@ -1,25 +0,0 @@
-<template>
-
-<svg 
-xmlns="http://www.w3.org/2000/svg" 
-x="0px" 
-y="0px"
-width="38.819px" 
-height="29.746px"
-viewBox="0 0 38.819 29.746" 
-enable-background="new 0 0 38.819 29.746" 
-xml:space="preserve">
-<path
-fill="#259F87"
-d="M38.819,3.128L12.2,29.746L0,17.546l3.128-3.128l9.073,9.05L35.691,0L38.819,3.128z"/>
-</svg>
-
-</template>
-
-<script>
-export default {
-    name: 'CheckIcon'
-}
-</script>
-
-

src/admin/components/other/checkbox-radio-modal.vue

@@ -14,8 +14,7 @@
                         @input="autoComplete"
                         class="input">
                 <span class="icon is-right">
-                    <i
-                            class="mdi mdi-magnify"/>
+                    <i class="tainacan-icon tainacan-icon-search" />
                 </span>
             </div>
 
@@ -35,8 +34,9 @@
                                 role="button"
                                 class="tainacan-checkbox-list-page-changer"
                                 @click="beforePage">
-                            <b-icon
-                                    icon="chevron-left"/>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-previous"/>
+                            </span>
                         </a>
                         <ul
                                 :class="{
@@ -48,11 +48,19 @@
                                     class="tainacan-li-checkbox-list"
                                     v-for="(option, key) in options"
                                     :key="key">
-                                <b-checkbox
-                                        v-model="selected"
-                                        :native-value="option.value">
-                                    {{ `${ limitChars(option.label) }` }}
-                                </b-checkbox>
+                                <label class="b-checkbox checkbox is-small">
+                                    <input 
+                                            v-model="selected"
+                                            :value="option.value"
+                                            type="checkbox"> 
+                                    <span class="check" /> 
+                                    <span class="control-label">
+                                        <span class="checkbox-label-text">{{ `${ limitChars(option.label) }` }}</span> 
+                                        <span 
+                                            v-if="isFilter && option.total_items != undefined"
+                                            class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
+                                    </span>
+                                </label>
                             </li>
                             <b-loading
                                     :is-full-page="false"
@@ -63,8 +71,9 @@
                                 role="button"
                                 class="tainacan-checkbox-list-page-changer"
                                 @click="nextPage">
-                            <b-icon
-                                    icon="chevron-right"/>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-next"/>
+                            </span>
                         </a>
                     </div>
 
@@ -84,25 +93,40 @@
                                     :id="`${key}.${index}-tainacan-li-checkbox-model`"
                                     :ref="`${key}.${index}-tainacan-li-checkbox-model`"
                                     :key="index">
-                                <b-checkbox
+                                <label 
                                         v-if="isCheckbox"
-                                        v-model="selected"
-                                        :native-value="option.value">
-                                    {{ `${option.label}` }}
-                                </b-checkbox>
+                                        class="b-checkbox checkbox is-small">
+                                    <input 
+                                            v-model="selected"
+                                            :value="option.value"
+                                            type="checkbox"> 
+                                    <span class="check" /> 
+                                    <span class="control-label">
+                                        <span class="checkbox-label-text">{{ `${option.label}` }}</span> 
+                                        <span 
+                                                v-if="isFilter && option.total_items != undefined"
+                                                class="has-text-gray">
+                                            &nbsp;{{ "(" + option.total_items + ")" }}
+                                        </span>
+                                    </span>
+                                </label>
                                 <b-radio
                                         v-else
                                         v-model="selected"
                                         :native-value="option.value">
                                     {{ `${option.label}` }}
+                                    <span 
+                                            v-if="isFilter && option.total_items != undefined"
+                                            class="has-text-gray">
+                                        &nbsp;{{ "(" + option.total_items + ")" }}
+                                    </span>
                                 </b-radio>
                                 <a
                                         v-if="option.total_children > 0"
                                         @click="getOptionChildren(option, key, index)">
-                                    <b-icon
-                                            class="is-pulled-right"
-                                            icon="menu-right"
-                                    />
+                                    <span class="icon is-pulled-right">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowright"/>
+                                    </span>
                                 </a>
                             </b-field>
                             <li v-if="finderColumn.length">
@@ -110,9 +134,9 @@
                                         v-if="finderColumn.length < totalRemaining[key].remaining"
                                         @click="getMoreOptions(finderColumn, key)"
                                         class="tainacan-show-more">
-                                    <b-icon
-                                            size="is-small"
-                                            icon="chevron-down"/>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-showmore"/>
+                                    </span>
                                 </div>
                             </li>
                         </ul>
@@ -132,6 +156,11 @@
                                 <a
                                         @click="getOptionChildren(pathItem.option, pathItem.column, pathItem.element)">
                                     {{ pathItem.option.label }}
+                                    <span 
+                                            v-if="isFilter && pathItem.option.total_items != undefined"
+                                            class="has-text-gray">
+                                        &nbsp;{{ "(" + pathItem.option.total_items + ")" }}
+                                    </span>
                                 </a>
                             </li>
                         </ul>
@@ -179,17 +208,33 @@
                             class="tainacan-li-search-results"
                             v-for="(option, key) in searchResults"
                             :key="key">
-                        <b-checkbox
+                        <label 
                                 v-if="isCheckbox"
-                                v-model="selected"
-                                :native-value="option.id ? option.id : option.value">
-                            {{ `${ option.name ? limitChars(option.name) : limitChars(option.label) }` }}
-                        </b-checkbox>
+                                class="b-checkbox checkbox is-small">
+                            <input                                     
+                                    v-model="selected"
+                                    :value="option.id ? option.id : option.value"
+                                    type="checkbox"> 
+                            <span class="check" /> 
+                            <span class="control-label">
+                                <span class="checkbox-label-text">{{ `${ option.name ? limitChars(option.name) : limitChars(option.label) }` }}</span> 
+                                <span 
+                                        v-if="isFilter && option.total_items != undefined"
+                                        class="has-text-gray">
+                                    &nbsp;{{ "(" + option.total_items + ")" }}
+                                </span>
+                            </span>
+                        </label>
                         <b-radio
                                 v-else
                                 v-model="selected"
                                 :native-value="option.id ? option.id : option.value">
                             {{ `${ option.name ? limitChars(option.name) : limitChars(option.label) }` }}
+                            <span 
+                                    v-if="isFilter && option.total_items != undefined"
+                                    class="has-text-gray">
+                                &nbsp;{{ "(" + option.total_items + ")" }}
+                            </span>
                         </b-radio>
                     </li>
                     <b-loading
@@ -367,7 +412,7 @@
                     let collectionTarget = ( this.metadatum_object && this.metadatum_object.metadata_type_options.collection_id ) ?
                         this.metadatum_object.metadata_type_options.collection_id : this.collection_id;
 
-                    promise = this.getValuesRelationship( collectionTarget, this.optionName, [], offset, this.maxNumOptionsCheckboxList, true);
+                    promise = this.getValuesRelationship( collectionTarget, this.optionName, this.isRepositoryLevel, [], offset, this.maxNumOptionsCheckboxList, true);
 
                     promise.request
                         .then(() => {
@@ -404,7 +449,10 @@
                     this.isSearchingLoading = true;
                     let query_items = { 'current_query': this.query };
 
-                    let query = `?hideempty=0&order=asc&number=${this.maxNumSearchResultsShow}&searchterm=${this.optionName}&` + qs.stringify(query_items);
+                    let query = `?order=asc&number=${this.maxNumSearchResultsShow}&searchterm=${this.optionName}&` + qs.stringify(query_items);
+
+                    if (!this.isFilter)
+                        query += '&hideempty=0';
 
                     let route = `/collection/${this.collection_id}/facets/${this.metadatum_id}${query}`;
 
@@ -522,7 +570,10 @@
                     parent = option.value;
                 }
 
-                let query = `?hideempty=0&order=asc&parent=${parent}&number=${this.maxNumOptionsCheckboxFinderColumns}&offset=0&` + qs.stringify(query_items);
+                let query = `?order=asc&parent=${parent}&number=${this.maxNumOptionsCheckboxFinderColumns}&offset=0&` + qs.stringify(query_items);
+
+                if (!this.isFilter)
+                    query += '&hideempty=0';
 
                 this.isColumnLoading = true;
 
@@ -552,7 +603,10 @@
                     let offset = finderColumn.length;
                     let query_items = { 'current_query': this.query };
 
-                    let query = `?hideempty=0&order=asc&parent=${parent}&number=${this.maxNumOptionsCheckboxFinderColumns}&offset=${offset}&` + qs.stringify(query_items);
+                    let query = `?order=asc&parent=${parent}&number=${this.maxNumOptionsCheckboxFinderColumns}&offset=${offset}&` + qs.stringify(query_items);
+
+                    if (!this.isFilter)
+                        query += '&hideempty=0';
 
                     this.isColumnLoading = true;
 
@@ -611,6 +665,10 @@
 
     .breadcrumb {
         background-color: white !important;
+
+        li + li::before {
+            content: ">" !important;
+        }
     }
 
     @media screen and (max-width: 768px) {
@@ -668,7 +726,7 @@
         cursor: pointer;
         border: 1px solid $gray1;
         margin-top: 10px;
-        margin-bottom: 0.2rem;
+        margin-bottom: -0.2rem;
 
         &:hover {
             background-color: $blue1;
@@ -681,7 +739,7 @@
         max-width: calc(50% - 8.3333333%);
 
         .b-checkbox, .b-radio {
-            max-width: 86%;
+            max-width: 81%;
             margin-right: 10px;
         }
 
@@ -692,10 +750,11 @@
 
     .tainacan-li-checkbox-modal {
         display: flex;
+        justify-content: space-between;
         padding: 0;
 
         .b-checkbox, .b-radio {
-            max-width: 86%;
+            max-width: 81%;
             margin-left: 0.7rem;
             height: 24px;
         }
@@ -851,6 +910,19 @@
         background-color: $turquoise1;
     }
 
+    .b-checkbox .control-label {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+
+        .checkbox-label-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+
 </style>
 
 

src/admin/components/other/custom-dialog.vue

@@ -6,7 +6,12 @@
             <div 
                     v-if="icon != undefined && icon != ''"
                     class="modal-custom-icon">
-                <component :is="icon + '-icon'"/>
+                <span class="icon is-large">
+                    <i 
+                            :style="{ color: icon == 'alert' ? '#a23939' : ( icon == 'approved' ? '#25a189' : 'inherit' ) }"
+                            :class="'tainacan-icon-' + icon"
+                            class="tainacan-icon"/>
+                </span>
             </div>
             <section 
                     class="modal-card-body">
@@ -33,10 +38,8 @@
         </div>
     </div>
 </template>
+
 <script>
-    import AlertIcon from './alert-icon.vue';
-    import CheckIcon from './check-icon.vue';
-    import QuestionIcon from './question-icon.vue';
 
     export default {
         name: 'CustomDialog',
@@ -48,11 +51,16 @@
                 type: Function,
                 default: () => {}
             }
-        },
-        components: {
-            AlertIcon,
-            CheckIcon,
-            QuestionIcon
         }
     }
-</script>
+</script>
+
+<style scoped>
+   
+    i.tainacan-icon,
+    i.tainacan-icon::before {
+        font-size: 56px;
+    }
+
+</style>
+

src/admin/components/other/eye-icon.vue

@@ -1,163 +0,0 @@
-<template>
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xml:space="preserve"
-   viewBox="0 0 20 14"
-   y="0px"
-   x="0px"
-   width="20" 
-   height="20" 
-   version="1.1"
-   class="eye-icon">
-
-<path
-   id="path56"
-   d="M 10,0 C 7.0316493,-0.05440347 4.0111777,1.1325791 2.0710468,3.4179754 1.1631135,4.4654257 0.43447312,5.681008 0,7 c 1.0982625,3.319095 3.9681881,6.044348 7.4282551,6.734139 3.3914659,0.723339 7.2342739,0.03321 9.7934699,-2.420502 C 18.475945,10.128872 19.453576,8.6385839 20,7 18.901737,3.6809051 16.031812,0.95565213 12.571745,0.26586056 11.727831,0.08190134 10.863219,-1.1439431e-4 10,0 Z m 0,2 c 2.617061,-0.050813 5.27673,1.0895398 6.849519,3.2199707 0.361792,0.6728511 1.318734,1.4471184 0.841243,2.2270081 C 16.483135,9.899037 13.995213,11.646083 11.272966,11.92392 8.5410704,12.281194 5.5668346,11.496655 3.6809516,9.4066345 3.0239343,8.7008905 2.483548,7.8849111 2.0996094,7 3.1988496,4.4005461 5.6997692,2.4563534 8.5098665,2.1053252 9.003048,2.0331183 9.5016597,1.9999846 10,2 Z" /><g
-   transform="translate(-2,-5)"
-   style="display:none"
-   class="st0"
-   id="g10">
-	<g
-   style="display:inline"
-   class="st1"
-   id="g8">
-		<g
-   id="g6">
-			<path
-   d="m 12,8 c 0.1,0 0.2,0 0.3,0 V 8 C 12.2,8 12.1,8 12,8 m 0,0 c -0.1,0 -0.2,0 -0.3,0 v 0 c 0.1,0 0.2,0 0.3,0 m 0.3,8 v 0 c -0.1,0 -0.2,0 -0.3,0 0.1,0 0.2,0 0.3,0 m -0.6,0 c 0.1,0 0.2,0 0.3,0 -0.1,0 -0.2,0 -0.3,0 v 0 M 12,6 C 5,6 2,12 2,12 c 0,0 3,6 10,6 7,0 10,-6 10,-6 0,0 -3,-6 -10,-6 z m 0.4,10 c 2,-0.2 3.6,-1.9 3.6,-4 0,-2.1 -1.6,-3.8 -3.6,-4 3.9,0.2 6.2,2.6 7.2,4 -1,1.4 -3.3,3.8 -7.2,4 z m -0.8,0 C 7.7,15.8 5.4,13.4 4.4,12 5.4,10.6 7.7,8.2 11.6,8 9.6,8.2 8,9.9 8,12 c 0,2.1 1.6,3.8 3.6,4 z M 12,14 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
-   id="path4" />
-		</g>
-	</g>
-</g>
-<g
-   transform="translate(-2,-5)"
-   style="display:none"
-   class="st0"
-   id="g18">
-	<circle
-   style="display:inline;fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10"
-   class="st2"
-   cx="12"
-   cy="11.5"
-   r="3.5"
-   id="circle12" />
-	<g
-   style="display:inline"
-   class="st1"
-   id="g16">
-		<path
-   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
-   id="path14" />
-	</g>
-</g>
-<path
-   style="display:none"
-   class="st0"
-   d="m 14,7 c 0,2.2 -1.8,4 -4,4 C 7.8,11 6,9.2 6,7 6,6.7 6,6.4 6.1,6.1 6.3,6.6 6.9,7 7.5,7 8.3,7 9,6.3 9,5.5 9,4.7 8.3,4 7.5,4 7.4,4 7.4,4 7.3,4 8,3.4 9,3 10,3 c 2.2,0 4,1.8 4,4 z M 10,2 C 4.8,2 2.7,5.6 2.1,7 2.7,8.4 4.8,12 10,12 15.2,12 17.3,8.4 17.9,7 17.3,5.6 15.2,2 10,2 m 0,-2 c 8,0 10,7 10,7 0,0 -2,7 -10,7 C 2,14 0,7 0,7 0,7 2,0 10,0 Z"
-   id="path20" />
-<g
-   transform="translate(-2,-5)"
-   style="display:none"
-   class="st0"
-   id="g42">
-	<g
-   style="display:inline"
-   class="st1"
-   id="g28">
-		<circle
-   cx="12"
-   cy="11.5"
-   r="4.5"
-   id="circle22" />
-		<g
-   id="g26">
-			<path
-   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
-   id="path24" />
-		</g>
-	</g>
-	<circle
-   style="display:inline;fill:#ffffff"
-   class="st3"
-   cx="9"
-   cy="10"
-   r="1"
-   id="circle30" />
-	<g
-   style="display:inline"
-   class="st1"
-   id="g38">
-		<circle
-   cx="12"
-   cy="11.5"
-   r="4.5"
-   id="circle32" />
-		<g
-   id="g36">
-			<path
-   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
-   id="path34" />
-		</g>
-	</g>
-	<circle
-   style="display:inline;fill:#ffffff"
-   class="st3"
-   cx="8.5"
-   cy="9.5"
-   r="1.5"
-   id="circle40" />
-</g>
-<path
-   style="display:none"
-   class="st0"
-   d="m 13,7 c 0,1.7 -1.3,3 -3,3 C 8.3,10 7,8.7 7,7 7,7 7,6.9 7,6.9 7.2,7 7.3,7 7.5,7 8.3,7 9,6.3 9,5.5 9,5.1 8.8,4.7 8.5,4.4 9,4.1 9.5,4 10,4 c 1.7,0 3,1.3 3,3 z M 10,2 C 4.8,2 2.7,5.6 2.1,7 2.7,8.4 4.8,12 10,12 15.2,12 17.3,8.4 17.9,7 17.3,5.6 15.2,2 10,2 m 0,-2 c 8,0 10,7 10,7 0,0 -2,7 -10,7 C 2,14 0,7 0,7 0,7 2,0 10,0 Z"
-   id="path44" />
-<g
-   transform="translate(-2,-5)"
-   style="display:none"
-   class="st0"
-   id="g54">
-	<circle
-   style="display:inline"
-   class="st1"
-   cx="12"
-   cy="12"
-   r="3"
-   id="circle46" />
-	<g
-   style="display:inline"
-   class="st1"
-   id="g50">
-		<path
-   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
-   id="path48" />
-	</g>
-	<circle
-   style="fill:#ffffff"
-   class="st4"
-   cx="9.5"
-   cy="10.5"
-   r="1.5"
-   id="circle52" />
-</g>
-<path
-   id="path4779"
-   d="m 13,7 c 0.06529,1.6168429 -1.383157,3.065288 -3,3 C 8.3831571,10.065288 6.9347117,8.6168429 7,7 6.9347117,5.3831571 8.3831571,3.9347117 10,4 c 1.637418,-0.048194 3.04793,1.3597481 3,3 z" />
-</svg>
-</template>
-
-<script>
-export default {
-    name: 'EyeIcon'
-}
-</script>
-
-<style type="text/scss">
-
-	svg.eye-icon {
-        fill: white;
-    }
-    
-</style>

src/admin/components/other/file-item.vue

@@ -18,10 +18,11 @@
                         :style="{ 'background-color': '#dbdbdb' }"
                         v-else 
                         class="file-placeholder">
-                    <b-icon
-                            :icon="getIconForMimeType(file.mime_type)"
-                            size="is-large"
-                            type="is-gray"/>
+                    <span class="icon is-large">
+                        <i 
+                                :class="'tainacan-icon-' + getIconForMimeType(file.mime_type)"
+                                class="has-text-gray tainacan-icon tainacan-icon-36px"/>
+                    </span>
                  </div>
             </div>
         </figure> 
@@ -66,7 +67,7 @@ export default {
             if (type[0] == 'application' && type[1] != undefined){
                 switch (type[1]) {
                     case 'pdf':
-                        return 'file-pdf';
+                        return 'pdf';
                     default:
                         return '';
                 }
@@ -75,9 +76,9 @@ export default {
                     case 'video':
                         return 'video';
                     case 'audio':
-                        return 'volume-high';
+                        return 'audio';
                     case 'text':
-                        return 'format-align-left';
+                        return 'text';
                     default:
                         return '';
                 }

src/admin/components/other/grip-icon.vue

@@ -1,52 +0,0 @@
-<template>
-<svg 
-xmlns="http://www.w3.org/2000/svg" 
-width="13" 
-height="13" 
-viewBox="0 0 12.8 12.8" 
-class="grip-icon"><circle 
-cx="1.5" 
-cy="1.5" 
-r="1.5" 
-class="undefined"/><circle 
-cx="6.4" 
-cy="1.5" 
-r="1.5" 
-class="undefined"/><circle 
-cx="11.3" 
-cy="1.5" 
-r="1.5" 
-class="undefined"/><circle 
-cx="1.5" 
-cy="6.4" 
-r="1.5" 
-class="undefined"/><circle 
-cx="6.4" 
-cy="6.4" 
-r="1.5" 
-class="undefined"/><circle 
-cx="11.3" 
-cy="6.4" 
-r="1.5" 
-class="undefined"/><circle 
-cx="1.5" 
-cy="11.3" 
-r="1.5" 
-class="undefined"/><circle 
-cx="6.4" 
-cy="11.3" 
-r="1.5" 
-class="undefined"/><circle 
-cx="11.3" 
-cy="11.3" 
-r="1.5" 
-class="undefined"/></svg>
-</template>
-
-<script>
-export default {
-    name: 'GripIcon'
-}
-</script>
-
-

src/admin/components/other/help-button.vue

@@ -1,9 +1,10 @@
 <template>
     <span class="help-wrapper">
         <a class="help-button has-text-secondary">
-            <b-icon 
-                    size="is-small" 
-                    icon="help-circle-outline"/></a>
+            <span class="icon is-small">
+                <i class="tainacan-icon tainacan-icon-help" />
+            </span>
+        </a>
         <div class="help-tooltip">
             <div class="help-tooltip-header">
                 <h5>{{ title }}</h5>
@@ -31,7 +32,7 @@ export default {
 
     .help-wrapper {
         position: absolute;
-        margin-top: -2px;
+        margin-top: -4px;
         margin-left: 4px;
     }
 
@@ -81,16 +82,16 @@ export default {
             content: "";
             display: block;
             position: absolute;
-            left: 28px;
+            left: 30px;
             width: 0;
             height: 0;
             border-style: solid;
         }
         &:before {
             border-color: $turquoise2 transparent transparent transparent;
-            border-right-width: 18px;
+            border-right-width: 15px;
             border-top-width: 12px;
-            border-left-width: 18px;
+            border-left-width: 15px;
             bottom: -15px;
         }
     }

src/admin/components/other/processes-popup.vue

@@ -13,14 +13,14 @@
                     @click="showProcessesList = !showProcessesList">
                 <span class="icon has-text-blue5">
                     <i 
-                            :class="{ 'mdi-menu-up': showProcessesList,  
-                                      'mdi-menu-down': !showProcessesList }"
-                            class="mdi mdi-18px"/>
+                            :class="{ 'tainacan-icon-arrowup': showProcessesList,  
+                                      'tainacan-icon-arrowdown': !showProcessesList }"
+                            class="tainacan-icon tainacan-icon-18px"/>
                 </span>
             </a>    
             <a @click="$emit('closeProcessesPopup')">
                 <span class="icon has-text-blue5">
-                    <i class="mdi mdi-close"/>
+                    <i class="tainacan-icon tainacan-icon-close"/>
                 </span>
             </a>       
         </div>
@@ -46,8 +46,8 @@
                                 class="process-title">
                             <span class="icon has-text-gray">
                                 <i 
-                                        class="mdi mdi-18px"
-                                        :class="{ 'mdi-menu-down': processesCollapses[index], 'mdi-menu-right': !processesCollapses[index] }" />
+                                        class="tainacan-icon tainacan-icon-18px"
+                                        :class="{ 'tainacan-icon-arrowdown': processesCollapses[index], 'tainacan-icon-arrowright': !processesCollapses[index] }" />
                             </span>  
                             <p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
                         </div>
@@ -55,23 +55,23 @@
                                 v-if="bgProcess.done <= 0 && bgProcess.status == 'closed'"
                                 class="icon has-text-gray action-icon"
                                 @click="resumeProcess(index)">
-                            <i class="mdi mdi-18px mdi-play-circle"/>
+                            <i class="tainacan-icon tainacan-icon-18px tainacan-icon-play-circle"/>
                         </span> -->
                         <span 
                                 v-if="bgProcess.done <= 0"
                                 class="icon has-text-gray action-icon"
                                 @click="pauseProcess(index)">
-                            <i class="mdi mdi-18px mdi-stop-circle"/>
+                            <i class="tainacan-icon tainacan-icon-18px tainacan-icon-stop"/>
                         </span>
                         <span 
                                 v-if="bgProcess.done > 0 && !bgProcess.error_log"
                                 class="icon has-text-success">
-                            <i class="mdi mdi-18px mdi-checkbox-marked-circle"/>
+                            <i class="tainacan-icon tainacan-icon-18px tainacan-icon-finish"/>
                         </span>
                         <span 
                                 v-if="bgProcess.done > 0 && bgProcess.error_log"
                                 class="icon has-text-danger">
-                            <i class="mdi mdi-18px mdi-sync-alert" />
+                            <i class="tainacan-icon tainacan-icon-18px tainacan-icon-processerror" />
                         </span>
                         <span 
                                 v-if="bgProcess.done <= 0"
@@ -113,7 +113,7 @@
         <div class="popup-footer">
             <span 
                     v-if="hasAnyProcessExecuting"
-                    class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
+                    class="icon has-text-blue5"><i class="tainacan-icon tainacan-icon-18px tainacan-icon-updating"/></span>
             <p class="footer-title">    
                 {{ hasAnyProcessExecuting ? 
                     (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')):
@@ -330,7 +330,7 @@ export default {
                 /*.loading-icon {*/
                     /*display: none;*/
                 /*}*/
-                .process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right {
+                .process-item>.process-title .tainacan-arrowleft, .process-item>.process-title .tainacan-arrowright {
                     color: $gray3 !important;
                 }
             }
@@ -355,7 +355,7 @@ export default {
                         top: -2px;
                     }
                     
-                    .mdi-menu-left, .mdi-menu-right {
+                    .tainacan-arrowleft, .tainacan-arrowright {
                         color: $turquoise2;
                     }
                 }
@@ -392,7 +392,7 @@ export default {
             content: "";
             display: block;
             position: absolute;
-            right: 47px;
+            right: 35px;
             width: 0;
             height: 0;
             border-style: solid;

src/admin/components/other/question-icon.vue

@@ -1,28 +0,0 @@
-<template>
-
-<svg 
-xmlns="http://www.w3.org/2000/svg"
-x="0px" 
-y="0px"
-width="19.749px" 
-height="33.073px" 
-viewBox="0 0 19.749 33.073" 
-enable-background="new 0 0 19.749 33.073" 
-xml:space="preserve">
-<path 
-fill="#BB3636" 
-d="M6.615,28.112h4.961v4.961H6.615V28.112 M9.922,0c8.847,0.364,12.7,9.293,7.441,15.991
-	c-1.373,1.654-3.588,2.745-4.68,4.134c-1.108,1.373-1.108,3.026-1.108,4.68H6.615c0-2.762,0-5.093,1.108-6.747
-	c1.091-1.654,3.307-2.629,4.68-3.721c4.002-3.704,3.01-8.946-2.48-9.376c-2.74,0-4.961,2.221-4.961,4.961H0C0,4.442,4.442,0,9.922,0
-	z"/>
-</svg>
-
-</template>
-
-<script>
-export default {
-    name: 'QuestionIcon'
-}
-</script>
-
-

src/admin/components/other/taxonomies-icon.vue

@@ -1,29 +0,0 @@
-<template>
-<svg
-   xmlns="http://www.w3.org/2000/svg"
-   height="16"
-   width="16"
-   xml:space="preserve"
-   viewBox="0 0 20 20"
-   y="0px"
-   x="0px"
-   class="taxonomies-icon"> 
-<path
-   d="M 0,0 H 9 V 9 H 0 V 0 M 15.5,0 C 18,0 20,2 20,4.5 20,7 18,9 15.5,9 13,9 11,7 11,4.5 11,2 13,0 15.5,0 M 4.5,12 9,20 H 0 L 4.5,12 M 17,15 h 3 v 2 h -3 v 3 h -2 v -3 h -3 v -2 h 3 v -3 h 2 z"
-/>
-</svg>
-</template>
-
-<script>
-export default {
-    name: 'TaxonomiesIcon'
-}
-</script>
-
-<style type="text/scss">
-
-	svg.taxonomies-icon {
-        fill: #898d8f;
-    }
-    
-</style>

src/admin/components/repository/collection-filter/collection-filter.vue

@@ -8,9 +8,11 @@
                     class="label"
                     slot="trigger"
                     slot-scope="props">
-                <b-icon
-                        :icon="props.open ? 'menu-down' : 'menu-right'"
-                />
+                <span class="icon is-right">
+                    <i 
+                            :class="{ 'tainacan-icon-arrowdown': props.open, 'tainacan-icon-arrowright': !props.open }"
+                            class="tainacan-icon tainacan-icon-20px" />
+                </span>
                 {{ $i18n.get('collections') }}
             </label>
 

src/admin/components/search/filters-items-list.vue

@@ -1,38 +1,150 @@
 <template>
     <div class="extra-margin">
-        <collections-filter
-                :open="collapsed"
-                :query="getQuery"
-                v-if="isRepositoryLevel"/>
-        <tainacan-filter-item
-                v-show="!isMenuCompressed"        
-                :query="getQuery"
-                v-for="(filter, index) in filters"
-                :key="index"
-                :filter="filter"
-                :open="collapsed"
-                :is-repository-level="isRepositoryLevel"/>
+        <template v-if="taxonomyFilters != undefined">
+            <div 
+                    v-if="key == 'repository-filters'"
+                    :key="index"
+                    v-for="(taxonomyFilter, key, index) of taxonomyFilters">
+                <div 
+                        v-tooltip="{
+                            content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
+                            autoHide: false,
+                            placement: 'auto-start'
+                        }" 
+                        v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
+                        class="collection-name">
+                    {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                </div>
+                <div    
+                        v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
+                        class="collection-name">
+                    <span 
+                            style="width: 100%; height: 54px;"
+                            class="icon has-text-centered loading-icon">
+                        <div class="control has-icons-right is-loading is-clearfix" />
+                    </span>
+                </div>
+                <tainacan-filter-item
+                        v-show="!isMenuCompressed"        
+                        :query="getQuery"
+                        v-for="(filter, filterIndex) in taxonomyFilter"
+                        :key="filterIndex"
+                        :filter="filter"
+                        :open="collapsed"
+                        v-if="taxonomyFilter.length > 0"
+                        :is-repository-level="key == 'repository-filters'"/>
+                <!-- <p   
+                        class="has-text-gray is-size-7"
+                        v-if="taxonomyFilter.length <= 0">
+                    {{ $i18n.get('info_there_is_no_filter') }}    
+                </p> -->
+                <hr v-if="taxonomyFilter.length > 0">
+            </div>
+            <div 
+                    v-if="key != 'repository-filters'"
+                    :key="index"
+                    v-for="(taxonomyFilter, key, index) of taxonomyFilters">
+                <div 
+                        v-tooltip="{
+                            content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
+                            autoHide: false,
+                            placement: 'auto-start'
+                        }" 
+                        v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
+                        class="collection-name">
+                    {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                </div>
+                <div    
+                        v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
+                        class="collection-name">
+                    <span 
+                            style="width: 100%; height: 54px;"
+                            class="icon has-text-centered loading-icon">
+                        <div class="control has-icons-right is-loading is-clearfix" />
+                    </span>
+                </div>
+                <tainacan-filter-item
+                        v-show="!isMenuCompressed"        
+                        :query="getQuery"
+                        v-for="(filter, filterIndex) in taxonomyFilter"
+                        :key="filterIndex"
+                        :filter="filter"
+                        :open="collapsed"
+                        v-if="taxonomyFilter.length > 0"
+                        :is-repository-level="key == 'repository-filters'"/>
+                <!-- <p   
+                        class="has-text-gray is-size-7"
+                        v-if="taxonomyFilter.length <= 0">
+                    {{ $i18n.get('info_there_is_no_filter') }}    
+                </p> -->
+                <hr v-if="taxonomyFilter.length > 0">
+            </div>
+        </template>
+        <template v-else>
+             <collections-filter
+                    :open="collapsed"
+                    :query="getQuery"
+                    v-if="isRepositoryLevel"/>
+            <tainacan-filter-item
+                    v-show="!isMenuCompressed"        
+                    :query="getQuery"
+                    v-for="(filter, index) in filters"
+                    :key="index"
+                    :filter="filter"
+                    :open="collapsed"
+                    :is-repository-level="isRepositoryLevel"/>
+        </template>
 
     </div>
-</template>
+</template> 
+
 <script>
-    import { mapGetters } from 'vuex';
+    import { mapGetters, mapActions } from 'vuex';
     import CollectionsFilter from '../repository/collection-filter/collection-filter.vue';
 
     export default {
+        data() {
+            return {
+                taxonomyFiltersCollectionNames: Object
+            }
+        },
         props: {
             filters: Array,
             collapsed: Boolean,
             isRepositoryLevel: Boolean,
+            taxonomyFilters: Object,
+            taxonomy: String
+        },
+        watch: {
+            taxonomyFilters() {
+                if (this.taxonomyFilters != undefined) {
+                    this.$set(this.taxonomyFiltersCollectionNames, 'repository-filters', this.$i18n.get('repository'));
+                    for (let taxonomyFilter of Object.keys(this.taxonomyFilters)) {
+                        if (taxonomyFilter != 'repository-filters') {
+                            this.fetchCollectionName(taxonomyFilter)
+                                .then((collectionName) => {
+                                    this.$set(this.taxonomyFiltersCollectionNames, taxonomyFilter, collectionName);
+                                });
+                        }
+                    }
+                }
+            }
         },
         methods: {
             ...mapGetters('search',[
                 'getPostQuery'
-            ])
+            ]),
+            ...mapActions('collection',[
+                'fetchCollectionName'
+            ]),
         },
         computed: {
             getQuery() {
                 return this.getPostQuery();
+            },
+            taxonomyId () {
+                let taxonomyArray = this.taxonomy.split("_");
+                return taxonomyArray[taxonomyArray.length - 1];
             }
         },
         components: {
@@ -41,8 +153,24 @@
     }
 </script>
 
-<style>
+<style scoped>
     .extra-margin {
         margin-bottom: 40px;
     }
+    .collection-name {
+        color: #454647;
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-bottom: 0.875rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 100%;
+    }
+    .is-loading:after {
+        border: 2px solid white !important;
+        border-top-color: #dbdbdb !important;
+        border-right-color: #dbdbdb !important;
+    }
+
 </style>

src/admin/js/router.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import qs from 'qs';
 
 // Main Pages
+import HomePage from '../pages/home-page.vue'
 import CollectionsPage from '../pages/lists/collections-page.vue'
 import CollectionPage from '../pages/singles/collection-page.vue'
 import ItemsPage from '../pages/lists/items-page.vue'
@@ -10,7 +11,6 @@ import ItemPage from '../pages/singles/item-page.vue'
 import MetadataPage from '../pages/lists/metadata-page.vue'
 import FiltersPage from '../pages/lists/filters-page.vue'
 import Page from '../pages/lists/taxonomies-page.vue'
-import TaxonomyPage from '../pages/singles/taxonomy-page.vue'
 import EventsPage from '../pages/lists/events-page.vue'
 import EventPage from '../pages/singles/event-page.vue'
 import ExportPage from '../pages/singles/export-page.vue'
@@ -20,8 +20,10 @@ import CollectionEditionForm from '../components/edition/collection-edition-form
 import ImporterEditionForm from '../components/edition/importer-edition-form.vue'
 import ImporterMappingForm from '../components/edition/importer-mapping-form.vue'
 import ItemEditionForm from '../components/edition/item-edition-form.vue'
+import ItemBulkEditionForm from '../components/edition/item-bulk-edition-form.vue'
+import ItemMetadataBulkEditionForm from '../components/edition/item-metadata-bulk-edition-form.vue'
 import TaxonomyEditionForm from '../components/edition/taxonomy-edition-form.vue'
-import AvailableImportersPage from '../pages/lists/available-importers-page.vue';
+import AvailableImportersPage from '../pages/lists/available-importers-page.vue'
 
 // Listing components
 import FiltersList from '../components/lists/filters-list.vue'
@@ -35,7 +37,8 @@ const i18nGet = function (key) {
 };
 
 const routes = [                
-    { path: '/', redirect:'/collections' },
+    { path: '/', redirect:'/home' },
+    { path: '/home', name: 'HomePage', component: HomePage, meta: {title: 'Tainacan'} },
 
     { path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: i18nGet('title_repository_collections_page'), icon: 'folder-multiple'} },
     { path: '/collections/new', name: 'CollectionCreationForm', component: CollectionEditionForm, meta: {title: i18nGet('title_create_collection'), icon: 'folder-multiple'} },
@@ -48,6 +51,8 @@ const routes = [
         { path: 'items/:itemId/edit', name: 'ItemEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item'), icon: 'folder-multiple'} },
         { path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection'), icon: 'folder-multiple'} },
         { path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page'), icon: 'folder-multiple'} },   
+        { path: 'bulk-add', name: 'CollectionItemBulkAddPage', component: ItemBulkEditionForm, meta: {title: i18nGet('title_item_bulk_add'), icon: 'folder-multiple'} },
+        { path: 'bulk-add/:groupId', name: 'CollectionItemBulkAddMetadataPage', component: ItemMetadataBulkEditionForm, meta: {title: i18nGet('title_item_bulk_add'), icon: 'folder-multiple'} },
         { path: 'settings', component: CollectionEditionForm,  name: 'CollectionEditionForm', meta: {title: i18nGet('title_collection_settings'), icon: 'folder-multiple'} },
         { path: 'metadata', component: MetadataList, name: 'MetadataList', meta: {title: i18nGet('title_collection_metadata_edition'), icon: 'folder-multiple'} },
         { path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },

src/admin/js/theme-main.js

@@ -106,7 +106,8 @@ export const ThemeItemsListing =  new Vue({
         taxonomy: '',
         collectionId: '',
         defaultViewMode: '',
-        enabledViewModes: {}   
+        enabledViewModes: {},
+        customFilters: []
     },
     render: h => h(ThemeItemsList),
     beforeMount () {
@@ -125,6 +126,7 @@ export const ThemeItemsListing =  new Vue({
             this.termId = this.$el.attributes['term-id'].value;
         if (this.$el.attributes['taxonomy'] != undefined)
             this.taxonomy = this.$el.attributes['taxonomy'].value;
+
     }
     
 });

src/admin/js/utilities.js

@@ -270,6 +270,9 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
         getNewEventPath() {
             return '/events/new';
         },
+        getNewItemBulkAddPath(collectionId) {
+            return '/collections/' + collectionId + '/bulk-add';
+        },
         // Edit
         getCollectionEditPath(id) {
             return '/collections/' + id + '/settings';
@@ -295,6 +298,9 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
         getImporterMappingPath(importerType, sessionId, collectionId) {
             return '/importers/' + importerType + '/' + sessionId + '/mapping/' +  collectionId;
         },
+        getItemMetadataBulkAddPath(collectionId, groupId) {
+            return '/collections/' + collectionId + '/bulk-add/' + groupId;
+        },
     }
 }
 

src/admin/pages/home-page.vue

@@ -0,0 +1,328 @@
+<template>
+    <div class="home-page page-container">
+        <b-loading :active.sync="isLoadingCollections"/>
+        <section class="home-section home-section-repository">
+            <div 
+                    class="section-connector" 
+                    aria-hidden/>
+            <div class="home-section-header repository-section-header">
+                <div class="home-section-icon">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-repository"/>
+                    </span>
+                </div>
+                
+                <h1>{{ $i18n.get('repository') + ' ' }}<span class="has-text-weight-semibold">{{ repositoryName }}</span></h1>
+                <a
+                        target="_blank"
+                        :href="themeCollectionListURL">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
+                    </span>
+                    <span class="menu-text">{{ $i18n.get('label_view_on_theme') }}</span>
+                </a>
+            </div>
+            <nav>
+                <ul class="repository-menu-list">
+                    <!-- <li>
+                        <router-link
+                                tag="a"
+                                to="/collections">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-collections"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.getFrom('collections', 'name') }}</span>
+                        </router-link>
+                    </li> -->
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/items">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.get('label_all_items') }}</span>
+                        </router-link>
+                    </li>
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/metadata">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.get('title_repository_metadata_page' ) }}</span>
+                        </router-link>
+                    </li>
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/filters">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.get('title_repository_filters_page') }}</span>
+                        </router-link>
+                    </li>
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/taxonomies">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-taxonomies"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.getFrom('taxonomies', 'name') }}</span>
+                        </router-link>
+                    </li>
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/events">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-activities"/>
+                            </span>
+                            <span class="menu-text">{{ $i18n.get('title_repository_events_page') }}</span>
+                        </router-link>
+                    </li>
+                    <li>
+                        <router-link
+                                tag="a"
+                                to="/importers">
+                            <span class="icon is-medium">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-importers"/>
+                            </span>
+                            <span class="menu-text menu-text-import">{{ $i18n.get('importers') }}</span>
+                        </router-link>
+                    </li>
+                </ul>
+            </nav>
+        </section>
+
+        <section class="home-section home-section-collection">
+            <div class="home-section-header collections-section-header">
+                <div class="home-section-icon">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-collections"/>
+                    </span>
+                </div>
+                <h1>{{ $i18n.get('collections') }}</h1>
+                 <router-link
+                        tag="a"
+                        to="/collections">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-viewtable"/>
+                    </span>
+                    <span class="menu-text">{{ $i18n.get('label_view_all_collections') }}</span>
+                </router-link>
+            </div>
+            <collections-home-list
+                    :is-loading="isLoadingCollections"
+                    :collections="collections"/> 
+        </section>
+
+    </div>   
+</template>
+
+<script>
+import CollectionsHomeList from '../components/lists/collections-home-list.vue';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+    name: 'HomePage',
+    data(){
+        return {
+            isLoadingCollections: false,
+            repositoryName: tainacan_plugin.repository_name,
+            themeCollectionListURL: tainacan_plugin.theme_collection_list_url,
+        }
+    },
+    components: {
+        CollectionsHomeList
+    },
+    computed: {
+        collections() {
+            return this.getCollections(); 
+        }
+    },
+    methods: {
+         ...mapActions('collection', [
+            'fetchCollections',
+            'cleanCollections'
+        ]),
+        ...mapGetters('collection', [
+            'getCollections'
+        ]),
+        loadCollections() {
+            this.cleanCollections();    
+            this.isLoadingCollections = true;
+            this.fetchCollections({ 'page': 1, 'collectionsPerPage': 5, 'status': 'publish' })
+            .then(() => {
+                this.isLoadingCollections = false;
+            }) 
+            .catch(() => {
+                this.isLoadingCollections = false;
+            });
+        }
+    },
+    mounted(){
+        this.loadCollections();
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+    @import '../../scss/_variables.scss';
+
+    .home-page {
+        margin-top: $header-height;
+        background-color: white;
+        height: calc(100% - 52px);
+        padding: 25px 8.333333333% !important;
+        width: 100vw;
+
+        .home-section {
+            
+            &.home-section-repository{
+                position: relative;
+                &>nav {
+                    padding-left: 52px;
+                }
+            }
+            &.home-section-collection {
+                margin-left: 52px;
+            }
+
+            .section-connector {
+                border-left: 1px solid $gray2;
+                border-bottom: 1px solid $gray2;
+                position: absolute;
+                width: 42px;
+                height: 100%;
+                top: 43px;
+                left: 26px;
+            }
+
+            .home-section-header {
+                width: 100%;
+                margin-top: 1rem;
+                margin-bottom: 0.5rem;
+                display: flex;
+                align-items: center;
+                height: 52px;
+
+                .home-section-icon {
+                    background-color: white;
+                    padding: 0.75rem;
+                    height: 52px;
+                    width: 52px;
+                    font-size: 30px;
+                    text-align: center;
+                    z-index: 9;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                h1 {
+                    color: $gray5;
+                    font-size: 1.375rem;
+                    font-weight: normal;
+                    padding: 0.75rem 1.375rem;
+                    margin-right: auto;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                a {
+                    margin-right: 2rem;
+                    display: inline-flex;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+
+                    .menu-text { margin-left: 0.5rem;}
+                }
+
+                &.repository-section-header {
+                    border-bottom: 1px solid $blue5;
+                    a {
+                        color: $blue5;
+                    }
+                    .home-section-icon {
+                        background-color: $blue5;
+                        color: white;
+                    }
+                }
+                &.collections-section-header {
+                    border-bottom: 1px solid $turquoise5;
+                    a {
+                        color: $turquoise5;
+                    }
+                    .home-section-icon {
+                        background-color: $turquoise5;
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        .repository-menu-list {
+            display: flex;
+            width: calc(100% + 1.25rem);
+            justify-content: space-between;
+            flex-wrap: wrap;
+            margin: 0 -0.75rem;
+
+            li {
+                padding: 1rem;
+                display: flex;
+                background-color: $gray1;
+                flex-grow: 1;
+                margin: 0.75rem;
+                height: 120px; 
+                min-width: 13%;
+                flex-basis: 13%;
+
+                @media screen and (max-width: 580px) {
+                    max-width: calc(100% - 52px);
+                    min-width: calc(100% - 52px);
+                }
+                @media screen and (min-width: 581px) and (max-width: 767px) {
+                    min-width: calc(50% - 26px);
+                    max-width: calc(50% - 26px);
+                }
+                @media screen and (min-width: 768px) and (max-width: 1023px) {
+                    min-width: calc(33.33% - 26px);
+                    max-width: calc(33.33% - 26px);
+                }
+                @media screen and (min-width: 1024px) and (max-width: 1280px) {
+                    min-width: 30%;
+                    max-width: 30%;
+                }
+
+                &:hover {
+                    background-color: $gray2;
+                }
+
+                a { 
+                    width: 100%;
+                    color: $blue5; 
+                    display: flex;
+                    flex-wrap: wrap;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: space-evenly;
+                }
+                .menu-text {
+                    text-align: center; 
+                }
+            }
+        }
+
+    }
+
+</style>
+
+

src/admin/pages/lists/collections-page.vue

@@ -12,7 +12,9 @@
                             class="button is-secondary"
                             slot="trigger">
                         <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
-                        <b-icon icon="menu-down"/>
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                        </span>
                     </button>
                     <b-dropdown-item>
                         <router-link
@@ -77,19 +79,58 @@
                     <section class="section">
                         <div class="content has-text-grey has-text-centered">
                             <p>
-                                <b-icon icon="folder-multiple"/>
+                                <span class="icon is-large">
+                                    <i class="tainacan-icon tainacan-icon-36px tainacan-icon-collections" />
+                                </span>
                             </p>
                             <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_collection_created') }}</p>
                             <p v-if="status == 'draft'">{{ $i18n.get('info_no_collection_draft') }}</p>
                             <p v-if="status == 'trash'">{{ $i18n.get('info_no_collection_trash') }}</p>
-                            <router-link
-                                    v-if="status == undefined || status == ''"
-                                    id="button-create-collection"
-                                    tag="button"
-                                    class="button is-secondary"
-                                    :to="{ path: $routerHelper.getNewCollectionPath() }">
-                                {{ $i18n.getFrom('collections', 'new_item') }}
-                            </router-link>
+
+                            <div v-if="$userCaps.hasCapability('edit_tainacan-collections') && status == undefined || status == ''">
+                                <b-dropdown id="collection-creation-options-dropdown">
+                                    <button
+                                            class="button is-secondary"
+                                            slot="trigger">
+                                        <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
+                                        <span class="icon">
+                                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                                        </span>
+                                    </button>
+                                    <b-dropdown-item>
+                                        <router-link
+                                                id="a-create-collection"
+                                                tag="div"
+                                                :to="{ path: $routerHelper.getNewCollectionPath() }">
+                                            {{ $i18n.get('new_blank_collection') }}
+                                            <br>
+                                            <small class="is-small">{{ $i18n.get('info_choose_your_metadata') }}</small>
+                                        </router-link>
+                                    </b-dropdown-item>
+                                    <b-dropdown-item
+                                            :key="metadatum_mapper.slug"
+                                            v-for="metadatum_mapper in metadatum_mappers"
+                                            v-if="metadatum_mapper.metadata != false">
+                                        <router-link
+                                                :id="'a-create-collection-' + metadatum_mapper.slug"
+                                                tag="div"
+                                                :to="{ path: $routerHelper.getNewMappedCollectionPath(metadatum_mapper.slug) }">
+                                            {{ $i18n.get(metadatum_mapper.name) }}
+                                        </router-link>
+                                    </b-dropdown-item>
+                                    <b-dropdown-item>
+                                        <div
+                                                id="a-import-collection"
+                                                tag="div"
+                                                @click="onOpenImportersModal">
+                                            {{ $i18n.get('import') }}
+                                            <br>
+                                            <small class="is-small">{{ $i18n.get('info_import_collection') }}</small>
+                                        </div>
+                                    </b-dropdown-item>
+                                </b-dropdown>
+                            </div>
+                            
                         </div>
                     </section>
                 </div>  

src/admin/pages/lists/events-page.vue

@@ -46,7 +46,9 @@
                     <section class="section">
                         <div class="content has-text-grey has-text-centered">
                             <p>
-                                <activities-icon />
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-activities"/>
+                                </span>
                             </p>
                             <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_process') }}</p>
                         </div>
@@ -136,7 +138,6 @@
 <script>
     import EventsList from "../../components/lists/events-list.vue";
     import ProcessesList from "../../components/lists/processes-list.vue";
-    import ActivitiesIcon from '../../components/other/activities-icon.vue';
     import { mapActions, mapGetters } from 'vuex';
     import moment from 'moment'
 
@@ -156,8 +157,7 @@
         },
         components: {
             EventsList,
-            ProcessesList,
-            ActivitiesIcon
+            ProcessesList
         },
         methods: {
             ...mapActions('event', [
@@ -318,11 +318,6 @@
 <style lang="scss" scoped>
     @import '../../scss/_variables.scss';
 
-    .activities-icon {
-        height: 24px;
-        width: 24px;
-    }
-
     .sub-header {
         max-height: $header-height;
         height: $header-height;

src/admin/pages/lists/items-page.vue

@@ -24,7 +24,11 @@
                 id="filter-menu-compress-button"
                 :style="{ top: !isOnTheme ? (isRepositoryLevel ? '172px' : '120px') : '76px' }"
                 @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
-            <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
         </button>
         <!-- Filters mobile modal button -->
         <button 
@@ -33,7 +37,11 @@
                 id="filter-menu-compress-button"
                 :style="{ top: !isOnTheme ? (isRepositoryLevel ? (searchControlHeight + 100) : (searchControlHeight + 70) + 'px') : (searchControlHeight - 25) + 'px' }"
                 @click="isFilterModalActive = !isFilterModalActive">
-            <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
             <span class="text">{{ $i18n.get('filters') }}</span>
         </button>
 
@@ -62,7 +70,9 @@
                         <span
                                 @click="updateSearch()"
                                 class="icon is-right">
-                            <i class="mdi mdi-magnify" />
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-search"/>
+                            </span>
                         </span>
                 </div>
             </div>
@@ -78,9 +88,11 @@
                     class="collapse-all is-size-7"
                     @click="collapseAll = !collapseAll">
                 {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                <b-icon
-                        type="is-secondary"
-                        :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                <span class="icon">
+                    <i 
+                            :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                            class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                </span>
             </a>
 
             <br>
@@ -99,9 +111,9 @@
                     class="is-grouped-centered section">
                 <div class="content has-text-gray has-text-centered">
                     <p>
-                        <b-icon
-                                icon="filter"
-                                size="is-large"/>
+                        <span class="icon is-large">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
+                        </span>
                     </p>
                     <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
                     <router-link
@@ -150,7 +162,9 @@
                                 class="button is-secondary"
                                 slot="trigger">
                             <span>{{ $i18n.getFrom('items','add_new') }}</span>
-                            <b-icon icon="menu-down"/>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                            </span>
                         </button>
 
                         <b-dropdown-item v-if="!isRepositoryLevel">
@@ -169,8 +183,15 @@
                                 {{ $i18n.get('add_one_item') }}
                             </div>
                         </b-dropdown-item>
-                        <b-dropdown-item disabled>
-                            {{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
+                        <b-dropdown-item v-if="!isRepositoryLevel">
+                            <router-link
+                                    id="a-item-add-bulk"
+                                    tag="div"
+                                    :to="{ path: $routerHelper.getNewItemBulkAddPath(collectionId) }">
+                                {{ $i18n.get('add_items_bulk') }}
+                                <br> 
+                                <small class="is-small">{{ $i18n.get('info_bulk_add_items') }}</small>
+                            </router-link>
                         </b-dropdown-item>
                         <b-dropdown-item>
                             <div
@@ -190,6 +211,11 @@
                         v-if="!isOnTheme || (registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].dynamic_metadata)"
                         class="search-control-item">
                     <b-dropdown
+                            v-tooltip="{
+                                content: (totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry') ? (adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry') ? $i18n.get('info_current_view_mode_metadata_not_allowed') : $i18n.get('info_cant_select_metadata_without_items') : '',
+                                autoHide: false,
+                                placement: 'auto-start'
+                            }" 
                             ref="displayedMetadataDropdown"
                             :mobile-modal="true"
                             :disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
@@ -198,7 +224,9 @@
                                 class="button is-white"
                                 slot="trigger">
                             <span>{{ $i18n.get('label_displayed_metadata') }}</span>
-                            <b-icon icon="menu-down"/>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                            </span>
                         </button>
                         <div class="metadata-options-container">
                         <b-dropdown-item
@@ -234,7 +262,9 @@
                                     class="button is-white"
                                     slot="trigger">
                                 <span>{{ $i18n.get('label_sorting') }}</span>
-                                <b-icon icon="menu-down"/>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                                </span>
                             </button>
                             <b-dropdown-item
                                     :class="{ 'is-active': metadatum != undefined && orderBy == metadatum.slug }"
@@ -275,7 +305,7 @@
                                 :disabled="totalItems <= 0 || order == 'DESC'"
                                 @click="onChangeOrder()">
                             <span class="icon is-small gray-icon">
-                                <i class="mdi mdi-sort-ascending"/>
+                                <i class="tainacan-icon tainacan-icon-sortascending"/>
                             </span>
                         </button>
                         <button
@@ -283,7 +313,7 @@
                                 class="button is-white is-small"
                                 @click="onChangeOrder()">
                             <span class="icon is-small gray-icon">
-                                <i class="mdi mdi-sort-descending"/>
+                                <i class="tainacan-icon tainacan-icon-sortdescending"/>
                             </span>
                         </button>
                     </b-field>
@@ -307,7 +337,9 @@
                                         v-if="registeredViewModes[viewMode] != undefined"
                                         v-html="registeredViewModes[viewMode].icon"/>
                                     <span class="is-hidden-touch">&nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}</span>
-                                <b-icon icon="menu-down" />
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                                </span>
                             </button>
                             <b-dropdown-item 
                                     :class="{ 'is-active': viewModeOption == viewMode }"
@@ -318,7 +350,7 @@
                                 <span 
                                         class="gray-icon"
                                         v-html="registeredViewModes[viewModeOption].icon"/>
-                                {{ registeredViewModes[viewModeOption].label }}
+                                <span>{{ registeredViewModes[viewModeOption].label }}</span>
                             </b-dropdown-item>
                         </b-dropdown>
                     </b-field>
@@ -338,56 +370,58 @@
                                 <span>
                                         <span class="icon is-small gray-icon">
                                         <i 
-                                                :class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
-                                                        'mdi-view-module' : adminViewMode == 'cards',
-                                                        'mdi-apps' : adminViewMode == 'grid',
-                                                        'mdi-view-column' : adminViewMode == 'records',
-                                                        'mdi-view-dashboard' : adminViewMode == 'masonry'}"
-                                                class="mdi"/>
+                                                :class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined),
+                                                        'tainacan-icon-viewcards' : adminViewMode == 'cards',
+                                                        'tainacan-icon-viewminiature' : adminViewMode == 'grid',
+                                                        'tainacan-icon-viewrecords' : adminViewMode == 'records',
+                                                        'tainacan-icon-viewmasonry' : adminViewMode == 'masonry'}"
+                                                class="tainacan-icon"/>
                                     </span>
                                 </span>
                                 &nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}
-                                <b-icon icon="menu-down" />
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
+                                </span>
                             </button>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'table' }"
                                     :value="'table'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-list"/>
-                                {{ $i18n.get('label_table') }}
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewtable"/>
+                                </span>
+                                <span>{{ $i18n.get('label_table') }}</span>
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'cards' }"
                                     :value="'cards'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-module"/>
-                                {{ $i18n.get('label_cards') }}
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewcards"/>
+                                </span>
+                                <span>{{ $i18n.get('label_cards') }}</span>
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'grid' }"
                                     :value="'grid'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="apps"/>
-                                {{ $i18n.get('label_thumbnails') }}
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewminiature"/>
+                                </span>
+                                <span>{{ $i18n.get('label_thumbnails') }}</span>
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'records' }"
                                     :value="'records'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-column"/>
-                                {{ $i18n.get('label_records') }}
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewrecords"/>
+                                </span>
+                                <span>{{ $i18n.get('label_records') }}</span>
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'masonry' }"
                                     :value="'masonry'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-dashboard"/>
-                                {{ $i18n.get('label_masonry') }}
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewmasonry"/>
+                                </span>
+                                <span>{{ $i18n.get('label_masonry') }}</span>
                             </b-dropdown-item>
                         </b-dropdown>
                     </b-field>
@@ -423,10 +457,10 @@
                                     :value="searchQuery"
                                     @input="futureSearchQuery = $event.target.value"
                                     @keyup.enter="updateSearch()">
-                                <span
+                                <span 
                                         @click="updateSearch()"
                                         class="icon is-right">
-                                    <i class="mdi mdi-magnify" />
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-search"/>
                                 </span>
                         </div>
                         <a
@@ -603,7 +637,9 @@
                         class="section">
                     <div class="content has-text-grey has-text-centered">
                         <p>
-                            <b-icon icon="file-multiple"/>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items" />
+                            </span>
                         </p>
                         <p v-if="status == undefined || status == ''">{{ hasFiltered ? $i18n.get('info_no_item_found_filter') : $i18n.get('info_no_item_created') }}</p>
                         <p v-if="status == 'draft'">{{ $i18n.get('info_no_item_draft') }}</p>
@@ -651,10 +687,11 @@
                         class="collapse-all is-size-7"
                         @click="collapseAll = !collapseAll">
                     {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                    <b-icon
-                            type="is-secondary"
-                            size="is-small"
-                            :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                    <span class="icon">
+                        <i 
+                                :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                                class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                    </span>
                 </a>
 
                 <br>
@@ -673,9 +710,9 @@
                         class="is-grouped-centered section">
                     <div class="content has-text-gray has-text-centered">
                         <p>
-                            <b-icon
-                                    icon="filter"
-                                    size="is-large"/>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
+                            </span>
                         </p>
                         <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
                         <router-link
@@ -1421,7 +1458,7 @@
         top: 120px;
         left: 0;
         max-width: 23px;
-        height: 21px;
+        height: 26px;
         width: 23px;
         border: none;
         background-color: $turquoise1;
@@ -1444,7 +1481,7 @@
             max-width: 100%;
             width: auto;
             padding: 3px 6px 3px 0px;
-            height: 24px;
+            height: 26px;
 
             .icon {
                 position: relative;
@@ -1452,7 +1489,7 @@
             }
             .text {
                 position: relative;
-                top: -6px;
+                top: -2px;
             }
         }
     }
@@ -1489,7 +1526,8 @@
         }
 
         .button {
-            align-items: flex-start;
+            display: flex;
+            align-items: center;
         }
         
         .field {
@@ -1500,8 +1538,10 @@
             color: $gray4 !important;
             padding-right: 10px;
         }
-        .gray-icon .icon i::before, .gray-icon i::before {
+        .gray-icon .icon i::before, 
+        .gray-icon i::before {
             font-size: 1.3125rem !important;
+            max-width: 26px;
         }
         
         .view-mode-icon {
@@ -1520,10 +1560,10 @@
                     overflow: auto;
                 }
                 .dropdown-item {
-                    padding: 0.25rem 1.0rem 0.25rem 0.75rem;
+                    padding: 0.25rem 1.0rem 0.25rem 0.75rem; 
                 }
                 .dropdown-item span{
-                    vertical-align: sub;
+                    vertical-align: middle;
                 }      
                 .dropdown-item-apply {
                     width: 100%;

src/admin/pages/lists/taxonomies-page.vue

@@ -48,9 +48,9 @@
                     <div v-if="taxonomies.length <= 0 && !isLoading">
                         <section class="section">
                             <div class="content has-text-grey has-text-centered">
-                                <p>
-                                    <taxonomies-icon class="taxonomies-term-icon"/>
-                                </p>
+                                <span class="icon is-medium">
+                                    <i class="tainacan-icon tainacan-icon-36px tainacan-icon-terms"/>
+                                </span>
                                 <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_taxonomy_created') }}</p>
                                 <p v-if="status == 'draft'">{{ $i18n.get('info_no_taxonomy_draft') }}</p>
                                 <p v-if="status == 'trash'">{{ $i18n.get('info_no_taxonomy_trash') }}</p>
@@ -111,7 +111,6 @@
 
 <script>
     import TaxonomiesList from "../../components/lists/taxonomies-list.vue";
-    import TaxonomiesIcon from '../../components/other/taxonomies-icon.vue';
     import { mapActions, mapGetters } from 'vuex';
     //import moment from 'moment'
 
@@ -127,8 +126,7 @@
             }
         },
         components: {
-            TaxonomiesList,
-            TaxonomiesIcon
+            TaxonomiesList
         },
         methods: {
             ...mapActions('taxonomy', [
@@ -199,10 +197,6 @@
 </script>
 
 <style lang="scss" scoped>
-    .taxonomies-icon {
-        height: 24px;
-        width: 24px;
-    }
     @import '../../scss/_variables.scss';
 
     .sub-header {

src/admin/pages/lists/term-items-page.vue

@@ -24,7 +24,11 @@
                 id="filter-menu-compress-button"
                 :style="{ top: !isOnTheme ? (isRepositoryLevel ? '172px' : '120px') : '76px' }"
                 @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
-            <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
         </button>
         <!-- Filters mobile modal button -->
         <button 
@@ -33,7 +37,11 @@
                 id="filter-menu-compress-button"
                 :style="{ top: !isOnTheme ? (isRepositoryLevel ? (searchControlHeight + 100) : (searchControlHeight + 70) + 'px') : (searchControlHeight - 25) + 'px' }"
                 @click="isFilterModalActive = !isFilterModalActive">
-            <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
             <span class="text">{{ $i18n.get('filters') }}</span>
         </button>
 
@@ -58,10 +66,10 @@
                             :value="searchQuery"
                             @input="futureSearchQuery = $event.target.value"
                             @keyup.enter="updateSearch()">
-                        <span
+                        <span 
                                 @click="updateSearch()"
                                 class="icon is-right">
-                            <i class="mdi mdi-magnify" />
+                            <i class="tainacan-icon tainacan-icon-20px tainacan-icon-search"/>
                         </span>
                 </div>
             </div>
@@ -77,9 +85,11 @@
                     class="collapse-all is-size-7"
                     @click="collapseAll = !collapseAll">
                 {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                <b-icon
-                        type="is-secondary"
-                        :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                <span class="icon">
+                    <i 
+                            :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                            class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                </span>
             </a>
 
             <br>
@@ -90,6 +100,8 @@
                     ((filters.length >= 0 &&
                     isRepositoryLevel) || filters.length > 0)"
                     :filters="filters"
+                    :taxonomy-filters="taxonomyFilters"
+                    :taxonomy="taxonomy"
                     :collapsed="collapseAll"
                     :is-repository-level="isRepositoryLevel"/>
 
@@ -98,9 +110,9 @@
                     class="is-grouped-centered section">
                 <div class="content has-text-gray has-text-centered">
                     <p>
-                        <b-icon
-                                icon="filter"
-                                size="is-large"/>
+                        <span class="icon is-large">
+                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
+                        </span>
                     </p>
                     <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
                     <router-link
@@ -149,7 +161,9 @@
                                 class="button is-secondary"
                                 slot="trigger">
                             <span>{{ $i18n.getFrom('items','add_new') }}</span>
-                            <b-icon icon="menu-down"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                            </span>
                         </button>
 
                         <b-dropdown-item>
@@ -192,7 +206,9 @@
                                 class="button is-white"
                                 slot="trigger">
                             <span>{{ $i18n.get('label_displayed_metadata') }}</span>
-                            <b-icon icon="menu-down"/>
+                            <span class="icon">
+                                <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                            </span>
                         </button>
                         <div class="metadata-options-container">
                         <b-dropdown-item
@@ -227,7 +243,9 @@
                                     class="button is-white"
                                     slot="trigger">
                                 <span>{{ $i18n.get('label_sorting') }}</span>
-                                <b-icon icon="menu-down"/>
+                                <span class="icon">
+                                    <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                                </span>
                             </button>
                             <b-dropdown-item
                                     :class="{ 'is-active': metadatum != undefined && orderBy == metadatum.slug }"
@@ -268,7 +286,7 @@
                                 :disabled="totalItems <= 0 || order == 'DESC'"
                                 @click="onChangeOrder()">
                             <span class="icon is-small gray-icon">
-                                <i class="mdi mdi-sort-ascending"/>
+                                <i class="tainacan-icon tainacan-icon-sortdescending"/>
                             </span>
                         </button>
                         <button
@@ -276,7 +294,7 @@
                                 class="button is-white is-small"
                                 @click="onChangeOrder()">
                             <span class="icon is-small gray-icon">
-                                <i class="mdi mdi-sort-descending"/>
+                                <i class="tainacan-icon tainacan-icon-sortdescending"/>
                             </span>
                         </button>
                     </b-field>
@@ -299,8 +317,10 @@
                                         class="gray-icon view-mode-icon"
                                         v-if="registeredViewModes[viewMode] != undefined"
                                         v-html="registeredViewModes[viewMode].icon"/>
-                                    <span class="is-hidden-touch">&nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}</span>
-                                <b-icon icon="menu-down" />
+                                <span class="is-hidden-touch">&nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}</span>
+                                <span class="icon">
+                                    <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                                </span>
                             </button>
                             <b-dropdown-item 
                                     :class="{ 'is-active': viewModeOption == viewMode }"
@@ -331,55 +351,57 @@
                                 <span>
                                         <span class="icon is-small gray-icon">
                                         <i 
-                                                :class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
-                                                        'mdi-view-module' : adminViewMode == 'cards',
-                                                        'mdi-apps' : adminViewMode == 'grid',
-                                                        'mdi-view-column' : adminViewMode == 'records',
-                                                        'mdi-view-dashboard' : adminViewMode == 'masonry'}"
-                                                class="mdi"/>
+                                                :class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined),
+                                                        'tainacan-icon-viewcards' : adminViewMode == 'cards',
+                                                        'tainacan-icon-viewminiature' : adminViewMode == 'grid',
+                                                        'tainacan-icon-viewrecords' : adminViewMode == 'records',
+                                                        'tainacan-icon-viewmasonry' : adminViewMode == 'masonry'}"
+                                                class="tainacan-icon"/>
                                     </span>
                                 </span>
                                 &nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}
-                                <b-icon icon="menu-down" />
+                                <span class="icon">
+                                    <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                                </span>
                             </button>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'table' }"
                                     :value="'table'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-list"/>
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewtable"/>
+                                </span>
                                 {{ $i18n.get('label_table') }}
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'cards' }"
                                     :value="'cards'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-module"/>
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewcards"/>
+                                </span>
                                 {{ $i18n.get('label_cards') }}
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'grid' }"
                                     :value="'grid'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="apps"/>
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewminiature"/>
+                                </span>
                                 {{ $i18n.get('label_thumbnails') }}
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'records' }"
                                     :value="'records'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-column"/>
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewrecords"/>
+                                </span>
                                 {{ $i18n.get('label_records') }}
                             </b-dropdown-item>
                             <b-dropdown-item 
                                     :class="{ 'is-active': adminViewMode == 'masonry' }"
                                     :value="'masonry'">
-                                <b-icon 
-                                        class="gray-icon" 
-                                        icon="view-dashboard"/>
+                                <span class="icon gray-icon">
+                                    <i class="tainacan-icon tainacan-icon-viewmasonry"/>
+                                </span>
                                 {{ $i18n.get('label_masonry') }}
                             </b-dropdown-item>
                         </b-dropdown>
@@ -416,10 +438,10 @@
                                     :value="searchQuery"
                                     @input="futureSearchQuery = $event.target.value"
                                     @keyup.enter="updateSearch()">
-                                <span
+                                <span 
                                         @click="updateSearch()"
                                         class="icon is-right">
-                                    <i class="mdi mdi-magnify" />
+                                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-search"/>
                                 </span>
                         </div>
                         <a
@@ -466,6 +488,7 @@
                 </div>
                 <advanced-search
                         :is-repository-level="isRepositoryLevel"
+                        :collection-id="collectionId"
                         :advanced-search-results="advancedSearchResults"
                         :open-form-advanced-search="openFormAdvancedSearch"
                         :is-do-search="isDoSearch"
@@ -590,7 +613,9 @@
                         class="section">
                     <div class="content has-text-grey has-text-centered">
                         <p>
-                            <b-icon icon="file-multiple"/>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items" />
+                            </span>
                         </p>
                         <p v-if="status == undefined || status == ''">{{ hasFiltered ? $i18n.get('info_no_item_found_filter') : $i18n.get('info_no_item_created') }}</p>
                         <p v-if="status == 'draft'">{{ $i18n.get('info_no_item_draft') }}</p>
@@ -638,10 +663,11 @@
                         class="collapse-all is-size-7"
                         @click="collapseAll = !collapseAll">
                     {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                    <b-icon
-                            type="is-secondary"
-                            size="is-small"
-                            :icon=" collapseAll ? 'menu-down' : 'menu-right'" />
+                    <span class="icon">
+                        <i 
+                                :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                                class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                    </span>
                 </a>
 
                 <br>
@@ -652,6 +678,8 @@
                         ((filters.length >= 0 &&
                         isRepositoryLevel) || filters.length > 0)"
                         :filters="filters"
+                        :taxonomy-filters="taxonomyFilters"
+                        :taxonomy="taxonomy"
                         :collapsed="collapseAll"
                         :is-repository-level="isRepositoryLevel"/>
 
@@ -660,9 +688,9 @@
                         class="is-grouped-centered section">
                     <div class="content has-text-gray has-text-centered">
                         <p>
-                            <b-icon
-                                    icon="filter"
-                                    size="is-large"/>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
+                            </span>
                         </p>
                         <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
                         <router-link
@@ -712,15 +740,16 @@
                 isDoSearch: false,
                 searchControlHeight: 0,
                 sortingMetadata: [],
-                isFilterModalActive: false
+                isFilterModalActive: false,
+                customFilters: []
             }
         },
         props: {
-            // collectionId: Number,
+            collectionId: Number,
             termId: Number,
             taxonomy: String,
             defaultViewMode: String, // Used only on theme
-            enabledViewModes: Object // Used only on theme
+            enabledViewModes: Object // Used only on theme,
         },
         computed: {
             items() {
@@ -735,6 +764,9 @@
             filters() {
                 return this.getFilters();
             },
+            taxonomyFilters() {
+                return this.getTaxonomyFilters();
+            },
             metadata() {
                 return this.getMetadata();
             },
@@ -787,10 +819,12 @@
                 'getMetadata'
             ]),
             ...mapActions('filter', [
-                'fetchFilters'
+                'fetchFilters',
+                'fetchTaxonomyFilters'
             ]),
             ...mapGetters('filter', [
-                'getFilters'
+                'getFilters',
+                'getTaxonomyFilters'
             ]),
             ...mapGetters('search', [
                 'getSearchQuery',
@@ -905,14 +939,24 @@
                 
                 this.isLoadingFilters = true;
 
-                this.fetchFilters({
-                    collectionId: this.collectionId,
-                    isRepositoryLevel: this.isRepositoryLevel,
-                    isContextEdit: !this.isOnTheme,
-                    includeDisabled: 'no',
-                })
-                    .then(() => this.isLoadingFilters = false)
-                    .catch(() => this.isLoadingFilters = false);
+                // Normal filter loading, only collection ones
+                if (this.taxonomy == undefined) {
+                    this.fetchFilters({
+                        collectionId: this.collectionId,
+                        isRepositoryLevel: this.isRepositoryLevel,
+                        isContextEdit: !this.isOnTheme,
+                        includeDisabled: 'no',
+                    })
+                        .then(() => this.isLoadingFilters = false)
+                        .catch(() => this.isLoadingFilters = false);
+                
+                // Custom filter loading, get's from collections that have items with that taxonomy
+                } else {
+                    let taxonomyId = this.taxonomy.split("_");
+                    this.fetchTaxonomyFilters(taxonomyId[taxonomyId.length - 1])
+                        .catch(() => this.isLoadingFilters = false);
+                        
+                }
             },
             prepareMetadata() {
 
@@ -1142,8 +1186,12 @@
 
             this.isRepositoryLevel = (this.collectionId === undefined);
 
-            // this.$eventBusSearch.setCollectionId(this.collectionId);
-            this.$eventBusSearch.setTerm(this.termId, this.taxonomy);
+            if (this.collectionId != undefined)
+                this.$eventBusSearch.setCollectionId(this.collectionId);
+
+            if (this.termId != undefined && this.termId != null)
+                this.$eventBusSearch.setTerm(this.termId, this.taxonomy);
+            
             this.$eventBusSearch.updateStoreFromURL();
 
             this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
@@ -1381,7 +1429,7 @@
         top: 120px;
         left: 0;
         max-width: 23px;
-        height: 21px;
+        height: 26px;
         width: 23px;
         border: none;
         background-color: $turquoise1;
@@ -1404,7 +1452,7 @@
             max-width: 100%;
             width: auto;
             padding: 3px 6px 3px 0px;
-            height: 24px;
+            height: 26px;
 
             .icon {
                 position: relative;
@@ -1412,7 +1460,7 @@
             }
             .text {
                 position: relative;
-                top: -6px;
+                top: -2px;
             }
         }
     }
@@ -1449,7 +1497,8 @@
         }
 
         .button {
-            align-items: flex-start;
+            display: flex;
+            align-items: center;
         }
         
         .field {
@@ -1460,8 +1509,11 @@
             color: $gray4 !important;
             padding-right: 10px;
         }
-        .gray-icon .icon i::before, .gray-icon i::before {
+        
+        .gray-icon .icon i::before, 
+        .gray-icon i::before {
             font-size: 1.3125rem !important;
+            max-width: 26px;
         }
         
         .view-mode-icon {
@@ -1483,7 +1535,7 @@
                     padding: 0.25rem 1.0rem 0.25rem 0.75rem;
                 }
                 .dropdown-item span{
-                    vertical-align: sub;
+                    vertical-align: middle;
                 }      
                 .dropdown-item-apply {
                     width: 100%;

src/admin/pages/singles/collection-page.vue

@@ -7,7 +7,6 @@
                     id="collection-page-container"
                     :collection-id="collectionId" 
                     class="page-container page-container-small"/>
-            
         </section>
     </div>
 </template>

src/admin/pages/singles/event-page.vue

@@ -22,9 +22,9 @@
                                             @click="comp = 'Split'"
                                             :class="{'is-selected': comp === 'Split', 'is-focused': comp === 'Split'}"
                                             class="button">
-                                        <b-icon
-                                                icon="pause"
-                                                size="is-small"/>
+                                        <span class="icon is-small">
+                                            <i class="tainacan-icon tainacan-icon-pause" />
+                                        </span>
                                         <span>{{ $i18n.get('split') }}</span>
                                     </a>
                                 </p>
@@ -33,9 +33,9 @@
                                             @click="comp = 'Unified'"
                                             :class="{'is-selected': comp === 'Unified', 'is-focused': comp === 'Unified'}"
                                             class="button">
-                                        <b-icon
-                                                icon="minus"
-                                                size="is-small"/>
+                                        <span class="icon is-small">
+                                            -
+                                        </span>
                                         <span>{{ $i18n.get('unified') }}</span>
                                     </a>
                                 </p>

src/admin/pages/singles/item-page.vue

@@ -6,10 +6,20 @@
         <button 
                 id="metadata-column-compress-button"
                 @click="isMetadataColumnCompressed = !isMetadataColumnCompressed">
-            <b-icon :icon="isMetadataColumnCompressed ? 'menu-left' : 'menu-right'" />
+            <span class="icon">
+                <i 
+                        :class="{ 'tainacan-icon-arrowleft' : isMetadataColumnCompressed, 'tainacan-icon-arrowright' : !isMetadataColumnCompressed }"
+                        class="tainacan-icon tainacan-icon-20px"/>
+            </span>
         </button>
         <div class="tainacan-page-title">
-            <h1>{{ $i18n.get('title_item_page') + ' ' }}<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span></h1>
+            <h1>
+                {{ $i18n.get('title_item_page') + ' ' }}
+                <span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span>
+                <span 
+                        v-if="(item != null && item != undefined && item.status != undefined && !isLoading)"
+                        class="status-tag">{{ $i18n.get(item.status) }}</span>
+            </h1>
             <a 
                     @click="$router.go(-1)"
                     class="back-link has-text-secondary">
@@ -126,10 +136,11 @@
                                         slot-scope="session_props">
                                     <label>
                                         {{ $i18n.get('label_exposer_urls') }}
-                                        <b-icon
-                                                type="is-secondary"
-                                                :icon="session_props.open ? 'menu-down' : 'menu-right'"
-                                        />
+                                        <span class="icon">
+                                            <i 
+                                                    :class="{ 'tainacan-icon-arrowdown' : session_props.open, 'tainacan-icon-arrowright' : !session_props.open }"
+                                                    class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                        </span>
                                     </label>
                                 </div>
                                 <br>
@@ -137,9 +148,11 @@
                                         class="collapse-all"
                                         @click="urls_open = !urls_open">
                                     {{ urls_open ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                                    <b-icon
-                                            type="is-secondary"
-                                            :icon=" urls_open ? 'menu-down' : 'menu-right'"/>
+                                    <span class="icon">
+                                        <i 
+                                                :class="{ 'tainacan-icon-arrowdown' : urls_open, 'tainacan-icon-arrowright' : !urls_open }"
+                                                class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                    </span>
                                 </a>
                                 <div>
                                     <div
@@ -151,10 +164,11 @@
                                                     class="label"
                                                     slot="trigger"
                                                     slot-scope="props">
-                                                <b-icon
-                                                        type="is-secondary"
-                                                        :icon="props.open ? 'menu-down' : 'menu-right'"
-                                                />
+                                                <span class="icon">
+                                                    <i 
+                                                            :class="{ 'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open }"
+                                                            class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                                </span>
                                                 {{ index }}
                                             </label>
                                             <div
@@ -208,12 +222,12 @@
                         <div class="field has-addons">
                             <span v-if="item.status != 'private'">
                                 <span class="icon">
-                                    <i class="mdi mdi-earth"/>
+                                    <i class="tainacan-icon tainacan-icon-public"/>
                                 </span> {{ $i18n.get('publish_visibility') }}
                             </span>
                             <span v-if="item.status == 'private'">
                                 <span class="icon">
-                                    <i class="mdi mdi-lock"/>
+                                    <i class="tainacan-icon tainacan-icon-private"/>
                                 </span>  {{ $i18n.get('private_visibility') }}
                             </span>
                         </div>
@@ -241,9 +255,11 @@
                             class="collapse-all"
                             @click="open = !open">
                         {{ open ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
-                        <b-icon
-                                type="is-secondary"
-                                :icon=" open ? 'menu-down' : 'menu-right'"/>
+                        <span class="icon">
+                            <i 
+                                    :class="{ 'tainacan-icon-arrowdown' : open, 'tainacan-icon-arrowright' : !open }"
+                                    class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                        </span>
                     </a>
                     <div>
                         <div
@@ -255,10 +271,11 @@
                                         class="label"
                                         slot="trigger"
                                         slot-scope="props">
-                                    <b-icon
-                                            type="is-secondary"
-                                            :icon="props.open ? 'menu-down' : 'menu-right'"
-                                    />
+                                    <span class="icon">
+                                            <i 
+                                                    :class="{ 'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open }"
+                                                    class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
+                                        </span>
                                     {{ metadatum.metadatum.name }}
                                 </label>
                                 <div
@@ -321,7 +338,7 @@
                 isLoading: false,
                 isLoadingMetadatumMappers: false,
                 isMetadataColumnCompressed: false,
-                open: false,
+                open: true,
                 collectionName: '',
                 thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
                 urls_open: false,
@@ -489,6 +506,16 @@
                 flex-shrink: 1;
                 flex-grow: 1;
             }
+            .status-tag {
+                color: white;
+                background: $turquoise5;
+                padding: 0.15rem 0.5rem;
+                font-size: 0.75rem;
+                margin: 0 1rem;
+                font-weight: 600;
+                position: relative;
+                top: -2px;
+            }
             a.back-link{
                 font-weight: 500;
                 float: right;

src/admin/pages/singles/taxonomy-page.vue

@@ -1,62 +0,0 @@
-<template>
-    <div class="columns is-fullheight">
-        <div class="page-container repository-level-page">
-            <div class="card">
-                <div class="card-content">
-                    <p class="title">
-                        {{ taxonomy.name }}
-                    </p>
-                    <p class="subtitle">
-                        {{ taxonomy.description }}
-                    </p>
-                </div>
-                <footer class="card-footer">
-                    <router-link
-                            class="card-footer-item"
-                            :to="{ path: $routerHelper.getTaxonomyEditPath(taxonomyId)}">
-                        {{ $i18n.getFrom('taxonomies','edit_item') }}
-                    </router-link>
-                    <a class="card-footer-item">
-                        Edit terms
-                    </a>
-                </footer>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { mapActions, mapGetters } from 'vuex';
-
-    export default {
-        name: 'TaxonomyPage',
-        data(){
-            return {
-                taxonomyId: Number,
-            }
-        },
-        methods: {
-            ...mapActions('taxonomy', [
-                'fetchTaxonomy'
-            ]),
-            ...mapGetters('taxonomy', [
-                'getTaxonomy'
-            ])
-        },
-        computed: {
-          taxonomy(){
-              return this.getTaxonomy();
-          }
-        },
-        created(){
-            this.taxonomyId = parseInt(this.$route.params.taxonomyId);
-
-            this.fetchTaxonomy(this.taxonomyId);
-        }
-
-    }
-</script>
-
-<style scoped>
-
-</style>

src/admin/scss/_buttons.scss

@@ -28,10 +28,13 @@
         transform: none !important;
     }
     &.is-outlined {
-        color: $turquoise5 !important;
+        color: $turquoise5;
         background-color: white !important;
         border-color: $gray4 !important;
     }
+    &.is-outlined:hover {
+        color: $turquoise5 !important;
+    }
     &:focus {
         outline: 0px;
     }
@@ -52,11 +55,10 @@
     }
 }
 .button.is-small {
-    height: 26px !important;
+    height: 1.625rem !important;
     line-height: 0.75rem;
 }
 .button:not(.is-small):not(.is-medium):not(.is-large) {
-    height: 30px !important;
-    line-height: 1.25rem !important;
+    height: 1.875rem !important;
     font-size: 0.875rem !important;
 }

src/admin/scss/_collection-home-cards.scss

@@ -0,0 +1,112 @@
+.tainacan-cards-container {
+    min-height: 50vh;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: space-between;
+    align-content: baseline;
+    animation-name: item-appear;
+    animation-duration: 0.5s;
+
+    .tainacan-card {
+        background-color: $gray1;
+        padding: 0px;
+        margin-top: 0.75rem;
+        margin-bottom: 1.6rem;
+        flex-basis: 0;
+        min-height: 135px;
+        cursor: pointer;
+        text-decoration: none !important;
+        display: flex;
+        flex-wrap: wrap;
+
+        @media screen and (max-width: 768px) {
+            max-width: 100%;
+            min-width: 100%;
+        }
+
+        &:hover .menu-list {
+            background-color: $gray2;
+            a { background-color: $gray2; }
+        }
+
+        &.new-card {
+            .list-metadata { 
+                text-align: center;
+                color: $turquoise5;
+                max-width: calc(100% - 46px); 
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+            .menu-list { 
+                width: 46px;
+                flex-wrap: nowrap; 
+                flex-direction: column;
+                li { height: 100%; }
+            }
+        }
+
+        &.first-card {
+            .list-metadata { 
+                text-align: center;
+                color: $turquoise5;
+                max-width:100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        
+        .menu-list {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            
+            li {
+                text-align: center;
+                width: 100%;
+                a { 
+                    color: $turquoise5; 
+                    padding: 0.5em 0.5em;
+                    border-radius: 0;
+                    transition: none;
+                }
+            }
+        }
+
+        .card-body {
+            width: 100%;
+            display: flex;
+            
+            img {
+                width: 96px;
+                height: 96px;
+                border-radius: 0px;
+            }
+            .metadata-title {
+                overflow: hidden;
+                padding: 0.75rem 1rem;
+                flex-basis: calc(100% - 96px);
+                
+                p {
+                    color: black !important;
+                    font-size: 0.875rem !important; 
+                    margin-bottom: 0;
+                }
+            }
+            &:hover .metadata-title {
+                p { text-decoration: none !important; }
+            }
+        }    
+    }
+}
+
+

src/admin/scss/_dropdown-and-autocomplete.scss

@@ -2,9 +2,10 @@
     .dropdown-trigger{
         .button {
             border: none;
+            align-items: center;
             .icon {
                 color: $secondary;
-                align-items: start;
+                align-items: center;
             }
         }
         .button.is-primary, .button.is-secondary, .button.is-success {
@@ -12,6 +13,9 @@
                 color: $white;
             }
         }
+        .dropdown.is-disabled {
+            cursor: default;
+        }
     }
     .dropdown-menu {
         padding: 0px;
@@ -33,11 +37,19 @@
                 .is-small { color: $gray4; }
                 &.is-active { background-color: $turquoise2; }
 
+                .media-left {
+                    margin-right: 0.5rem;
+                }
                 .media-content {
-                    overflow-x: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    max-width: 150px;
+                    display: flex;
+                    width: 80%;
+
+                    .ellipsed-text {
+                        overflow-x: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        margin-right: 3px;
+                    }
                 }
             }
         } 

src/admin/scss/_filters-menu-modal.scss

@@ -11,7 +11,7 @@
     .modal-content {
         background-color: white;
         margin: 0 8.3333333% 0 0;
-        padding: 24px $page-side-padding;
+        padding: 24px $page-side-padding 24px 8.3333333%;
         border-radius: 0;
         height: 100%;
         max-height: 100%;

src/admin/scss/_modals.scss

@@ -3,10 +3,6 @@
     width: 100%;
 }
 
-.modal {
-    display: inline-block;
-}
-
 .tainacan-modal-title {
     display: flex;
     flex-wrap: wrap;

src/admin/scss/_tables.scss

@@ -188,10 +188,6 @@
                         a {
                             margin: auto;
                             font-size: 1.125rem !important;
-
-                            .mdi-settings, .mdi-settings::before {
-                                font-size: 1.4375rem;
-                            }
                         }
     
                     }

src/admin/scss/_tainacan-form.scss

@@ -32,8 +32,14 @@
         overflow: hidden;
         vertical-align: top;
     }
+    .section-label>label {
+        cursor: default;
+    }
     .required-metadatum-asterisk {
-        color: $gray3;
+        color: $gray5;
+        position: relative;
+        top: -3px;
+        
         &.is-danger {
             color: $danger;
         }
@@ -109,5 +115,6 @@
         transition: color 0.2s background-color 0.2s;
         border-radius: 0 !important;
         border-color: $gray2;
+        padding: 1.25rem;
     }
 }

src/admin/scss/_variables.scss

@@ -26,6 +26,7 @@ $turquoise4-invert: findColorInvert($turquoise4);
 $turquoise5: #298596;
 $turquoise5-invert: findColorInvert($turquoise5);
 // Gray, used mostyl for information
+$gray0: #f6f6f6;
 $gray1: #f2f2f2;
 $gray1-invert: findColorInvert($gray1);
 $gray2: #dbdbdb;
@@ -150,7 +151,7 @@ $table-cell-padding: 1.0em 0.75em;
 // Roboto font
 $family-sans-serif: 'Roboto', sans-serif;
  
-// Bulma's modal (needs to be greather than taincan-admin-app)
+// Bulma's modal (needs to be greather than tainacan-admin-app)
 $modal-z: 9999999;
 
 // Animations for Slide Menu

src/admin/scss/_view-mode-cards.scss

@@ -56,7 +56,7 @@
         .actions-area {
             position: relative;
             float: right;
-            top: -5px;
+            top: -7px;
             padding-right: 12px;
             //width: 80px;
             display: flex;
@@ -86,7 +86,7 @@
         .metadata-title {
             flex-shrink: 0;
             padding: 0.6rem 4.75rem 0.5rem 2.75rem;
-            margin-bottom: -27px;
+            margin-bottom: -25px;
             min-height: 40px;
             font-size: 0.875rem !important; 
             text-overflow: ellipsis;

src/admin/scss/_view-mode-grid.scss

@@ -53,8 +53,8 @@
         }
 
         img {
-            min-width: 255px;
             max-width: 255px;
+            max-height: 255px;
             height: auto;
             border-radius: 0px;
             margin-bottom: -5px;

src/admin/scss/_view-mode-masonry.scss

@@ -41,7 +41,7 @@
             opacity: 0;
             padding: 2px 8px;
             transition: visibility 0.2s, opacity 0.2s;
-            margin-top: -31px;
+            margin-top: -29px;
             background-color: $gray2;
 
             a {

src/admin/scss/_view-mode-records.scss

@@ -43,7 +43,7 @@
         .actions-area {
             position: relative;
             float: right;
-            top: -5px;
+            top: -7px;
             padding-right: 12px;
             //width: 80px;
             display: flex;
@@ -51,6 +51,10 @@
             visibility: hidden;
             opacity: 0;
             transition: visibility 0.2s, opacity 0.2s;
+
+            a {
+                margin-left: 12px;
+            }
         }
         &:hover .actions-area {
             visibility: visible;

src/admin/scss/_view-mode-slideshow.scss

@@ -108,11 +108,18 @@
             margin-bottom: 0.75rem !important;
             display: inline-flex;
             align-items: center;
+            max-width: 100%;
 
-            span {
+            span:not(.ellipsed-text) {
                 margin-right: 5px;
                 margin-left: -5px;
             }
+            .ellipsed-text {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                max-width: 100%;
+            }
         }
         .content {
             font-size: 0.75rem;
@@ -293,6 +300,9 @@
             border-radius: 100px;
             background: white;
             border: 3px solid $turquoise5;
+            i, i:before {
+                font-size: 36px;
+            }
         }
         &:focus, &:active {
             outline: 0;
@@ -300,8 +310,8 @@
         }
         .circular-counter {
             position: absolute;
-            right: calc(4.16667% + 1px);
-            top: -3px;
+            right: calc(4.16667% + -2px);
+            top: -6px;
         }
     }
 }
@@ -325,7 +335,7 @@
         width: 2.5rem;
         text-align: center;
 
-        .mdi::before {
+        .tainacan-icon::before {
             line-height: 5rem;
             font-size: 5rem;
             color: $turquoise5;
@@ -349,7 +359,7 @@
             height: 2.5rem;
             width: 1.5rem;
         
-            .mdi::before {
+            .tainacan-icon::before {
                 line-height: 3rem;
                 font-size: 3rem;
                 color: white;

src/admin/scss/tainacan-admin.scss

@@ -1,3 +1,6 @@
+// TAINACAN ICON FONT
+@import "../../assets/css/fonts/tainacanicons.css";
+
 // Tainacan custom colors and bulma's core
 @import "./_variables.scss";
 

src/admin/tainacan-admin-i18n.php

@@ -55,7 +55,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'approve_item'                                   => __( 'Approve', 'tainacan' ),
 	'not_approve_item'                               => __( 'Not approve', 'tainacan' ),
 	'add_one_item'                                   => __( 'Add one item', 'tainacan' ),
-	'add_items_bulk'                                 => __( 'Add items in bulk', 'tainacan' ),
+	'add_items_bulk'                                 => __( 'Bulk add items', 'tainacan' ),
 	'add_items_external_source'                      => __( 'Add items from an external source', 'tainacan' ),
 	'new_mapped_item'                                => __( 'New mapped collection', 'tainacan' ),
 	'new_blank_collection'                           => __( 'New Blank Collection', 'tainacan' ),
@@ -120,6 +120,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'title_export_item_page'                         => __( 'Export Item', 'tainacan' ),
 	'title_export_page'                              => __( 'Export', 'tainacan' ),
 	'title_processes_page'                           => __( 'Processes', 'tainacan' ),
+	'title_item_bulk_add'							 => __( 'Bulk Add Items', 'tainacan' ),
 
 	// Labels (used mainly on Aria Labels and Inputs)
 	'label_clean'                                    => __( 'Clear', 'tainacan' ),
@@ -264,6 +265,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_url_source_link'                          => __( 'URL Source link', 'tainacan' ),
 	'label_metadata_mapping'                         => __( 'Metadata mapping', 'tainacan' ),
 	'label_select_metadatum'                         => __( 'Select metadatum', 'tainacan' ),
+	'label_create_metadatum'                         => __( 'Create metadatum', 'tainacan' ),
 	'label_select_metadatum_type'                    => __( 'Select a metadatum type', 'tainacan' ),
 	'label_add_more_metadata'                        => __( 'Add more metadata', 'tainacan' ),
 	'label_from_source_collection'                   => __( 'From source collection', 'tainacan' ),
@@ -309,12 +311,25 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_untrash_selected_items'                   => __( 'Recover from trash', 'tainacan' ),
 	'label_value_not_informed'		                 => __( 'Value not informed.', 'tainacan' ),
 	'label_description_not_informed'                 => __( 'Description not informed.', 'tainacan' ),
+	'label_save_goto_metadata'		                 => __( 'Save and Go to Metadata', 'tainacan' ),
+	'label_save_goto_filter'		                 => __( 'Save and Go to Filters', 'tainacan' ),
+	'label_view_all_collections'	                 => __( 'View all Collections', 'tainacan' ),
+	'label_view_on_theme'			                 => __( 'View on Theme', 'tainacan' ),
+	'label_create_collection'			             => __( 'Create Collection', 'tainacan' ),
 	'label_hide_metadata'	                     	 => __( 'Hide metadata', 'tainacan' ),
 	'label_show_metadata'	                     	 => __( 'Show metadata', 'tainacan' ),
 	'label_all_terms'                                => __( 'All terms', 'tainacan' ),
 	'label_selected_terms'                           => __( 'Selected terms', 'tainacan'),
 	'label_editing_item_number'                      => __( 'Editing item n.', 'tainacan'),
 	'label_sequence_editing_item'                    => __( 'Sequence editing: Item', 'tainacan'),
+	'label_files_remaining'		                     => __( 'files remaining.', 'tainacan'),
+	'label_file_remaining'		                     => __( 'file remaining.', 'tainacan'),
+	'label_upload_file_prepare_items'                => __( 'Uploading files and preparing items', 'tainacan'),
+	'label_bulk_edit_items'		                     => __( 'Bulk edit items', 'tainacan'),
+	'label_sequence_edit_items'	                     => __( 'Sequence edit items', 'tainacan'),
+	'label_documents_upload'	                     => __( 'Documents upload', 'tainacan'),
+	'label_added_items'			                     => __( 'Added items', 'tainacan'),
+	'label_filters_from'			                 => __( 'Filters from', 'tainacan'),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),
@@ -409,7 +424,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'info_warning_metadata_not_saved'                => __( 'Are you sure? There are metadata not saved, changes will be lost.', 'tainacan' ),
 	'info_warning_filters_not_saved'                 => __( 'Are you sure? There are filters not saved, changes will be lost.', 'tainacan' ),
 	'info_no_description_provided'                   => __( 'No description provided.', 'tainacan' ),
-	'info_warning_taxonomy_not_saved'                => __( 'Are you sure? The metadata is not saved, changes will be lost.', 'tainacan' ),
+	'info_warning_taxonomy_not_saved'                => __( 'Are you sure? The taxonomy is not saved, changes will be lost.', 'tainacan' ),
 	'info_warning_terms_not_saved'                   => __( 'Are you sure? There are terms not saved, changes will be lost.', 'tainacan' ),
 	'info_warning_orphan_terms'                      => __( 'Are you sure? This term is parent of other terms. These will be converted to root terms.', 'tainacan' ),
 	'info_no_events'                                 => __( 'No events', 'tainacan' ),
@@ -453,6 +468,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'info_there_are_no_metadata_in_repository_level' => __( 'There are no metadata in repository level', 'tainacan' ),
 	'info_import_collection'						 => __( 'Import from external sources.', 'tainacan' ),
 	'info_import_items'								 => __( 'Import items from external sources.', 'tainacan' ),
+	'info_bulk_add_items'							 => __( 'Bulk add documents from your computer as items.', 'tainacan' ),
 	'info_editing_items_in_bulk'                     => __( 'Bulk edit items', 'tainacan' ),
 	'info_by_inner'                                  => __( 'by', 'tainacan' ),
 	'info_items_selected'                            => __( 'items selected', 'tainacan' ),
@@ -461,7 +477,19 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'info_no_parent_term_found'                      => __( 'No valid parent term was found with this name.', 'tainacan' ),
 	'info_warning_changing_parent_term'              => __( 'Warning! Changing parent term will reload the terms list, thus uncheking any selection.', 'tainacan' ),
 	'info_warning_selected_items_remove_from_trash'  => __( 'Do you really want to remove from trash the selected items?', 'tainacan'),
-
+	'info_no_options_avialable_filtering'  			 => __( 'No options for this filtering.', 'tainacan'),
+	'info_no_options_found'				  			 => __( 'No options found.', 'tainacan'),
+	'info_all_files_uploaded'  						 => __( 'All files uploaded.', 'tainacan'),
+	'info_there_are'  						 		 => __( 'There are', 'tainacan'),
+	'info_items_being_edited'				 		 => __( 'items being edited', 'tainacan'),
+	'info_there_is'  						 		 => __( 'There is', 'tainacan'),
+	'info_item_being_edited'				 		 => __( 'item being edited', 'tainacan'),
+	'info_no_preview_found'				 		 	 => __( 'No preview was found.', 'tainacan'),
+	'info_leaving_bulk_edition'				 	 	 => __( 'You are leaving the bulk edition now.', 'tainacan'),
+	'info_leaving_bulk_edition'				 	 	 => __( 'You are leaving the bulk edition now.', 'tainacan'),
+	'info_current_view_mode_metadata_not_allowed'  	 => __( 'Current view mode does not allow displayed metadata selection.', 'tainacan'),
+	'info_cant_select_metadata_without_items'  		 => __( 'Can not select displayed metadata without items on list.', 'tainacan'),
+	
 	// Tainacan Metadatum Types
 	'tainacan-text'                                  => __( 'Text', 'tainacan' ),
 	'tainacan-textarea'                              => __( 'Text area', 'tainacan' ),

src/admin/theme-items-list.vue

@@ -10,6 +10,8 @@
             v-if="$root.termId != undefined && $root.termId != ''"
             class="theme-items-list"
             :taxonomy="$root.taxonomy"
+            :custom-filters="$root.customFilters"
+            :collection-id="$root.collectionId"
             :enabled-view-modes="$root.enabledViewModes" 
             :default-view-mode="$root.defaultViewMode"
             :term-id="$root.termId" />
@@ -25,9 +27,10 @@ export default {
 }
 </script>
 
-
 <style lang="scss">
-   @import "../admin/scss/_variables.scss";
+
+    // TAINACAN Variables
+    @import "./scss/_variables.scss";
 
     // Bulma imports
     @import "./scss/theme-basics.sass";
@@ -80,6 +83,10 @@ export default {
         .dropdown-menu {
             display: block;
         }
+        .dropdown .dropdown-trigger .button .icon, 
+        .autocomplete .dropdown-trigger .button .icon {
+            align-items: center;
+        }
         .b-radio.radio {
 
             input[type="radio"] + .check {

src/api/class-tainacan-rest-controller.php

@@ -163,24 +163,6 @@ class REST_Controller extends \WP_REST_Controller {
 
 			foreach ( $request_meta_query as $index1 => $a ) {
 
-                // handle core metadatum
-                if( is_array($a) && array_key_exists("key", $a) && ( !isset($request['advancedSearch']) || !$request['advancedSearch'] ) ){
-                    $metadatum = new \Tainacan\Entities\Metadatum($a['key']);
-                    if( strpos( $metadatum->get_metadata_type(), 'Core_Title') !== false ){
-                        $args[ 'post_title_in' ] = [
-                            'relation' => ( isset( $request_meta_query['relation']) ) ? $request_meta_query['relation'] : 'AND' ,
-                            'value' => ( is_array( $a['value'] ) ) ? $a['value'] : [$a['value']]
-                        ];
-                        continue;
-                    } else if( strpos( $metadatum->get_metadata_type(), 'Core_Description') !== false ) {
-                        $args[ 'post_content_in' ] = [
-                            'relation' => ( isset( $request_meta_query['relation']) ) ? $request_meta_query['relation'] : 'AND' ,
-                            'value' => ( is_array( $a['value'] ) ) ? $a['value'] : [$a['value']]
-                        ];
-                        continue;
-                    }
-                }
-
 				foreach ( $query as $mapped_meta => $meta_v ) {
 					if ( isset( $a[ $meta_v ] ) ) {
 						$args[ $mapped_v ][ $index1 ][ $meta_v ] = $request[ $mapped ][ $index1 ][ $meta_v ];

src/api/endpoints/class-tainacan-rest-facets-controller.php

@@ -8,17 +8,8 @@ use \Tainacan\API\REST_Controller;
 
 class REST_Facets_Controller extends REST_Controller {
 
-	private $total_pages;
-	private $total_items;
 
-	private $collection;
-	private $collection_repository;
 	private $metadatum_repository;
-	private $filter_repository;
-	private $terms_repository;
-	private $taxonomy_repository;
-	private $items_repository;
-	private $taxonomy;
 
 	/**
 	 * REST_Facets_Controller constructor.
@@ -35,15 +26,7 @@ class REST_Facets_Controller extends REST_Controller {
 	 * Initialize objects after post_type register
 	 */
 	public function init_objects() {
-        $this->collection = new Entities\Collection();
-        
-		$this->collection_repository = Repositories\Collections::get_instance();
 		$this->metadatum_repository = Repositories\Metadata::get_instance();
-		$this->filter_repository = Repositories\Filters::get_instance();
-		$this->terms_repository = Repositories\Terms::get_instance();
-		$this->taxonomy_repository = Repositories\Taxonomies::get_instance();
-		$this->items_repository = Repositories\Items::get_instance();
-        
 	}
 
 	public function register_routes() {
@@ -53,9 +36,9 @@ class REST_Facets_Controller extends REST_Controller {
 				'callback'            => array($this, 'get_items'),
 				'permission_callback' => array($this, 'get_items_permissions_check')
 			)
-        ));
-        
-        register_rest_route($this->namespace, '/' . $this->rest_base . '/(?P<metadatum_id>[\d]+)', array(
+		));
+		
+		register_rest_route($this->namespace, '/' . $this->rest_base . '/(?P<metadatum_id>[\d]+)', array(
 			array(
 				'methods'             => \WP_REST_Server::READABLE,
 				'callback'            => array($this, 'get_items'),
@@ -72,207 +55,86 @@ class REST_Facets_Controller extends REST_Controller {
 	public function get_items( $request ) {
 		
 		$metadatum_id = $request['metadatum_id'];
-        $metadatum = $this->metadatum_repository->fetch($metadatum_id);
-
-		$response = $this->prepare_item_for_response($metadatum, $request );
-
-		$rest_response = new \WP_REST_Response($response, 200);
-
-		$rest_response->header('X-WP-Total', $this->total_items);
-		$rest_response->header('X-WP-TotalPages', $this->total_pages);
-
-        return $rest_response;
-    }
-
-	/**
-	 *
-	 * Receive a \WP_Query or a metadatum object and return both in JSON
-	 *
-	 * @param mixed $metadatum
-	 * @param \WP_REST_Request $request
-	 *
-	 * @return mixed|string|void|\WP_Error|\WP_REST_Response
-	 */
-	public function prepare_item_for_response($metadatum, $request){
-		$response = [];
-		$metadatum_type = null;
-
-        if( !empty($metadatum) ){
-
+		
+		if( !empty($metadatum_id) ) {
+			
+			$metadatum = $this->metadatum_repository->fetch($metadatum_id);
 			$metadatum_type = $metadatum->get_metadata_type();
-			$options = $metadatum->get_metadata_type_options();
-			$args = $this->prepare_filters($request);
-
-			// handle filter with relationship metadata
-
-			if( $metadatum_type === 'Tainacan\Metadata_Types\Relationship' ){
-
-				$selected =  $this->getRelationshipSelectedValues($request, $metadatum->get_id());
-				$restItemsClass = new REST_Items_Controller();
-
-				if(isset($request['number'])){
-					$args['posts_per_page'] = $request['number'];
-				}
-	
-				$items = $this->items_repository->fetch($args, $options['collection_id'], 'WP_Query');
-				$ids = [];
-
-				// retrieve selected items
-
-				if( $selected && $request['getSelected'] && $request['getSelected'] === '1' ){
-					foreach( $selected as $index => $item_id ){
-
-						$item = new Entities\Item($item_id);
-						$prepared_item = $restItemsClass->prepare_item_for_response($item, $request);
-						$response[] = $prepared_item;
-						$ids[] = $item_id;
-					}
-				}
-
-				if ($items->have_posts()) {
-					while ( $items->have_posts() ) {
-						$items->the_post();
-		
-						$item = new Entities\Item($items->post);
-						$prepared_item = $restItemsClass->prepare_item_for_response($item, $request);
-
-						if( in_array((string) $items->post->ID,$ids) ){
-							continue;
-						} 
-
-						if( isset($request['number']) && count($response) >= $request['number']){
-							break;
-						}
-		
-						array_push($response, $prepared_item);
-					}
-		
-					wp_reset_postdata();
-				}
-
-				$this->total_items = $items->found_posts;
-				$this->total_pages = ceil($this->total_items / (int) $items->query_vars['posts_per_page']);
-
-			} 
-
-			// handle filter with Taxonomy metadata
 			
-			else if ( $metadatum_type === 'Tainacan\Metadata_Types\Taxonomy' ){
-
-				$this->taxonomy = $this->taxonomy_repository->fetch($options['taxonomy_id']);
-				$selected = $this->getTaxonomySelectedValues($request, $options['taxonomy_id']);
-
-				if( isset($request['term_id']) ){
-					
-					$terms[] = $this->terms_repository->fetch($request['term_id'], $this->taxonomy);
-					$restTermClass = new REST_Terms_Controller();
-
-				} else {
-
-					$terms = $this->terms_repository->fetch($args, $this->taxonomy);
-
-					// retrieve selected items
-
-					if( $selected && $request['getSelected'] && $request['getSelected'] === '1' ){
-						$ids = $this->get_terms_ids( $terms );
-						$realResponse = [];
-
-						foreach( $selected as $index => $term_id ){
-
-							$term_selected = $this->terms_repository->fetch($term_id, $this->taxonomy);
-							$realResponse[] = $term_selected;
-						}
-
-						foreach( $terms as $index => $term ){
-
-							if( in_array($term->WP_Term->term_id, $selected) ){
-								continue;
-							}
-
-							$realResponse[] = $term;
-
-							if( isset($request['number']) && count($realResponse) >= $request['number']){
-								break;
-							}
-						}
-
-						$terms = $realResponse;
-					}
-					
-					$restTermClass = new REST_Terms_Controller();
-				}
-
-				foreach ($terms as $term) {
-					array_push($response, $restTermClass->prepare_item_for_response( $term, $request ));
-				}
-
-				$this->set_pagination_properties_term_type( $args, $response );
-
-			} 
+			$offset = null;
+			$number = null;
+			$_search = null;
+			$collection_id = ( isset($request['collection_id']) ) ? $request['collection_id'] : null;
 			
-			// handle filter with Text metadata
-
-			else {
-
-				$metadatum_id = $metadatum->get_id();
-				$offset = null;
-				$number = null;
-				$collection_id = ( isset($request['collection_id']) ) ? $request['collection_id'] : false;
-				$selected = $this->getTextSelectedValues($request, $metadatum_id);
-
-				if($request['offset'] >= 0 && $request['number'] >= 1){
-					$offset = $request['offset'];
-					$number = $request['number'];
-				}
-
-				if($request['search']){
-					if($collection_id) {
-						$response = $this->metadatum_repository->fetch_all_metadatum_values( $collection_id, $metadatum_id, $request['search'], $offset, $number );
-					} else {
-						$response = $this->metadatum_repository->fetch_all_metadatum_values( null, $metadatum_id, $request['search'], $offset, $number);
-					}
-		
-				} else {
-					if($collection_id) {
-						$response = $this->metadatum_repository->fetch_all_metadatum_values( $collection_id, $metadatum_id, null, $offset, $number);
-					} else {
-						$response = $this->metadatum_repository->fetch_all_metadatum_values( null, $metadatum_id, null, $offset, $number);
-					}
-				}
-
-				$rawResponse = $response;
-
-				// retrieve selected items
-
-				if( count($selected) && $request['getSelected'] && $request['getSelected'] === '1'){
-					$rawValues = $this->get_values( $response );
-					$realResponse = [];
-
-					foreach( $selected as $index => $value ){
-						$row = (object) ['mvalue' => $value, 'metadatum_id' => $metadatum_id ];
-						$realResponse[] = $row;
-					}
-
-					foreach( $rawValues as $index => $row0 ){
-
-						if( !in_array($row0, $selected) ){
-							$realResponse[] = (object) ['mvalue' => $row0, 'metadatum_id' => $metadatum_id];
-
-							if( isset($request['number']) && count($realResponse) >= $request['number']){
-								break;
-							}
-						}
-					}
-					
-					$response = $realResponse;
-				}
-
-				$this->set_pagination_properties_text_type( $offset, $number, $rawResponse );
+			$query_args = defined('TAINACAN_FACETS_DISABLE_FILTER_ITEMS') && true === TAINACAN_FACETS_DISABLE_FILTER_ITEMS ? [] : $request['current_query'];
+			$query_args = $this->prepare_filters($query_args);
+			
+			if ( isset($request['hideempty']) && $request['hideempty'] == 0 ) {
+				$query_args = false;
 			}
-        }
+			
+			if($request['offset'] >= 0 && $request['number'] >= 1){
+				$offset = $request['offset'];
+				$number = $request['number'];
+			}
+			
+			if($request['search']) {
+				$_search = $request['search'];
+			}
+			
+			$include = [];
+			if ( isset($request['getSelected']) && $request['getSelected'] == 1 ) {
+				if ( $metadatum_type === 'Tainacan\Metadata_Types\Taxonomy' ) {
+					$metadatum_options = $metadatum->get_metadata_type_options();
+					$taxonomy_id = $metadatum_options['taxonomy_id'];
+					$taxonomy_slug = Repositories\Taxonomies::get_instance()->get_db_identifier_by_id($taxonomy_id);
+					if( isset($request['current_query']['taxquery']) ){
+						foreach( $request['current_query']['taxquery'] as $taxquery ){
+							if( $taxquery['taxonomy'] === $taxonomy_slug ){
+								$include = $taxquery['terms']; 
+							}
+						}
+					}
+				} else {
+					if( isset($request['current_query']['metaquery']) ){
+						foreach( $request['current_query']['metaquery'] as $metaquery ){
+							if( $metaquery['key'] == $metadatum_id ){
+								$include = $metaquery['value'];
+							}
+						}
+					}
+				}
+			}
+			
+			$parent_id = 0;
+			if ( isset($request['parent']) ) {
+				$parent_id = (int) $request['parent'];
+			}
+			
+			
+			$args = [
+				'collection_id' => $collection_id,
+				'search' => $_search,
+				'offset' => $offset,
+				'number' => $number,
+				'items_filter' => $query_args,
+				'include' => $include,
+				'parent_id' => $parent_id,
+				'count_items' => defined('TAINACAN_FACETS_DISABLE_COUNT_ITEMS') && true === TAINACAN_FACETS_DISABLE_COUNT_ITEMS ? false : true
+			];
+			
+			$response = $this->metadatum_repository->fetch_all_metadatum_values( $metadatum_id, $args );
+			
+			$rest_response = new \WP_REST_Response($response['values'], 200);
 
-		return $this->prepare_response( $response, $metadatum_type );
-    }
+			$rest_response->header('X-WP-Total', $response['total']);
+			$rest_response->header('X-WP-TotalPages', $response['pages']);
+			
+			return $rest_response;
+			
+		}
+		
+	}
 
 	/**
 	 * @param \WP_REST_Request $request
@@ -283,283 +145,6 @@ class REST_Facets_Controller extends REST_Controller {
 		return true;
 	}
 
-	/**
-	 * @param array $response the original response
-	 * @param string $type the metadata type
-	 * 
-	 * @return mixed|string|void|\WP_Error|\WP_REST_Response 
-	 */
-	public function prepare_response( $response, $type ){
-        $result = [];
-
-        if( $response ){
-			foreach ( $response as $key => $item ) {
-
-				if( $type === 'Tainacan\Metadata_Types\Taxonomy' ){
-					$result[] = [
-						'label' => $item['name'],
-						'value' => $item['id'],
-						'img' => ( isset($item['header_image']) ) ? $item['header_image'] : false ,
-						'parent' => ( isset($item['parent']) ) ? $item['parent'] : 0,
-						'total_children' => ( isset($item['total_children']) ) ? $item['total_children'] : 0,
-						'type' => 'Taxonomy',
-						'taxonomy_id' => $this->taxonomy->WP_Post->ID,
-						'taxonomy' => ( isset($item['taxonomy']) ) ? $item['taxonomy'] : false,
-					];
-				} else if( $type === 'Tainacan\Metadata_Types\Relationship' ){
-					$result[] = [
-						'label' => $item['title'],
-						'value' => $item['id'],
-						'img' => ( isset($item['thumbnail']['thumb']) ) ? $item['thumbnail']['thumb'] : false,
-						'parent' => false,
-						'total_children' => 0,
-						'type' => 'Relationship'
-					];
-				} else {
-					$result[] = [
-						'label' => $item->mvalue,
-						'value' => $item->mvalue,
-						'img' => false,
-						'parent' => false,
-						'total_children' => 0,
-						'type' => 'Text'
-					];
-				}
-			}
-		}
-		
-		return $result;
-	}
-
-	/**
-	 * set attributes for text metadata
-	 *
-	 * @param $offset
-	 * @param $number
-	 * @param $response
-	 */
-	private function set_pagination_properties_text_type( $offset, $number, $response ){
-		if( $response && is_array( $response ) ){
-
-			if ( $offset !== '' && $number) {
-				$per_page = (int) $number;
-				//$page = ceil( ( ( (int) $offset ) / $per_page ) + 1 );
-			
-				$this->total_items  = count( $response );
-			
-				$max_pages = ceil( $this->total_items / $per_page );
-			
-				$this->total_pages = (int) $max_pages ;	
-			} else {
-				$this->total_items = count( $response );
-				$this->total_pages = 1;	
-			}
-		} else {
-			$this->total_items = 0;
-			$this->total_pages = 0;
-		}
-	}
-
-	/**
-	 * set attributes for term metadata
-	 *
-	 * @param $args
-	 * @param $response
-	 */
-	private function set_pagination_properties_term_type( $args, $response ){
-
-		if(isset($args['number'], $args['offset'])){
-			$number = $args['number'];
-			//$offset = $args['offset'];
-
-			unset( $args['number'], $args['offset'] );
-			$total_terms = wp_count_terms( $this->taxonomy->get_db_identifier(), $args );
-
-			if ( ! $total_terms ) {
-				$total_terms = 0;
-			}
-
-			$per_page = (int) $number;
-			//$page     = ceil( ( ( (int) $offset ) / $per_page ) + 1 );
-		
-			$this->total_items  = (int) $total_terms ;
-		
-			$max_pages = ceil( $total_terms / $per_page );
-		
-			$this->total_pages = (int) $max_pages ;
-		} else{
-			$this->total_items  = count($response) ;
-			$this->total_pages = 1 ;
-		}
-	}
-
-	/**
-	 * get text metadata selected facets
-	 *
-	 * @param $request
-	 * @param $taxonomy_id
-	 *
-	 * @return array
-	 */
-	private function getTaxonomySelectedValues($request, $taxonomy_id){
-		$selected = [];
-		$restTermClass = new REST_Terms_Controller();
-
-		if( isset($request['current_query']['taxquery']) ){
-
-			foreach( $request['current_query']['taxquery'] as $taxquery ){
-				 
-				if( $taxquery['taxonomy'] === 'tnc_tax_' . $taxonomy_id ){
-					return $taxquery['terms']; 
-				}
-
-			}
-		}
-
-		return [];
-	}
-
-	/**
-	 * get text metadata selected facets
-	 *
-	 * @param $request
-	 * @param $metadatum_id
-	 *
-	 * @return array
-	 */
-	private function getTextSelectedValues($request, $metadatum_id){
-		if( isset($request['current_query']['metaquery']) ){
-
-			foreach( $request['current_query']['metaquery'] as $metaquery ){
-				if( $metaquery['key'] == $metadatum_id ){
-
-					return $metaquery['value'];
-				}
-			}
-
-		}
-
-		return [];
-	}
-
-	/**
-	 * get only selected relationship values
-	 *
-	 * @param $request
-	 * @param $metadatum_id
-	 *
-	 * @return array
-	 */
-	private function getRelationshipSelectedValues($request, $metadatum_id){
-		$selected = [];
-		$restTermClass = new REST_Terms_Controller();
-
-		if( isset($request['current_query']['metaquery']) ){
-
-			foreach( $request['current_query']['metaquery'] as $metaquery ){
-				if( $metaquery['key'] == $metadatum_id ){
-
-					return $metaquery['value'];	
-				}
-			}
-
-		}
-
-		return [];
-	}
-
-	/**
-	 * 
-	 */
-	private function get_terms_ids( $terms ){
-		$ids = [];
-
-		foreach( $terms as $term ){
-            $ids[] = (string) $term->WP_Term->term_id;
-		}
-
-		return $ids;
-	}
-
-	/**
-	 * @param $rows
-	 *
-	 * @return array
-	 */
-	private function get_values( $rows ){
-		$values = [];
-
-		foreach( $rows as $row ){
-            $values[] = $row->mvalue;
-		}
-
-		return $values;
-	}
-
-	/**
-	 * method responsible to return the total of items for the facet value
-	 *
-	 * @param $value
-	 * @param $reference_id
-	 * @param bool $is_taxonomy
-	 * @param $query
-	 * @param $collection_id
-	 *
-	 * @return int total of items found
-	 */
-	private function add_items_count( $value, $reference_id, $is_taxonomy = false, $query, $collection_id){
-		$new_args = $query;
-		$has_value = false;
-
-		if( !$is_taxonomy  ){
-
-			if( isset( $query['metaquery'] ) ){
-				foreach( $query['metaquery'] as $index => $metaquery ){
-					if( $metaquery['key'] == $metadatum_id ){
-						
-						$has_value = true;
-
-						if( is_array($metaquery['value']) )
-							$new_args['metaquery'][$index]['value'][] = $value;	
-						else
-							$new_args['metaquery'][$index]['value'] = $value;
-
-					} 
-				}
-			}
-			
-			if( !$has_value ){
-
-				$new_args['metaquery'][] = [
-					'key' => $reference_id,
-					'value' => $value
-				];
-			}
-
-		} else {
-
-			if( isset( $query['taxquery'] ) ){
-				foreach( $query['taxquery'] as $taxquery ){
-					if( $taxquery['taxonomy'] === 'tnc_tax_' . $reference_id ){
-	
-						$has_value = true;
-						$new_args['taxquery'][$index]['terms'][] = $value;	
-					}
-				}
-			}
-			
-			if( !$has_value ){
-
-				$new_args['taxquery'][] = [
-					'taxonomy' => 'tnc_tax_' . $reference_id,
-					'value' => [$value]
-				];
-			}
-		}
-
-		$items = $this->items_repository->fetch($new_args, $collection_id, 'WP_Query');
-		return $items->found_posts;
-	}
 }
 
 ?>

src/api/endpoints/class-tainacan-rest-importers-controller.php

@@ -88,6 +88,16 @@ class REST_Importers_Controller extends REST_Controller {
             
         ));
 
+        register_rest_route($this->namespace, '/' . $this->rest_base . '/session/(?P<session_id>[0-9a-f]+)/get_mapping/(?P<collection_id>[0-9a-f]+)', array(
+
+            array(
+                'methods'             => \WP_REST_Server::READABLE,
+                'callback'            => array($this, 'get_saved_mapping'),
+                'permission_callback' => array($this, 'import_permissions_check'),
+            ),
+
+        ));
+
         register_rest_route($this->namespace, '/' . $this->rest_base . '/session/(?P<session_id>[0-9a-f]+)', array(
             
             array(
@@ -253,6 +263,26 @@ class REST_Importers_Controller extends REST_Controller {
 
     }
 
+    public function get_saved_mapping( $request ){
+        $session_id = $request['session_id'];
+        $collection_id = $request['collection_id'];
+        $importer = $_SESSION['tainacan_importer'][$session_id];
+        $response = false;
+
+        if(!$importer) {
+            return new \WP_REST_Response([
+                'error_message' => __('Importer Session not found', 'tainacan' ),
+                'session_id' => $session_id
+            ], 400);
+        }
+
+        if ( method_exists($importer, 'get_mapping') ) {
+            $response = $importer->get_mapping($collection_id);
+        }
+
+        return new \WP_REST_Response( $response, 200 );
+    }
+
     public function get_item( $request ) {
         $session_id = $request['session_id'];
         $importer = $_SESSION['tainacan_importer'][$session_id];

src/api/endpoints/class-tainacan-rest-metadata-controller.php

@@ -136,25 +136,6 @@ class REST_Metadata_Controller extends REST_Controller {
 			$number = $request['number'];
 		}
 
-		if($request['fetch'] === 'all_metadatum_values' && $request['search']){
-			if($collection_id) {
-				$results = $this->metadatum_repository->fetch_all_metadatum_values( $collection_id, $metadatum_id, $request['search'], $offset, $number );
-			} else {
-				$results = $this->metadatum_repository->fetch_all_metadatum_values( null, $metadatum_id, $request['search'], $offset, $number);
-			}
-
-			return new \WP_REST_Response($results, 200);
-
-		} elseif($request['fetch'] === 'all_metadatum_values') {
-			if($collection_id) {
-				$results = $this->metadatum_repository->fetch_all_metadatum_values( $collection_id, $metadatum_id, '', $offset, $number);
-			} else {
-				$results = $this->metadatum_repository->fetch_all_metadatum_values( null, $metadatum_id, '', $offset, $number);
-			}
-
-			return new \WP_REST_Response($results, 200);
-		}
-
 		$result = $this->metadatum_repository->fetch($metadatum_id, 'OBJECT');
 
 		return new \WP_REST_Response($this->prepare_item_for_response($result, $request), 200);
@@ -546,11 +527,6 @@ class REST_Metadata_Controller extends REST_Controller {
 	public function get_endpoint_args_for_item_schema( $method = null ) {
 		$endpoint_args = [];
 		if($method === \WP_REST_Server::READABLE) {
-			$endpoint_args['fetch'] = [
-				'type'        => 'string',
-				'description' => __('Fetch all content of a metadata within a collection'),
-				'enum'        => ['all_metadatum_values']
-			];
 			$endpoint_args['context'] = array(
 				'type'    => 'string',
 				'default' => 'view',

src/api/endpoints/class-tainacan-rest-metadata-types-controller.php

@@ -71,7 +71,6 @@ class REST_Metadata_Types_Controller extends REST_Controller {
 		$metadata_type = new $name();
 
 		$metadatum_arr = $metadata_type->_toArray();
-		$metadatum_arr['name'] = $item;
 
 		return $metadatum_arr;
 	}

src/assets/5a2386a7b351ee453ae028ae5c6e95a1.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="12.815px" height="12.815px" viewBox="0 0 12.815 12.815" enable-background="new 0 0 12.815 12.815" xml:space="preserve">
-<g>
-	<circle cx="1.469" cy="1.469" r="1.469"/>
-	<circle cx="6.407" cy="1.469" r="1.469"/>
-	<circle cx="11.346" cy="1.469" r="1.469"/>
-	<circle cx="1.469" cy="6.407" r="1.469"/>
-	<circle cx="6.407" cy="6.407" r="1.469"/>
-	<circle cx="11.346" cy="6.407" r="1.469"/>
-	<circle cx="1.469" cy="11.346" r="1.469"/>
-	<circle cx="6.407" cy="11.346" r="1.469"/>
-	<circle cx="11.346" cy="11.346" r="1.469"/>
-</g>
-</svg>

src/assets/css/fonts/Tainacan Icons.svg

@@ -0,0 +1,288 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata>
+Created by FontForge 20161003 at Wed Nov 14 11:54:32 2018
+ By www-data
+</metadata>
+<defs>
+<font id="TainacanIcons" horiz-adv-x="1000" >
+  <font-face 
+    font-family="Tainacan"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="1000"
+    panose-1="0 0 0 0 0 0 0 0 0 0"
+    ascent="750"
+    descent="-250"
+    bbox="42 -208 958 708"
+    underline-thickness="50"
+    underline-position="-125"
+    unicode-range="U+000D-2421"
+  />
+<missing-glyph horiz-adv-x="500" 
+ />
+    <glyph glyph-name="repository" unicode="repository" 
+d="M917 625h-834v-125h834v125zM833 416v-541h-667v541h667zM625 291h-250v-125h250v125z" />
+    <glyph glyph-name="colection" unicode="collection" 
+d="M500 501h333q35 0 59.5 -24.5t24.5 -59.5v-416q0 -35 -24.5 -59.5t-59.5 -24.5h-666q-35 0 -59.5 24.5t-24.5 59.5l1 500q0 35 24 59t59 24h250z" />
+    <glyph glyph-name="colections" unicode="collections" 
+d="M625 501h208q35 0 59.5 -24t24.5 -59v-250q0 -35 -24.5 -59t-59.5 -24h-499q-35 0 -59.5 24t-24.5 59l1 333q0 35 24 59.5t59 24.5h208zM167 1v417h-84v-418q0 -35 24 -59t59 -24h584v84h-583z" />
+    <glyph glyph-name="items" unicode="items" 
+d="M667 708h-500q-34 0 -58.5 -24t-24.5 -59v-583h83v583h500v83zM625 542l250 -250v-417q0 -34 -24 -58.5t-59 -24.5h-458q-35 0 -59 24.5t-24 58.5v583q0 35 24 59.5t59 24.5h291zM584 250h229l-229 229v-229z" />
+    <glyph glyph-name="metadata" unicode="metadata" 
+d="M230 376q26 0 44 18t18 44t-18 44.5t-44 18.5t-44.5 -18.5t-18.5 -44.5t18.5 -44t44.5 -18zM726 268q24 -24 24 -59t-24 -59l-208 -208q-11 -11 -26.5 -18t-32.5 -7t-32.5 7t-26.5 18l-291 291q-25 25 -25 59v209q0 35 24 59t59 24h209q34 0 58 -24zM565 513l41 41
+l286 -286q25 -23 25 -59q0 -35 -24 -59l-224 -224l-42 42l238 241z" />
+    <glyph glyph-name="taxonomies" unicode="taxonomies" 
+d="M875 -84l-83 84h-292v-167h292zM375 500h-292v167h292l83 -84zM792 125h-292v166h292l83 -83zM250 166v-208h167v-83h-250v541h83v-166h167v-84h-167z" />
+    <glyph glyph-name="terms" unicode="terms" 
+d="M83 392q0 22 8.5 41.5t23 34.5t34.5 23.5t42 8.5h488q52 0 85 -41l129 -141q24 -29 24 -67.5t-24 -67.5l-129 -142q-33 -41 -85 -41h-488q-22 0 -42 8.5t-34.5 23.5t-23 34.5t-8.5 41.5v284z" />
+    <glyph glyph-name="activities" unicode="activities" 
+d="M831 290q0 -32 -5.5 -64t-15.5 -61h-91q12 29 20.5 59.5t8.5 65.5q0 61 -22.5 114t-62 92.5t-92.5 62t-114 22.5t-114 -22.5t-92.5 -62t-62 -92.5t-22.5 -114q0 -54 19 -103.5t52.5 -88t79.5 -64t99 -31.5v-83q-70 8 -131 40t-106 81.5t-70.5 113t-25.5 135.5
+q0 78 29 146t80 119t119 80t146 29t146 -29t119 -80t80 -119t29 -146zM582 -167h-83v83h83v-83zM582 -1h-83v83h83v-83zM914 -167h-249v83h249v-83zM914 -1h-249v83h249v-83zM499 498h-83v-250l112 -83h137l-166 125v208z" />
+    <glyph glyph-name="filters" unicode="filters" 
+d="M583 254v-328q3 -21 -12 -35q-12 -12 -29 -12t-30 12l-83 84q-15 15 -12 35v244h-2l-240 308q-11 13 -8.5 30t16.5 28q11 9 25 9v0h584v0q15 0 25 -9q14 -11 16.5 -28t-8.5 -30l-240 -308h-2z" />
+    <glyph glyph-name="importers" unicode="importers" 
+d="M417 84v124h-332v84h332v124l167 -166zM833 0q0 -34 -24 -58.5t-59 -24.5h-499q-35 0 -59 24.5t-24 58.5v125h83v-125h499v500h-499v-125h-83v125q0 34 24 58.5t59 24.5h499q35 0 59 -24t24 -59v-500z" />
+    <glyph glyph-name="settings" unicode="settings" 
+d="M817 163q12 -9 4 -22l-66 -115q-7 -12 -21 -7l-82 33q-14 -10 -27.5 -18t-29.5 -15l-12 -88q-2 -14 -16 -14h-134q-14 0 -16 14l-13 88q-15 7 -28.5 15t-27.5 18l-83 -33q-5 -2 -11 0t-9 7l-67 115q-7 13 4 22l71 55q-3 15 -3 32t3 32l-70 55q-12 9 -4 22l66 115
+q7 12 21 7l82 -33q14 10 27.5 18t29.5 15l12 88q2 14 16 14h134q14 0 16 -14l13 -88q15 -7 28.5 -15t27.5 -18l83 33q5 2 11 0t9 -7l67 -115q7 -13 -4 -22l-71 -55q3 -15 3 -32q0 -8 -0.5 -16t-1.5 -16zM500 125q26 0 48.5 10t39.5 27t27 39.5t10 48.5t-10 48.5t-27 39.5
+t-39.5 27t-48.5 10t-48.5 -10t-39.5 -27t-27 -39.5t-10 -48.5t10 -48.5t27 -39.5t39.5 -27t48.5 -10z" />
+    <glyph glyph-name="uni21B8" unicode="home" 
+d="M208 -125v333h-125l417 375l417 -375h-125v-333h-209v250h-166v-250h-209z" />
+    <glyph glyph-name="tour" unicode="tour" 
+d="M792 668q35 0 59 -24.5t24 -59.5v-583q0 -35 -24 -59.5t-59 -24.5h-167l-125 -125l-125 125h-167q-35 0 -59 24.5t-24 59.5v583q0 35 24 59.5t59 24.5h584zM542 84h-84v-83h84v83zM628 324q18 18 28.5 42t10.5 52q0 35 -13 65t-36 52.5t-53 35.5t-65 13q-34 0 -64.5 -13
+t-53.5 -35.5t-36 -52.5t-13 -65h84q0 34 24 58.5t59 24.5t59 -24.5t24 -58.5q0 -35 -24 -59l-52 -53q-23 -23 -36 -53t-13 -65v-20h84q0 23 3.5 40t9.5 30.5t15 24.5t20 22z" />
+    <glyph glyph-name="processes" unicode="processes" 
+d="M542 458h-126v-291h-83v291h-125l167 167zM792 42l-167 -167l-167 167h126v291h83v-291h125z" />
+    <glyph glyph-name="help" unicode="help" 
+d="M458 83h84v-83h-84v83zM500 666q86 0 162 -32.5t132.5 -89t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89t162 32.5zM500 -84q69 0 129.5 26.5t106 71.5t71.5 106t26 130
+t-26 129.5t-71.5 105.5t-106 71.5t-129.5 26.5t-129.5 -26.5t-106 -71.5t-71.5 -105.5t-26 -129.5t26 -130t71.5 -106t106 -71.5t129.5 -26.5zM500 500q35 0 65 -13t53 -36t36 -53t13 -65q0 -39 -19.5 -63.5t-43 -45t-43 -42.5t-19.5 -57h-84q0 34 9.5 56.5t23 39t30 28
+t30 23.5t23 26t9.5 35q0 35 -24 59t-59 24t-59 -24t-24 -59h-84q0 35 13 65t36 53t53.5 36t64.5 13z" />
+    <glyph glyph-name="share" unicode="share" 
+d="M750 76q25 0 47.5 -9.5t39 -26t26 -39t9.5 -47.5t-9.5 -47t-26 -38.5t-39 -26t-47.5 -9.5t-47.5 9.5t-39 26t-26 38.5t-9.5 47q0 7 1 14t3 13l-297 174q-17 -16 -38.5 -25t-46.5 -9q-26 0 -48.5 10t-39.5 27t-27 39.5t-10 48.5t10 48.5t27 39.5t39.5 27t48.5 10
+q25 0 46.5 -9t38.5 -25l294 172q-2 7 -3 14t-1 15q0 26 10 48.5t27 39.5t39.5 27t48.5 10t48.5 -10t39.5 -27t27 -39.5t10 -48.5t-10 -48.5t-27 -39.5t-39.5 -27t-48.5 -10q-25 0 -46.5 9t-38.5 24l-294 -171q2 -7 3 -14t1 -15t-1 -15t-3 -14l297 -173q35 32 82 32z" />
+    <glyph glyph-name="export" unicode="export" 
+d="M958 242l-166 166v-124h-292v-84h292v-124zM84 -9v501q0 18 6.5 33t18 26.5t26.5 18t32 6.5h460q35 0 59 -24.5t24 -59.5v-125h-83v125h-460v-501h460v126h83v-126q0 -35 -24 -59.5t-59 -24.5h-460q-35 0 -59 24.5t-24 59.5z" />
+    <glyph glyph-name="url" unicode="url" 
+d="M162 251q0 -27 10 -50.5t28 -41t41.5 -27.5t50.5 -10h166v-79h-166q-43 0 -81.5 16.5t-66.5 44.5t-44.5 66t-16.5 81t16.5 81t44.5 66.5t66.5 45t81.5 16.5h166v-80h-166q-27 0 -50.5 -10t-41.5 -27.5t-28 -41t-10 -50.5zM333 293h334v-84h-334v84zM709 460
+q43 0 81 -16.5t66 -45t44.5 -66.5t16.5 -81t-16.5 -81t-44.5 -66.5t-66 -45t-81 -16.5h-167v80h167q27 0 50.5 10t41 27.5t27.5 41t10 50.5t-10 50.5t-27.5 41t-41 27.5t-50.5 10h-167v80h167z" />
+    <glyph glyph-name="see" unicode="see" 
+d="M625 251q0 -26 -10 -48.5t-27 -39.5t-39.5 -27t-48.5 -10t-48.5 10t-39.5 27t-27 39.5t-10 48.5t10 48.5t27 39.5t39.5 27t48.5 10t48.5 -10t39.5 -27t27 -39.5t10 -48.5zM500 460q-81 0 -139 -24.5t-97 -58t-61 -69t-31 -57.5q9 -22 31 -57.5t61 -69t97 -57.5t139 -24
+t139 24t97 57.5t61 69t31 57.5q-9 22 -31 57.5t-61 69t-97 58t-139 24.5zM500 543q63 0 114 -12.5t92 -33t72.5 -47t55.5 -53.5q55 -64 83 -146q-28 -82 -83 -146q-24 -27 -55.5 -53.5t-72.5 -47t-92 -33t-114 -12.5t-114 12.5t-92 33t-72.5 47t-55.5 53.5q-55 64 -83 146
+q28 82 83 146q24 27 55.5 53.5t72.5 47t92 33t114 12.5v0z" />
+    <glyph glyph-name="search" unicode="search" 
+d="M207 337q0 -42 16 -79.5t44 -65.5t65.5 -44t80.5 -16q42 0 79.5 16t65.5 44t44 65.5t16 79.5q0 43 -16 80.5t-44 65.5t-65.5 44t-79.5 16q-43 0 -80.5 -16t-65.5 -44t-44 -65.5t-16 -80.5zM125 337q0 60 22.5 112.5t61.5 91.5t91.5 61.5t112.5 22.5t112.5 -22.5
+t91.5 -61.5t61.5 -91.5t22.5 -112.5q0 -38 -9 -72t-26 -65l209 -209q-3 -31 -17 -56q-11 -21 -34.5 -39.5t-64.5 -20.5l-209 209q-31 -17 -65 -26t-72 -9q-60 0 -112.5 22.5t-91.5 61.5t-61.5 91.5t-22.5 112.5z" />
+    <glyph glyph-name="edit" unicode="edit" 
+d="M595 519l174 -174l-512 -512h-174v174zM819 395l-174 174l85 84q14 14 32.5 14t32.5 -14l108 -108q14 -14 14 -32.5t-14 -32.5z" />
+    <glyph glyph-name="uni2421" unicode="delete" 
+d="M250 458h500v-500q0 -35 -24 -59t-59 -24h-334q-34 0 -58.5 24t-24.5 59v500zM792 500h-584v83h146l42 42h208l42 -42h146v-83z" />
+    <glyph glyph-name="deleteforever" unicode="deleteforever" 
+d="M250 458h500v-500q0 -35 -24 -59t-59 -24h-334q-34 0 -58.5 24t-24.5 59v500zM458 167l-104 -105l42 -41l104 104l104 -104l42 42l-104 104l104 104l-42 42l-104 -105l-104 105l-42 -42zM792 583v-83h-584v83h146l42 42h208l42 -42h146z" />
+    <glyph glyph-name="undo" unicode="undo" 
+d="M417 375q109 -16 188.5 -60t134 -106.5t87 -138t48.5 -153.5q-78 110 -189.5 161t-268.5 51v-171l-292 292l292 292v-167z" />
+    <glyph glyph-name="add" unicode="add" 
+d="M500 666q86 0 162 -33t132.5 -89.5t89.5 -132t33 -161.5t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89 132.5t-32.5 162t32.5 161.5t89 132t132.5 89.5t162 33zM750 312h-188v187h-124v-187h-188v-125h188v-187h124v187h188v125z" />
+    <glyph glyph-name="public" unicode="public" 
+d="M746 25q41 45 64.5 102t23.5 123q0 53 -15.5 100.5t-43 88t-66 71.5t-84.5 49v-17q0 -35 -24 -59t-59 -24h-84v-84q0 -17 -12 -29.5t-29 -12.5h-84v-83h250q17 0 29.5 -12.5t12.5 -29.5v-125h42q28 0 49.5 -16t29.5 -42zM458 0q-35 0 -59 24t-24 59v42l-200 200
+q-4 -18 -6.5 -36.5t-2.5 -38.5q0 -64 22.5 -120.5t62 -101t93 -73t114.5 -36.5v81zM500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33z
+" />
+    <glyph glyph-name="private" unicode="private" 
+d="M750 416q35 0 59 -24t24 -59v-417q0 -35 -24 -59t-59 -24h-500q-35 0 -59 24.5t-24 58.5v417q0 35 24 59t59 24h42v84q0 43 16.5 81t44.5 66t66 44.5t81 16.5t81 -16.5t66 -44.5t44.5 -66t16.5 -81v-84h42zM500 41q35 0 59 24.5t24 59.5t-24 59t-59 24t-59 -24t-24 -59
+t24 -59.5t59 -24.5zM625 500q0 27 -9.5 49.5t-26.5 39.5t-39.5 26.5t-49.5 9.5t-49.5 -9.5t-39.5 -26.5t-26.5 -39.5t-9.5 -49.5v-84h250v84z" />
+    <glyph glyph-name="draft" unicode="draft" 
+d="M709 417h-417v-84h417v84zM709 250h-417v-83h417v83zM583 83h-291v-83h291v83zM500 584q-17 0 -29.5 -12.5t-12.5 -29.5t12.5 -29.5t29.5 -12.5t29.5 12.5t12.5 29.5t-12.5 29.5t-29.5 12.5zM792 584q35 0 59 -24.5t24 -59.5v-584q0 -35 -24 -59t-59 -24h-584
+q-35 0 -59 24t-24 59v584q0 35 24 59.5t59 24.5h174q14 36 45.5 59.5t72.5 23.5t72.5 -23.5t45.5 -59.5h174z" />
+    <glyph glyph-name="download" unicode="download" 
+d="M208 1h584v-84h-584v84zM500 84l-292 292h167v250h250v-250h167z" />
+    <glyph glyph-name="upload" unicode="upload" 
+d="M792 500h-584v84h584v-84zM500 417l292 -292h-167v-250h-250v250h-167z" />
+    <glyph glyph-name="playfill" unicode="playfill" 
+d="M500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM667 250l-250 188v-376z" />
+    <glyph glyph-name="play" unicode="play" 
+d="M417 438l250 -188l-250 -188v376zM500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM500 -84q68 0 129 26.5t106.5 72t72 106.5
+t26.5 129t-26.5 129t-72 106.5t-106.5 72t-129 26.5t-129 -26.5t-106.5 -72t-72 -106.5t-26.5 -129t26.5 -129t72 -106.5t106.5 -72t129 -26.5z" />
+    <glyph glyph-name="pause" unicode="pause" 
+d="M375 423l84 -1l-2 -336l-84 1zM502 674q87 0 163.5 -33.5t133 -91t89 -134t32.5 -163.5t-33.5 -163.5t-91 -133t-134 -89t-163.5 -32.5t-163.5 33.5t-133 91t-89 134t-32.5 163.5t33.5 163.5t91 133t134 89t163.5 32.5zM498 -82q70 0 131.5 26t107 71.5t72.5 106.5
+t27 130q0 70 -26 131.5t-71.5 107t-106.5 72.5t-130 27q-70 0 -131.5 -26t-107 -71.5t-72.5 -106.5t-27 -130q0 -70 26 -131.5t71.5 -107t106.5 -72.5t130 -27zM543 422l84 -1l-2 -336l-84 1z" />
+    <glyph glyph-name="uni2418" unicode="cancel" 
+d="M667 357l-108 -108l108 -108l-59 -59l-108 108l-108 -108l-59 59l108 108l-108 108l59 59l108 -108l108 108zM500 665q87 0 163 -32.5t132.5 -89t89 -132.5t32.5 -162t-32.5 -162t-89 -132.5t-132.5 -89t-163 -32.5t-163 32.5t-132.5 89t-89 132.5t-32.5 162t32.5 162
+t89 132.5t132.5 89t163 32.5zM500 -84q69 0 130 26t106 71.5t71.5 106t26.5 129.5t-26.5 129.5t-71.5 106t-106 71.5t-130 26t-130 -26t-106 -71.5t-71.5 -106t-26.5 -129.5t26.5 -129.5t71.5 -106t106 -71.5t130 -26z" />
+    <glyph glyph-name="finish" unicode="finish" 
+d="M750 375l-333 -333l-209 208l59 59l150 -149l274 274zM500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM500 -84q69 0 130 26.5
+t106 71.5t71.5 106t26.5 130t-26.5 130t-71.5 106t-106 71.5t-130 26.5t-130 -26.5t-106 -71.5t-71.5 -106t-26.5 -130t26.5 -130t71.5 -106t106 -71.5t130 -26.5z" />
+    <glyph glyph-name="processerror" unicode="processerror" 
+d="M125 250q0 58 19 110.5t52 95t79 72.5t100 44v-87q-36 -13 -67 -36t-53 -53.5t-34.5 -67.5t-12.5 -78q0 -52 20 -97t54 -80l93 94v-250h-250l98 98q-45 45 -71.5 105.5t-26.5 129.5zM458 125h84v-83h-84v83zM777 485q45 -45 71.5 -105.5t26.5 -129.5q0 -58 -19 -110.5
+t-52 -95t-79 -72.5t-100 -44v87q36 13 67 36t53 53.5t34.5 67.5t12.5 78q0 52 -20 97t-54 80l-93 -94v250h250zM458 458h84v-250h-84v250z" />
+    <glyph glyph-name="updating" unicode="updating" 
+d="M958 250h-125q0 -69 -26 -129.5t-71.5 -106t-106 -71.5t-129.5 -26q-49 0 -94 13.5t-83 38.5l60 60q26 -14 55.5 -21.5t61.5 -7.5q52 0 97.5 19.5t79.5 53.5t53.5 79.5t19.5 97.5h-125l166 167zM375 250l-166 -167l-167 167h125q0 69 26 129.5t71.5 106t106 71.5
+t129.5 26q49 0 94 -13.5t83 -38.5l-60 -60q-26 14 -55.5 21.5t-61.5 7.5q-52 0 -97.5 -19.5t-79.5 -53.5t-53.5 -79.5t-19.5 -97.5h125z" />
+    <glyph glyph-name="approvedcircle" unicode="approvedcircle" 
+d="M501 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM793 417l-59 59l-316 -316l-150 149l-59 -59l209 -208z" />
+    <glyph glyph-name="approved" unicode="approved" 
+d="M817 516l58 -59l-498 -498l-232 232l59 59l173 -174z" />
+    <glyph glyph-name="alertcircle" unicode="alertcircle" 
+d="M500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM542 125h-84v-83h84v83zM542 459h-84v-251h84v251z" />
+    <glyph glyph-name="alert" unicode="alert" 
+d="M542 0h-84v84h84v-84zM542 500v-334h-84v334h84z" />
+    <glyph glyph-name="repprovedcircle" unicode="repprovedcircle" 
+d="M500 667q87 0 163 -32.5t132.5 -89t89 -132.5t32.5 -163t-32.5 -163t-89 -132.5t-132.5 -89t-163 -32.5t-163 32.5t-132.5 89t-89 132.5t-32.5 163t32.5 163t89 132.5t132.5 89t163 32.5zM559 250l150 150l-59 59l-150 -150l-150 150l-59 -59l150 -150l-150 -150l59 -59
+l150 150l150 -150l59 59z" />
+    <glyph glyph-name="repproved" unicode="repproved" 
+d="M559 251l233 -233l-59 -59l-233 233l-233 -233l-59 59l233 233l-233 233l59 59l233 -233l233 233l59 -59z" />
+    <glyph glyph-name="arrowleft" unicode="arrowleft" 
+d="M584 42l-209 209l209 209v-418z" />
+    <glyph glyph-name="arrowright" unicode="arrowright" 
+d="M417 460l208 -209l-208 -209v418z" />
+    <glyph glyph-name="arrowup" unicode="arrowup" 
+d="M291 167l209 208l208 -208h-417z" />
+    <glyph glyph-name="arrowdown" unicode="arrowdown" 
+d="M709 334l-209 -209l-209 209h418z" />
+    <glyph glyph-name="next" unicode="next" 
+d="M379 -5l255 256l-255 256l78 78l334 -334l-334 -334z" />
+    <glyph glyph-name="previous" unicode="previous" 
+d="M625 507l-255 -256l255 -256l-78 -78l-334 334l334 334z" />
+    <glyph glyph-name="pointer" unicode="pointer" 
+d="M125 334h458v209l292 -292l-292 -292v209h-458v166z" />
+    <glyph glyph-name="uni202C" unicode="pdf" 
+d="M542 375h229l-229 229v-229zM250 667h333l251 -250v-501q0 -35 -24.5 -59t-59.5 -24h-500q-35 0 -59.5 24.5t-24.5 58.5v668q0 35 24.5 59t59.5 24zM455 232q26 -58 64 -90l17 -13q-27 -5 -63 -14.5t-76 -24.5v0l-5 -2l21 44q29 55 42 100zM726 73q5 5 7.5 12t3.5 15
+q1 13 -5 23q-17 29 -95 29l-54 -3l-36 24q-20 17 -37 44.5t-30 62.5l2 6q5 21 9.5 43t5.5 42t-2 37.5t-14 27.5q-9 10 -25 10h-10q-12 0 -21 -10t-12 -22q-6 -21 -7 -38t0.5 -32.5t5.5 -31t10 -34.5v-1q-8 -28 -18.5 -59t-26.5 -63l-40 -75l-37 -21q-38 -23 -56.5 -47
+t-22.5 -41q-1 -12 3 -22l1 -3l20 -13l18 -4q26 0 55.5 31t68.5 97l7 3q32 11 73.5 18t95.5 13q32 -16 66.5 -23.5t58.5 -7.5q25 0 38 13zM709 102l3 -4q0 -5 -4 -6h-1h-8q-14 0 -35 5t-44 16q3 4 9 4q44 0 60 -5.5t20 -9.5zM326 42q-20 -38 -38 -58.5t-32 -25.5
+q2 12 14.5 31t35.5 40zM452 330q-8 28 -8 50t5 35l3 5l6 -2q10 -14 4 -46l-1 -6l-7 -35z" />
+    <glyph glyph-name="text" unicode="text" 
+d="M625 42h-500v83h500v-83zM625 375h-500v83h500v-83zM125 292h750v-84h-750v84zM125 -42h750v-83h-750v83zM875 625v-83h-750v83h750z" />
+    <glyph glyph-name="audio" unicode="audio" 
+d="M293 370l208 208v-666l-208 208h-166v250h166zM688 245q0 -56 -28.5 -100t-75.5 -67v335q47 -23 75.5 -67.5t28.5 -100.5zM584 610q63 -14 116 -48t92 -82t61 -108t22 -127t-22 -127t-61 -108t-92 -82t-116 -48v86q45 13 83 40t66 63.5t43.5 81.5t15.5 94
+q0 50 -15.5 94.5t-43.5 81t-66 63.5t-83 40v86z" />
+    <glyph glyph-name="uni22B7" unicode="image" 
+d="M875 -42q0 -35 -24.5 -59t-58.5 -24h-584q-34 0 -58.5 24.5t-24.5 58.5v584q0 35 24.5 59t58.5 24h584q35 0 59 -24.5t24 -58.5v-584zM208 0h584l-188 250l-146 -188l-104 126z" />
+    <glyph glyph-name="gallery" unicode="gallery" 
+d="M917 83q0 -35 -24.5 -59t-58.5 -24h-501q-35 0 -59 24t-24 59v501q0 34 24 58.5t59 24.5h501q34 0 58.5 -24.5t24.5 -58.5v-501zM333 83h501l-167 209l-124 -155l-85 113zM166 500v-584h584v-83h-584q-34 0 -58.5 24.5t-24.5 58.5v584h83z" />
+    <glyph glyph-name="user" unicode="user" 
+d="M500 185q30 0 67.5 -5t77 -14.5t77 -24.5t67 -34.5t47.5 -44.5t18 -54v-133h-708v133q0 30 18 54.5t47.5 44t67 34.5t77 24.5t77 14.5t67.5 5zM500 583q37 0 69 -14t56 -38t38 -56t14 -69t-14 -69t-38 -56t-56 -38t-69 -14t-69 14t-56 38t-38 56t-14 69t14 69t38 56
+t56 38t69 14zM500 101q-50 0 -98.5 -10.5t-86.5 -25.5t-61.5 -30.5t-23.5 -26.5v-49h540v49q0 11 -24 26.5t-62 30.5t-86.5 25.5t-97.5 10.5zM500 499q-19 0 -36 -7.5t-29.5 -20t-20 -29.5t-7.5 -36v0q0 -19 7.5 -36t20 -29.5t29.5 -20t36 -7.5v0q19 0 36 7.5t29.5 20
+t20 29.5t7.5 36v0q0 19 -7.5 36t-20 29.5t-29.5 20t-36 7.5v0z" />
+    <glyph glyph-name="notifications" unicode="notifications" 
+d="M500 -167q-35 0 -59 24.5t-24 58.5h166q0 -34 -24 -58.5t-59 -24.5zM833 0v-42h-666v42l83 83v208q0 48 12.5 91t36.5 78t59 59.5t80 34.5v28q0 26 18 44.5t44 18.5t44 -18.5t18 -44.5v-28q45 -10 80 -34.5t59 -59.5t36.5 -78t12.5 -91v-208zM667 291q0 39 -11.5 73
+t-33 59.5t-52.5 40t-70 14.5t-70 -14.5t-52 -40t-32.5 -59.5t-11.5 -73v-250h333v250z" />
+    <glyph glyph-name="more" unicode="more" 
+d="M792 209h-250v-250h-84v250h-250v84h250v250h84v-250h250v-84z" />
+    <glyph glyph-name="menu" unicode="menu" 
+d="M125 83h750v-83h-750v83zM125 292h750v-84h-750v84zM875 500v-83h-750v83h750z" />
+    <glyph glyph-name="heartfill" unicode="heartfill" 
+d="M500 -140l-60 55q-81 73 -146.5 135.5t-112.5 119.5t-72.5 112t-25.5 114q0 48 18 90t49 73t73 48.5t90 17.5q54 0 103.5 -23.5t83.5 -63.5q34 40 83.5 63.5t104.5 23.5q48 0 90 -17.5t72.5 -48.5t48.5 -73t18 -90q0 -59 -25.5 -114t-72.5 -112t-112.5 -119.5
+t-146.5 -135.5z" />
+    <glyph glyph-name="uni22C6" unicode="star" 
+d="M243 -125l67 293l-227 197l300 26l117 276l117 -276l300 -26l-228 -197l69 -293l-258 155z" />
+    <glyph glyph-name="viewtable" unicode="viewtable" 
+d="M249 501h-125v-125h125v125zM916 376h-583v125h583v-125zM249 167h-125v126h125v-126zM916 167h-583v126h583v-126zM249 -41h-125v125h125v-125zM916 -41h-583v125h583v-125z" />
+    <glyph glyph-name="viewcards" unicode="viewcards" 
+d="M334 625h-208v-333h208v333zM625 292h-208v333h208v-333zM917 292h-208v333h208v-333zM334 -125h-208v333h208v-333zM625 -125h-208v333h208v-333zM917 -125h-208v333h208v-333z" />
+    <glyph glyph-name="viewminiature" unicode="viewminiature" 
+d="M167 583h167v-166h-167v166zM417 84h166v-167h-166v167zM167 84h167v-167h-167v167zM167 333h167v-166h-167v166zM417 333h166v-166h-166v166zM833 583v-166h-166v166h166zM417 583h166v-166h-166v166zM667 333h166v-166h-166v166zM667 84h166v-167h-166v167z" />
+    <glyph glyph-name="viewmasonry" unicode="viewmasonry" 
+d="M459 666h-375v-499h375v499zM917 -167h-375v500h375v-500zM459 -167h-375v250h375v-250zM917 416h-375v250h375v-250z" />
+    <glyph glyph-name="viewgallery" unicode="viewgallery" 
+d="M917 418h-167v-334h167v334zM250 84h-167v334h167v-334zM667 -41h-334v584h334v-584z" />
+    <glyph glyph-name="sortasc" unicode="sortasc" 
+d="M667 417h-166v83h166v-83zM792 167h-291v83h291v-83zM917 -83h-416v84h416v-84zM251 625l-166 -167h125v-541h83v541h125z" />
+    <glyph glyph-name="sortdesc" unicode="sortdesc" 
+d="M667 416h-167v84h167v-84zM792 166h-292v84h292v-84zM917 -84h-417v83h417v-83zM292 -1v542h-84v-542h-125l167 -166l167 166h-125z" />
+    <glyph glyph-name="viewrecords" unicode="viewrecords" 
+d="M333 543h-208v-584h208v584zM625 -41h-208v584h208v-584zM917 -41h-208v584h208v-584z" />
+    <glyph glyph-name="close" unicode="close" 
+d="M559 251l233 -233l-59 -59l-233 233l-233 -233l-59 59l233 233l-233 233l59 59l233 -233l233 233l59 -59z" />
+    <glyph glyph-name="heartoutline" unicode="heartoutline" 
+d="M504 -23q75 68 135.5 124.5t103.5 107t66.5 96.5t23.5 91q0 31 -11 58t-30.5 46.5t-46 30.5t-57.5 11q-24 0 -47.5 -7.5t-43 -20.5t-35 -31.5t-23.5 -39.5h-78q-8 21 -23.5 39.5t-35 31.5t-42.5 20.5t-47 7.5q-31 0 -58 -11t-46.5 -30.5t-30.5 -46.5t-11 -58
+q0 -45 23.5 -91t66.5 -96.5t103.5 -107t134.5 -124.5l5 -4zM688 625q48 0 90 -17.5t72.5 -48.5t48.5 -73t18 -90q0 -59 -25.5 -114t-72.5 -112t-112.5 -119.5t-146.5 -135.5l-60 -55l-60 55q-81 73 -146.5 135.5t-112.5 119.5t-72.5 112t-25.5 114q0 48 18 90t49 73t73 48.5
+t90 17.5q54 0 103.5 -23.5t83.5 -63.5q34 40 83.5 63.5t104.5 23.5z" />
+    <glyph glyph-name="wordpress" unicode="wordpress" 
+d="M500 669q-86 0 -162 -33t-132.5 -89t-89.5 -131.5t-33 -161.5t32.5 -162t89 -133t131.5 -90t160 -34q87 -1 163 31.5t133 89t90.5 132.5t34.5 161t-31 161t-88 133.5t-132.5 91.5t-165.5 34zM898 251q0 -82 -32 -154.5t-86.5 -126.5t-127.5 -85.5t-156 -30.5
+q-81 1 -153 32.5t-126 86.5t-84.5 128t-29.5 157q1 81 33 153t86.5 125.5t127.5 84t156 29.5q82 -1 153.5 -33.5t124.5 -86.5t83.5 -126t30.5 -153zM682 45q-1 -2 -1.5 -4t-2.5 -5q-32 97 -64.5 192t-64.5 191q11 1 20.5 2t18.5 2q16 2 16 15q-2 15 -18 14l-42 -2t-42 -1
+q-21 -1 -42 0t-41 2q-5 0 -10.5 0.5t-10.5 0.5q-13 0 -15 -14q0 -13 14 -15q8 -1 15.5 -1.5t15.5 -1.5q6 0 8 -6q13 -35 26 -71l26 -72q2 -4 0 -8q-19 -57 -37.5 -113t-37.5 -113q0 -1 -0.5 -1.5t-1.5 -2.5q-33 97 -65.5 193t-64.5 193q10 1 19.5 2t18.5 2q18 2 16 16
+q0 15 -17 13q-22 -1 -43.5 -2t-43.5 -2h-30q44 63 101 102t131 53q88 16 164 -6t145 -81q-43 0 -60 -38q-12 -28 1 -56q10 -23 26 -47q15 -25 24 -51.5t8 -55.5q0 -20 -5 -40t-11 -40q-11 -35 -21.5 -71t-21.5 -72zM505 218h2q28 -76 55.5 -151.5t55.5 -152.5
+q-109 -36 -219 -5q27 78 53.5 154.5t52.5 154.5zM166 123q-50 136 7 275q44 -118 86 -233.5t85 -232.5q-21 5 -47.5 24t-51.5 46t-46 58.5t-33 62.5zM847 167q-36 -145 -166 -222q5 14 9.5 28t9.5 28q22 64 43.5 127.5t44.5 127.5q8 23 16 46.5t10 48.5q2 17 2 34t1 34
+q63 -122 30 -252z" />
+    <glyph glyph-name="drag" unicode="drag" 
+d="M292 543q0 35 -24 59t-59 24q-18 0 -33 -6.5t-26.5 -17.5t-18 -26.5t-6.5 -32.5q0 -35 24.5 -59.5t59.5 -24.5q17 0 32.5 6.5t26.5 18t17.5 26.5t6.5 33zM500 626q35 0 59 -24t24 -59q0 -18 -6.5 -33t-17.5 -26.5t-26.5 -18t-32.5 -6.5q-35 0 -59.5 24.5t-24.5 59.5
+q0 17 6.5 32.5t18 26.5t26.5 17.5t33 6.5zM792 626q35 0 59 -24t24 -59q0 -18 -6.5 -33t-17.5 -26.5t-26.5 -18t-32.5 -6.5q-35 0 -59.5 24.5t-24.5 59.5q0 17 6.5 32.5t18 26.5t26.5 17.5t33 6.5zM209 335q35 0 59 -24.5t24 -59.5t-24 -59t-59 -24q-18 0 -33 6.5t-26.5 18
+t-18 26.5t-6.5 32t6.5 32.5t18 27t26.5 18t33 6.5zM500 335q35 0 59 -24.5t24 -59.5t-24 -59t-59 -24q-18 0 -33 6.5t-26.5 18t-18 26.5t-6.5 32t6.5 32.5t18 27t26.5 18t33 6.5zM792 335q35 0 59 -24.5t24 -59.5t-24 -59t-59 -24q-18 0 -33 6.5t-26.5 18t-18 26.5t-6.5 32
+t6.5 32.5t18 27t26.5 18t33 6.5zM209 42q17 0 32.5 -6.5t26.5 -18t17.5 -26.5t6.5 -33q0 -35 -24 -59t-59 -24q-18 0 -33 6.5t-26.5 17.5t-18 26.5t-6.5 32.5q0 35 24.5 59.5t59.5 24.5zM500 42q17 0 32.5 -6.5t26.5 -18t17.5 -26.5t6.5 -33q0 -35 -24 -59t-59 -24
+q-18 0 -33 6.5t-26.5 17.5t-18 26.5t-6.5 32.5q0 35 24.5 59.5t59.5 24.5zM792 42q17 0 32.5 -6.5t26.5 -18t17.5 -26.5t6.5 -33q0 -35 -24 -59t-59 -24q-18 0 -33 6.5t-26.5 17.5t-18 26.5t-6.5 32.5q0 35 24.5 59.5t59.5 24.5z" />
+    <glyph glyph-name="addcollection" unicode="addcollection" 
+d="M620 -22q-8 27 -10 60h-467v418h-60v-418q0 -25 17.5 -42.5t42.5 -17.5h477zM740 516q25 0 42.5 -17.5t17.5 -42.5v-227q-31 0 -60 -10t-52.5 -27.5t-41 -41.5t-26.5 -53h-358q-25 0 -42 17.5t-17 42.5v359q0 25 17 42t42 17h180l59 -59h239zM917 39q0 24 -9 45.5
+t-25 37.5t-37.5 25t-45.5 9t-45.5 -9t-37 -25t-25 -37.5t-9.5 -45.5t9.5 -45.5t25 -37t37 -25t45.5 -9.5t45.5 9.5t37.5 25t25 37t9 45.5zM870 22h-52v-53h-35v53h-53v35h53v52h35v-52h52v-35z" />
+    <glyph glyph-name="stop" unicode="stop" 
+d="M500 667q86 0 162 -33t132.5 -89.5t89.5 -132.5t33 -162t-33 -162t-89.5 -132.5t-132.5 -89.5t-162 -33t-162 33t-132.5 89.5t-89.5 132.5t-33 162t33 162t89.5 132.5t132.5 89.5t162 33zM500 -83q69 0 129.5 26t106 71.5t71.5 106t26 129.5t-26 129.5t-71.5 106
+t-106 71.5t-129.5 26t-129.5 -26t-106 -71.5t-71.5 -106t-26 -129.5t26 -129.5t71.5 -106t106 -71.5t129.5 -26zM667 417h-334v-334h334v334z" />
+    <glyph glyph-name="embed" unicode="embed" 
+d="M392 58l-192 192l192 192l-59 58l-250 -250l250 -250zM608 58l192 192l-192 192l59 58l250 -250l-250 -250z" />
+    <glyph glyph-name="nextlevel" unicode="nextlevel" 
+d="M793 125l-250 -250l-59 59l149 149h-465v499h84v-416h381l-149 149l59 59z" />
+    <glyph glyph-name="showmore" unicode="showmore" 
+d="M243 371l256 -255l256 255l78 -78l-334 -334l-334 334z" />
+    <glyph glyph-name="pausefill" unicode="pausefill" 
+d="M908 353q12 -48 12 -100q0 -87 -33 -163.5t-90 -133.5t-133.5 -90t-163.5 -33t-163.5 33t-133.5 90t-90 133.5t-33 163.5q0 52 12 98v3q17 69 55.5 127t92.5 101t121 66.5t141 23.5q73 0 139 -24t119.5 -66t91.5 -99.5t55 -125.5q0 -1 0.5 -2t0.5 -2zM627 419l-84 1
+l-2 -336l84 -1zM459 420l-84 1l-2 -336l84 -1z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="500" 
+ />
+    <glyph glyph-name="uni0000" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="uni0000" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="uni000D" unicode="&#xd;" horiz-adv-x="250" 
+ />
+    <glyph glyph-name="space" unicode=" " horiz-adv-x="250" 
+ />
+    <glyph glyph-name="r" unicode="r" horiz-adv-x="308" 
+ />
+    <glyph glyph-name="e" unicode="e" horiz-adv-x="512" 
+ />
+    <glyph glyph-name="p" unicode="p" horiz-adv-x="549" 
+ />
+    <glyph glyph-name="o" unicode="o" horiz-adv-x="531" 
+ />
+    <glyph glyph-name="s" unicode="s" horiz-adv-x="465" 
+ />
+    <glyph glyph-name="i" unicode="i" horiz-adv-x="204" 
+ />
+    <glyph glyph-name="t" unicode="t" horiz-adv-x="301" 
+ />
+    <glyph glyph-name="y" unicode="y" horiz-adv-x="486" 
+ />
+    <glyph glyph-name="c" unicode="c" horiz-adv-x="501" 
+ />
+    <glyph glyph-name="l" unicode="l" horiz-adv-x="204" 
+ />
+    <glyph glyph-name="n" unicode="n" horiz-adv-x="527" 
+ />
+    <glyph glyph-name="question" unicode="?" 
+d="M460 81h81v-81h-81v81zM514 540q54 -2 92 -28t55 -64t11.5 -83t-37.5 -86q-17 -20 -39.5 -35t-36.5 -32t-16 -37t-2 -40h-81q0 34 2 62t16 48t36.5 33.5t39.5 27.5q25 23 34 48.5t4 48t-25 38t-53 18.5q-34 0 -57.5 -23.5t-23.5 -57.5h-81q0 34 12.5 63.5t34.5 51.5
+t51.5 34.5t63.5 12.5z" />
+    <glyph glyph-name="video" 
+d="M875 479v-458l-167 166v-145q0 -17 -12 -29.5t-29 -12.5h-500q-17 0 -29.5 12.5t-12.5 29.5v416q0 17 12.5 29.5t29.5 12.5h500q17 0 29 -12.5t12 -29.5v-145z" />
+    <glyph glyph-name="m" unicode="m" horiz-adv-x="803" 
+ />
+    <glyph glyph-name="a" unicode="a" horiz-adv-x="502" 
+ />
+    <glyph glyph-name="d" unicode="d" horiz-adv-x="554" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="469" 
+ />
+    <glyph glyph-name="v" unicode="v" horiz-adv-x="483" 
+ />
+    <glyph glyph-name="f" unicode="f" horiz-adv-x="304" 
+ />
+    <glyph glyph-name="w" unicode="w" horiz-adv-x="715" 
+ />
+    <glyph glyph-name="u" unicode="u" horiz-adv-x="527" 
+ />
+    <glyph glyph-name="g" unicode="g" horiz-adv-x="549" 
+ />
+    <glyph glyph-name="h" unicode="h" horiz-adv-x="539" 
+ />
+    <glyph glyph-name="b" unicode="b" horiz-adv-x="554" 
+ />
+  </font>
+</defs></svg>

src/assets/css/fonts/tainacanicons.css

@@ -0,0 +1,510 @@
+@font-face {
+    font-family: "Tainacan Icons";
+    src: url("../fonts/Tainacan Icons.eot");
+    src: url("../fonts/Tainacan Icons.eot#iefix") format("embedded-opentype"), 
+            url("../fonts/Tainacan Icons.woff2") format("woff2"), 
+            url("../fonts/Tainacan Icons.otf") format("otf"), 
+            url("../fonts/Tainacan Icons.woff") format("woff"), 
+            url("../fonts/Tainacan Icons.ttf") format("truetype"), 
+            url("../fonts/Tainacan Icons.svg") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+}
+
+.tainacan-icon:before,
+.tainacan-icon-set {
+    display: inline-block;
+    font: normal normal normal 20px/1 "Tainacan Icons";
+    font-size: inherit;
+    text-rendering: auto;
+    vertical-align: middle;
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.tainacan-icon-pdf:before {
+    content: "pdf";
+}
+.tainacan-icon-arrowleft:before {
+    content: "arrowleft";
+}
+.tainacan-icon-arrowup:before {
+    content: "arrowup";
+}
+.tainacan-icon-arrowright:before {
+    content: "arrowright";
+}
+.tainacan-icon-arrowdown:before {
+    content: "arrowdown";
+}
+.tainacan-icon-home:before {
+    content: "home";
+}
+.tainacan-icon-image:before {
+    content: "image";
+}
+.tainacan-icon-star:before {
+    content: "star";
+}
+.tainacan-icon-cancel:before {
+    content: "cancel";
+}
+.tainacan-icon-heartfill:before {
+    content: "heartfill";
+}
+.tainacan-icon-heartoutline:before {
+    content: "heartoutline";
+}
+.tainacan-icon-wordpress:before {
+    content: "wordpress";
+}
+.tainacan-icon-activities:before {
+    content: "activities";
+}
+.tainacan-icon-add:before {
+    content: "add";
+}
+.tainacan-icon-addcollection:before {
+    content: "addcollection";
+}
+.tainacan-icon-alert:before {
+    content: "alert";
+}
+.tainacan-icon-alertcircle:before {
+    content: "alertcircle";
+}
+.tainacan-icon-approved:before {
+    content: "approved";
+}
+.tainacan-icon-approvedcircle:before {
+    content: "approvedcircle";
+}
+.tainacan-icon-audio:before {
+    content: "audio";
+}
+.tainacan-icon-close:before {
+    content: "close";
+}
+.tainacan-icon-collection:before {
+    content: "collection";
+}
+.tainacan-icon-collections:before {
+    content: "collections";
+}
+.tainacan-icon-delete:before {
+    content: "delete";
+}
+.tainacan-icon-deleteforever:before {
+    content: "deleteforever";
+}
+.tainacan-icon-download:before {
+    content: "download";
+}
+.tainacan-icon-download:before {
+    content: "download";
+}
+.tainacan-icon-draft:before {
+    content: "draft";
+}
+.tainacan-icon-edit:before {
+    content: "edit";
+}
+.tainacan-icon-export:before {
+    content: "export";
+}
+.tainacan-icon-filters:before {
+    content: "filters";
+}
+.tainacan-icon-finish:before {
+    content: "finish";
+}
+.tainacan-icon-gallery:before {
+    content: "gallery";
+}
+.tainacan-icon-help:before {
+    content: "help";
+}
+.tainacan-icon-importers:before {
+    content: "importers";
+}
+.tainacan-icon-items:before {
+    content: "items";
+}
+.tainacan-icon-menu:before {
+    content: "menu";
+}
+.tainacan-icon-metadata:before {
+    content: "metadata";
+}
+.tainacan-icon-more:before {
+    content: "more";
+}
+.tainacan-icon-showmore:before {
+    content: "showmore";
+}
+.tainacan-icon-next:before {
+    content: "next";
+}
+.tainacan-icon-drag:before {
+    content: "drag";
+}
+.tainacan-icon-notifications:before {
+    content: "notifications";
+}
+.tainacan-icon-nextlevel:before {
+    content: "nextlevel";
+}
+.tainacan-icon-pause:before {
+    content: "pause";
+}
+.tainacan-icon-play:before {
+    content: "play";
+}
+.tainacan-icon-stop:before {
+    content: "stop";
+}
+.tainacan-icon-pausefill:before {
+    content: "pausefill";
+}
+.tainacan-icon-playfill:before {
+    content: "playfill";
+}
+.tainacan-icon-pointer:before {
+    content: "pointer";
+}
+.tainacan-icon-previous:before {
+    content: "previous";
+}
+.tainacan-icon-private:before {
+    content: "private";
+}
+.tainacan-icon-processerror:before {
+    content: "processerror";
+}
+.tainacan-icon-processes:before {
+    content: "processes";
+}
+.tainacan-icon-public:before {
+    content: "public";
+}
+.tainacan-icon-repository:before {
+    content: "repository";
+}
+.tainacan-icon-repproved:before {
+    content: "repproved";
+}
+.tainacan-icon-repprovedcircle:before {
+    content: "repprovedcircle";
+}
+.tainacan-icon-search:before {
+    content: "search";
+}
+.tainacan-icon-see:before {
+    content: "see";
+}
+.tainacan-icon-settings:before {
+    content: "settings";
+}
+.tainacan-icon-share:before {
+    content: "share";
+}
+.tainacan-icon-sortascending:before {
+    content: "sortascending";
+}
+.tainacan-icon-sortdescending:before {
+    content: "sortdescending";
+}
+.tainacan-icon-taxonomies:before {
+    content: "taxonomies";
+}
+.tainacan-icon-terms:before {
+    content: "terms";
+}
+.tainacan-icon-text:before {
+    content: "text";
+}
+.tainacan-icon-tour:before {
+    content: "tour";
+}
+.tainacan-icon-undo:before {
+    content: "undo";
+}
+.tainacan-icon-updating:before {
+    content: "updating";
+}
+.tainacan-icon-upload:before {
+    content: "upload";
+}
+.tainacan-icon-url:before {
+    content: "url";
+}
+.tainacan-icon-user:before {
+    content: "user";
+}
+.tainacan-icon-viewcards:before {
+    content: "viewcards";
+}
+.tainacan-icon-viewgallery:before {
+    content: "viewgallery";
+}
+.tainacan-icon-viewmasonry:before {
+    content: "viewmasonry";
+}
+.tainacan-icon-viewminiature:before {
+    content: "viewminiature";
+}
+.tainacan-icon-viewrecords:before {
+    content: "viewrecords";
+}
+.tainacan-icon-viewtable:before {
+    content: "viewtable";
+}
+
+.tainacan-icon-18px.tainacan-icon-set, 
+.tainacan-icon-18px.tainacan-icon:before {
+    font-size: 18px;
+}
+
+.tainacan-icon-20px.tainacan-icon-set, 
+.tainacan-icon-20px.tainacan-icon:before {
+    font-size: 20px;
+}
+
+.tainacan-icon-30px.tainacan-icon-set, 
+.tainacan-icon-30px.tainacan-icon:before {
+    font-size: 30px;
+}
+
+.tainacan-icon-36px.tainacan-icon-set, 
+.tainacan-icon-36px.tainacan-icon:before {
+    font-size: 36px;
+}
+
+.tainacan-icon-48px.tainacan-icon-set, 
+.tainacan-icon-48px.tainacan-icon:before {
+    font-size: 48px;
+}
+
+.tainacan-icon-dark:before {
+    color: rgba(0, 0, 0, 0.54);
+}
+.tainacan-icon-dark.tainacan-icon-inactive:before {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.tainacan-icon-light:before {
+    color: white;
+}
+.tainacan-icon-light.tainacan-icon-inactive:before {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.tainacan-icon-rotate-45 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(45deg);
+    transform: scaleX(-1) rotate(45deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: scaleY(-1) rotate(45deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-45:before {
+-webkit-transform: rotate(45deg);
+-ms-transform: rotate(45deg);
+transform: rotate(45deg);
+}
+
+.tainacan-icon-rotate-90 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(90deg);
+    transform: scaleX(-1) rotate(90deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: scaleY(-1) rotate(90deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-90:before {
+-webkit-transform: rotate(90deg);
+-ms-transform: rotate(90deg);
+transform: rotate(90deg);
+}
+
+.tainacan-icon-rotate-135 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(135deg);
+    transform: scaleX(-1) rotate(135deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(135deg);
+    -ms-transform: rotate(135deg);
+    transform: scaleY(-1) rotate(135deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-135:before {
+-webkit-transform: rotate(135deg);
+-ms-transform: rotate(135deg);
+transform: rotate(135deg);
+}
+
+.tainacan-icon-rotate-180 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(180deg);
+    transform: scaleX(-1) rotate(180deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: scaleY(-1) rotate(180deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-180:before {
+-webkit-transform: rotate(180deg);
+-ms-transform: rotate(180deg);
+transform: rotate(180deg);
+}
+
+.tainacan-icon-rotate-225 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(225deg);
+    transform: scaleX(-1) rotate(225deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(225deg);
+    -ms-transform: rotate(225deg);
+    transform: scaleY(-1) rotate(225deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-225:before {
+-webkit-transform: rotate(225deg);
+-ms-transform: rotate(225deg);
+transform: rotate(225deg);
+}
+
+.tainacan-icon-rotate-270 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(270deg);
+    transform: scaleX(-1) rotate(270deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(270deg);
+    -ms-transform: rotate(270deg);
+    transform: scaleY(-1) rotate(270deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-270:before {
+-webkit-transform: rotate(270deg);
+-ms-transform: rotate(270deg);
+transform: rotate(270deg);
+}
+
+.tainacan-icon-rotate-315 {
+/*
+// Not included in production
+&.tainacan-icon-flip-h:before {
+    -webkit-transform: scaleX(-1) rotate(315deg);
+    transform: scaleX(-1) rotate(315deg);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+&.tainacan-icon-flip-v:before {
+    -webkit-transform: scaleY(-1) rotate(315deg);
+    -ms-transform: rotate(315deg);
+    transform: scaleY(-1) rotate(315deg);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}
+*/
+}
+.tainacan-icon-rotate-315:before {
+-webkit-transform: rotate(315deg);
+-ms-transform: rotate(315deg);
+transform: rotate(315deg);
+}
+
+.tainacan-icon-flip-h:before {
+-webkit-transform: scaleX(-1);
+transform: scaleX(-1);
+filter: FlipH;
+-ms-filter: "FlipH";
+}
+
+.tainacan-icon-flip-v:before {
+-webkit-transform: scaleY(-1);
+transform: scaleY(-1);
+filter: FlipV;
+-ms-filter: "FlipV";
+}
+
+.tainacan-icon-spin:before {
+-webkit-animation: mdi-spin 2s infinite linear;
+animation: mdi-spin 2s infinite linear;
+}
+
+@-webkit-keyframes mdi-spin {
+0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+}
+}
+@keyframes mdi-spin {
+0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+}
+}

src/assets/css/tainacan-gutenberg-blocks-style.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=tainacan-gutenberg-blocks-style.css.map */

src/assets/css/tainacan-gutenberg-blocks-style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "",
+"sources": [],
+"names": [],
+"file": "tainacan-gutenberg-blocks-style.css"
+}

src/classes/class-tainacan-bulk-edit.php

@@ -181,7 +181,8 @@ class Bulk_Edit  {
 			'posts_per_page' => 1,
 			'paged' => $index,
 			'orderby' => $options['orderby'],
-			'order' => $options['order']
+			'order' => $options['order'],
+			'post_status' => 'any'
 		];
 		
 		$object = new \WP_Query($query);
@@ -438,26 +439,32 @@ class Bulk_Edit  {
 	private function _add_value(Entities\Metadatum $metadatum, $value) {
 		global $wpdb;
 		$type = $metadatum->get_metadata_type_object();
+		$taxRepo = Repositories\Taxonomies::get_instance();
 
 		if ($type->get_primitive_type() == 'term') {
 
 			$options = $metadatum->get_metadata_type_options();
 			$taxonomy_id = $options['taxonomy_id'];
-			$tax = Repositories\Taxonomies::get_instance()->fetch($taxonomy_id);
+			$tax = $taxRepo->fetch($taxonomy_id);
 
 			if ($tax instanceof Entities\Taxonomy) {
 
-				$term = term_exists($value, $tax->get_db_identifier());
+				$term = $taxRepo->term_exists($tax, $value, 0, true);
+				$term_id = false;
 
-				if (!is_array($term)) {
+				if (false === $term) {
 					$term = wp_insert_term($value, $tax->get_db_identifier());
+					if (is_WP_Error($term) || !isset($term['term_taxonomy_id'])) {
+						return new \WP_Error( 'error', __( 'Error adding term', 'tainacan' ) );
+					}
+					$term_id = $term['term_taxonomy_id'];
+				} else {
+					$term_id = $term->term_taxonomy_id;
 				}
 
-				if (is_WP_Error($term) || !isset($term['term_taxonomy_id'])) {
-					return new \WP_Error( 'error', __( 'Error adding term', 'tainacan' ) );
-				}
+				
 
-				$insert_q = $this->_build_select( $wpdb->prepare("post_id, %d", $term['term_taxonomy_id']) );
+				$insert_q = $this->_build_select( $wpdb->prepare("post_id, %d", $term_id) );
 
 				$query = "INSERT IGNORE INTO $wpdb->term_relationships (object_id, term_taxonomy_id) $insert_q";
 
@@ -505,28 +512,29 @@ class Bulk_Edit  {
 	private function _remove_value(Entities\Metadatum $metadatum, $value) {
 		global $wpdb;
 		$type = $metadatum->get_metadata_type_object();
+		$taxRepo = Repositories\Taxonomies::get_instance();
 
 		if ($type->get_primitive_type() == 'term') {
 
 			$options = $metadatum->get_metadata_type_options();
 			$taxonomy_id = $options['taxonomy_id'];
-			$tax = Repositories\Taxonomies::get_instance()->fetch($taxonomy_id);
+			$tax = $taxRepo->fetch($taxonomy_id);
 
 			if ($tax instanceof Entities\Taxonomy) {
 
-				$term = term_exists($value, $tax->get_db_identifier());
+				$term = $taxRepo->term_exists($tax, $value, null, true);
 
 				if (!$term) {
 					return 0;
 				}
 
-				if (is_WP_Error($term) || !isset($term['term_taxonomy_id'])) {
+				if ( !isset($term->term_taxonomy_id) ) {
 					return new \WP_Error( 'error', __( 'Term not found', 'tainacan' ) );
 				}
 
 				$delete_q = $this->_build_select( "post_id" );
 
-				$query = $wpdb->prepare( "DELETE FROM $wpdb->term_relationships WHERE term_taxonomy_id = %d AND object_id IN ($delete_q)", $term['term_taxonomy_id'] );
+				$query = $wpdb->prepare( "DELETE FROM $wpdb->term_relationships WHERE term_taxonomy_id = %d AND object_id IN ($delete_q)", $term->term_taxonomy_id );
 
 				return $wpdb->query($query);
 
@@ -565,42 +573,48 @@ class Bulk_Edit  {
 			return new \WP_Error( 'error', __( 'New value and old value can not be the same', 'tainacan' ) );
 		}
 		
+		$taxRepo = Repositories\Taxonomies::get_instance();
 		$type = $metadatum->get_metadata_type_object();
 
 		if ($type->get_primitive_type() == 'term') {
 
 			$options = $metadatum->get_metadata_type_options();
 			$taxonomy_id = $options['taxonomy_id'];
-			$tax = Repositories\Taxonomies::get_instance()->fetch($taxonomy_id);
+			$tax = $taxRepo->fetch($taxonomy_id);
 
 			if ($tax instanceof Entities\Taxonomy) {
 
 				// check old term
-				$term = term_exists($value, $tax->get_db_identifier());
+				$term = $taxRepo->term_exists($tax, $value, null, true);
 
 				if (!$term) {
 					return 0;
 				}
 
-				if (is_WP_Error($term) || !isset($term['term_taxonomy_id'])) {
+				if (is_WP_Error($term) || !isset($term->term_taxonomy_id)) {
 					return new \WP_Error( 'error', __( 'Term not found', 'tainacan' ) );
 				}
 				
 				// check new term
-				$newterm = term_exists($newvalue, $tax->get_db_identifier());
+				$newterm = $taxRepo->term_exists($tax, $newvalue, 0, true);
+				
 
-				if (!is_array($newterm)) {
+				if (false === $newterm) {
 					$newterm = wp_insert_term($newvalue, $tax->get_db_identifier());
+					if (is_WP_Error($newterm) || !isset($newterm['term_taxonomy_id'])) {
+						return new \WP_Error( 'error', __( 'Error adding term', 'tainacan' ) );
+					}
+					$newtermid = $newterm['term_taxonomy_id'];
+				} else {
+					$newtermid = $newterm->term_taxonomy_id;
 				}
 
-				if (is_WP_Error($newterm) || !isset($newterm['term_taxonomy_id'])) {
-					return new \WP_Error( 'error', __( 'Error adding term', 'tainacan' ) );
-				}
+				
 
-				$insert_q = $this->_build_select( $wpdb->prepare("post_id, %d", $newterm['term_taxonomy_id']) );
+				$insert_q = $this->_build_select( $wpdb->prepare("post_id, %d", $newtermid) );
 				
 				// only where old_value is present (this is what this method have different from the _add_value())
-				$insert_q .= $wpdb->prepare( " AND post_id IN(SELECT object_id FROM $wpdb->term_relationships WHERE term_taxonomy_id = %d)", $term['term_taxonomy_id'] );
+				$insert_q .= $wpdb->prepare( " AND post_id IN(SELECT object_id FROM $wpdb->term_relationships WHERE term_taxonomy_id = %d)", $term->term_taxonomy_id );
 				
 				$query = "INSERT IGNORE INTO $wpdb->term_relationships (object_id, term_taxonomy_id) $insert_q ";
 				

src/classes/entities/class-tainacan-filter.php

@@ -41,10 +41,16 @@ class Filter extends Entity {
 	public function _toArray(){
 		$filter_array = parent::_toArray();
 		$metadatum_id = $filter_array['metadatum'];
+		$metadatum = $this->get_metadatum();
 
 		$filter_array['metadatum'] = [];
 		$filter_array['metadatum']['metadatum_id'] = $metadatum_id;
-		$filter_array['metadatum']['metadatum_name'] = $this->get_metadatum()->get_name();
+		$filter_array['metadatum']['metadatum_name'] = $metadatum->get_name();
+		$meta_object = $metadatum->get_metadata_type_object();
+		if (is_object($meta_object)) {
+			$filter_array['metadatum']['metadata_type_object'] = $meta_object->_toArray();
+		}
+		
 
 		return $filter_array;
 	}

src/classes/entities/class-tainacan-item-metadata-entity.php

@@ -77,7 +77,7 @@ class Item_Metadata_Entity extends Entity {
 				$return .= (string) $v;
 				
 				$count ++;
-				if ($count <= $total)
+				if ($count < $total)
 					$return .= ', ';
 			}
 			
@@ -315,14 +315,27 @@ class Item_Metadata_Entity extends Entity {
         $value = $this->get_value();
         $metadatum = $this->get_metadatum();
         $item = $this->get_item();
-        
-        if (empty($value) && $this->is_required()) {
-            $this->add_error('required', $metadatum->get_name() . ' is required');
-            return false;
-        } elseif (empty($value) && !$this->is_required()) {
-            $this->set_as_valid();
-            return true;
-        }
+
+	    if (empty($value) && $this->is_required() && in_array( $item->get_status(), apply_filters( 'tainacan-status-require-validation', [
+			    'publish',
+			    'future',
+			    'private'
+		    ] ) )
+	    ) {
+		    $this->add_error('required', $metadatum->get_name() . ' is required');
+		    return false;
+	    } elseif (empty($value) && !$this->is_required()) {
+		    $this->set_as_valid();
+		    return true;
+	    } elseif(empty($value) && $this->is_required() && !in_array( $item->get_status(), apply_filters( 'tainacan-status-require-validation', [
+			    'publish',
+			    'future',
+			    'private'
+		    ] ) )) {
+
+		    $this->set_as_valid();
+		    return true;
+	    }
 
         $classMetadatumType = $metadatum->get_metadata_type_object();
         if( is_object( $classMetadatumType ) ){