Creates UserPrefsPlugin to query easily for user meta and set preferences. Tweaks sass color variables to match current layout.

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/admin/class-tainacan-admin.php

@@ -85,7 +85,8 @@ class Admin {
         }
         
         $settings = [
-			'root' => esc_url_raw( rest_url() ).'tainacan/v2',
+            'root' => esc_url_raw( rest_url() ).'tainacan/v2',
+            'root_wp_api' => esc_url_raw( rest_url() ),
 			'nonce' => wp_create_nonce( 'wp_rest' ),
 			'components' => $components,
             'i18n' => $tainacan_admin_i18n,

src/admin/components/collections-list.vue

@@ -8,10 +8,10 @@
                         v-model="collectionsPerPage" 
                         @input="onChangeCollectionsPerPage" 
                         :disabled="collections.length <= 0">
-                    <option value="2">2 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="12">12 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="10">10 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="24">24 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="15">15 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="48">48 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="20">20 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="96">96 {{ $i18n.get('label_per_page') }}</option>
                 </b-select>
 
             </b-field>
@@ -52,7 +52,7 @@
                         </router-link>
                     </b-table-column>
 
-                    <b-table-column tabindex="0" label="Ações" width="110" :aria-label="$i18n.get('label_ações')">
+                    <b-table-column tabindex="0" label="Ações" width="80" :aria-label="$i18n.get('label_ações')">
                         <!-- <a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a> -->
                         <a id="button-edit" :aria-label="$i18n.get('label_button_edit')" @click.prevent.stop="goToCollectionEditPage(props.row.id)"><b-icon icon="pencil"></a>
                         <a id="button-delete" :aria-label="$i18n.get('label_button_delete')" @click.prevent.stop="deleteOneCollection(props.row.id)"><b-icon icon="delete"></a>
@@ -94,7 +94,7 @@ export default {
             isLoading: false,
             totalCollections: 0,
             page: 1,
-            collectionsPerPage: 2
+            collectionsPerPage: 12
         }
     },
     methods: {
@@ -107,13 +107,13 @@ export default {
         ]),
         deleteOneCollection(collectionId) {
             this.$dialog.confirm({
-                message: this.$i18n.get('info_warning_collection_deleted'),
+                message: this.$i18n.get('info_warning_collection_delete'),
                 onConfirm: () => {
                     this.deleteCollection(collectionId).then(() => {
                         this.loadCollections();
                         this.$toast.open({
                             duration: 3000,
-                            message: this.$i18n.get('info_collection_delete'),
+                            message: this.$i18n.get('info_collection_deleted'),
                             position: 'is-bottom',
                             type: 'is-secondary',
                             queue: true
@@ -174,6 +174,7 @@ export default {
         },
         onChangeCollectionsPerPage(value) {
             this.collectionsPerPage = value;
+            this.$userPrefs.set('items_per_page', value);
             this.loadCollections();
         },
         onPageChange(page) {
@@ -197,6 +198,15 @@ export default {
             return this.getCollections();
         }
     },
+    created() {
+        this.$userPrefs.get('items_per_page')
+            .then((value) => {
+                this.collectionsPerPage = value;
+            })
+            .catch((error) => {
+                this.$userPrefs.set('items_per_page', 12);
+            }); 
+    },
     mounted(){
         this.loadCollections();
     }

src/admin/components/items-list.vue

@@ -24,10 +24,10 @@
                         v-model="itemsPerPage" 
                         @input="onChangeItemsPerPage" 
                         :disabled="items.length <= 0">
-                    <option value="2">2 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="12">12 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="10">10 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="24">24 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="15">15 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="48">48 {{ $i18n.get('label_per_page') }}</option>
-                    <option value="20">20 {{ $i18n.get('label_per_page') }}</option>
+                    <option value="96">96 {{ $i18n.get('label_per_page') }}</option>
                 </b-select>
                 
             </b-field>
@@ -110,7 +110,7 @@ export default {
             isLoading: false,
             totalItems: 0,
             page: 1,
-            itemsPerPage: 2
+            itemsPerPage: 12
         }
     },
     props: {
@@ -192,6 +192,7 @@ export default {
         },
         onChangeItemsPerPage(value) {
             this.itemsPerPage = value;
+            this.$userPrefs.set('items_per_page', value);
             this.loadItems();
         },
         goToItemPage(itemId) {
@@ -221,6 +222,15 @@ export default {
             return this.getItems();
         }
     },
+    created() {
+        this.$userPrefs.get('items_per_page')
+        .then((value) => {
+            this.itemsPerPage = value;
+        })
+        .catch((error) => {
+            this.$userPrefs.set('items_per_page', 12);
+        });     
+    },
     mounted(){
         this.loadItems();
         this.fetchFields(this.collectionId).then((res) => {
@@ -237,7 +247,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+    @import "../scss/_variables.scss";
 
     .table-thumb {
         max-height: 55px !important;

src/admin/components/primary-menu.vue

@@ -65,14 +65,14 @@ export default {
     @import "../scss/_variables.scss";
 
     #primary-menu {
-        background-color: $primary-dark;
+        background-color: $secondary;
         padding: 0px; 
         -webkit-transition: max-width 0.2s linear; /* Safari */
         transition: max-width 0.2s linear; 
         max-width: 222px;
 
         .menu-header {
-            background-color: $primary-darker;
+            background-color: rgba(0,0,0,0.1);
             height: 62px;
             a { padding: 1em 2.5em }
             .icon {
@@ -92,7 +92,7 @@ export default {
         }
         .separator {
             height: 2px;
-            background-color: $primary-darker;
+            background-color: $separator-color;
             width: 100%;
         }
         li{
@@ -107,12 +107,12 @@ export default {
                 transition: padding 0.2s linear; 
             }
             a:hover {
-                background-color: $primary-light;
+                background-color: $primary;
-                color: $secondary
+                color: $tertiary
             }
             a.is-active {
                 background-color: $primary;
-                color: $secondary;
+                color: $tertiary;
             }
             .menu-text {
                 padding-left: 0.7em;
@@ -137,7 +137,10 @@ export default {
                     opacity: 0;
                 }
             }
-            a{ padding: 1em 0.8em; }
+            a { 
+                padding: 1em 0.8em;
+                color: rgba(255,255,255,0.4);
+            }
             .menu-text {   
                 visibility: hidden; 
                 opacity: 0;

src/admin/components/secondary-menu.vue

@@ -78,7 +78,7 @@ export default {
         max-width: 180px; 
 
         .menu-header {
-            background-color: $primary-dark;
+            background-color: rgba(0,0,0,0.1);
             height: 62px;
             a { padding: 1em 1.2em; }
             .icon {
@@ -109,12 +109,12 @@ export default {
                 transition: padding 0.3s linear; 
             }
             a:hover {
-                background-color: $primary-lighter;
+                background-color: rgba(255,255,255,0.4);
-                color: $secondary
+                color: $tertiary;
             }
             a.is-active {
-                background-color: $primary-light;
+                background-color: rgba(255,255,255,0.4);
-                color: $secondary;
+                color: $tertiary;
             }
             .menu-text {
                 padding-left: 0.7em;
@@ -132,7 +132,7 @@ export default {
             .menu-header { display: none;
             }
             .menu-text {
-                display: none !important;
+                padding-left: 0.3em !important;
             }
             ul { 
                 display: flex;

src/admin/js/main.js

@@ -18,7 +18,7 @@ import AdminPage from '../admin.vue'
 import draggable from 'vuedraggable'
 import store from '../../js/store/store'
 import router from './router'
-import { I18NPlugin, RouterHelperPlugin } from './utilities';
+import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin } from './utilities';
 
 // Configure and Register Plugins
 router.beforeEach((to, from, next) => {
@@ -26,6 +26,7 @@ router.beforeEach((to, from, next) => {
     next()
 });
 Vue.use(I18NPlugin);
+Vue.use(UserPrefsPlugin);
 Vue.use(RouterHelperPlugin);
 Vue.use(Buefy); 
 

src/admin/js/utilities.js

@@ -1,4 +1,11 @@
 import qs from 'qs';
+import axios from 'axios';
+
+const wpApi = axios.create({
+    baseURL: tainacan_plugin.root_wp_api
+});
+
+wpApi.defaults.headers.common['X-WP-Nonce'] = tainacan_plugin.nonce;
 
 // I18N PLUGIN - Allows access to Wordpress translation file.
 export const I18NPlugin = {};
@@ -13,6 +20,43 @@ I18NPlugin.install = function (Vue, options = {}) {
 
 }
 
+// USER PREFERENCES - Used to save key-value information for user settings of plugin
+export const UserPrefsPlugin = {};
+UserPrefsPlugin.install = function (Vue, options = {}) {
+    
+    Vue.prototype.$userPrefs = {
+        get(key) {
+            return new Promise(( resolve, reject ) => {
+                wpApi.get('/wp/v2/users/me/')
+                .then( res => {
+                    if (res.data.meta.hasOwnProperty(key))
+                        resolve( res.data.key );
+                    else
+                        reject( { message: 'Key does not exists in user preference.', value: false} );
+                })
+                .catch(error => {
+                    reject( { message: error, value: false});
+                });
+            }); 
+        },
+        set(metakey, value) {
+            let data = {
+                'meta': { metakey: value }
+            };
+            return new Promise(( resolve, reject ) => {
+                wpApi.post('/wp/v2/users/me/?context=edit&' + qs.stringify(data))
+                .then( res => {
+                    resolve( res.data );
+                })
+                .catch(error => {
+                    reject( error );
+                });
+            }); 
+        }
+    }
+
+}
+
 // ROUTER HELPER PLUGIN - Allows easy access to URL paths for entities
 export const RouterHelperPlugin = {};
 RouterHelperPlugin.install = function (Vue, options = {}) {

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <h1>Collections Page</h1>
-        <router-link tag="button" class="button is-primary"
+        <router-link tag="button" class="button is-secondary"
                     :to="{ path: $routerHelper.getNewCollectionPath() }">
             {{ $i18n.get('new') + ' ' + $i18n.get('collection') }}
         </router-link>

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

@@ -1,7 +1,7 @@
 <template>  
     <div>
         <h1>Items Page</h1>
-        <router-link tag="button" class="button is-primary"
+        <router-link tag="button" class="button is-secondary"
                     :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
             {{ $i18n.get('new') + ' ' + $i18n.get('item') }}
         </router-link>

src/admin/scss/_variables.scss

@@ -2,24 +2,35 @@
 @import "../../../node_modules/bulma/sass/utilities/_all.sass";
 
 // Tainacan custom colors
-$primary: #7DB9C3;// #25a189;
+$primary: #2cb4c1;// #25a189;
 $primary-invert: findColorInvert($primary);
-$secondary: #1F2F56;
+$secondary: #298596;
-$secondary-invert: findColorInvert($primary);
+$secondary-invert: findColorInvert($secondary);
- 
+$tertiary: #1f2f56;
+$tertiary-invert: findColorInvert($tertiary);
+
 $primary-light:#A5CDD7;
 $primary-lighter: lighten($primary-light, 15%);
 $primary-dark: #55A0AF;
 $primary-darker: darken($primary-dark, 5%);
 
+$separator-color: #2a6e77;
+$gray: #898d8f; 
+$gray-invert: findColorInvert($gray);
+$gray-light: #898d8f; 
+$gray-light-invert: findColorInvert($gray-light);
+
 // Setup $colors to use as bulma classes
 $colors: (
     "white": ($white, $black),
     "black": ($black, $white),
+    "gray": ($gray, $gray-invert),
+    "gray-light": ($gray-light, $gray-light-invert),
     "light": ($light, $light-invert),
     "dark": ($dark, $dark-invert),
     "primary": ($primary, $primary-invert),
     "secondary": ($secondary, $secondary-invert),
+    "tertiary": ($secondary, $secondary-invert),
     "info": ($info, $info-invert),
     "success": ($success, $success-invert),
     "warning": ($warning, $warning-invert),

src/admin/scss/tainacan-admin.scss

@@ -6,6 +6,11 @@ $link: $primary;
 $link-invert: $primary-invert;
 $link-focus-border: $primary;
 
+// Table
+$table-head-cell-color: $gray-light;
+$table-row-active-color: #e5e5e5;
+$table-head-cell-border-width: 0 0 1px;
+
 // Bulma's modal (needs to be greather than taincan-admin-app
 $modal-z: 9999999;
 
@@ -14,6 +19,9 @@ $modal-z: 9999999;
 @import "../../../node_modules/bulma/bulma.sass";
 @import "../../../node_modules/buefy/src/scss/buefy.scss";
 
+// Roboto font
+$family-sans-serif: 'Roboto', sans-serif;
+
 // Clears wordpress content
 body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {
     display: none;
@@ -31,6 +39,7 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod
     overflow-y: auto;
     height: 100%;
     margin: 0px !important; 
+    font-family: $family-sans-serif;
 }
 
 /* Rules for sizing the icon. */
@@ -49,5 +58,5 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod
 
 // Buefy notices (toast)
 .notices {
-z-index: 99999999 !important;
+    z-index: 99999999 !important;
 }