fix icon picker
This commit is contained in:
Rodrigo Quelca
15
package-lock.json
generated
15
package-lock.json
generated
@@ -11,6 +11,21 @@
|
|||||||
"regenerator-runtime": "^0.13.2"
|
"regenerator-runtime": "^0.13.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@fortawesome/fontawesome": {
|
||||||
|
"version": "1.1.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
|
||||||
|
"integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
|
||||||
|
"requires": {
|
||||||
|
"@fortawesome/fontawesome-common-types": "^0.1.7"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-common-types": {
|
||||||
|
"version": "0.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
|
||||||
|
"integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@fortawesome/fontawesome-common-types": {
|
"@fortawesome/fontawesome-common-types": {
|
||||||
"version": "0.2.35",
|
"version": "0.2.35",
|
||||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
||||||
|
|||||||
@@ -20,6 +20,7 @@
|
|||||||
"vue-template-compiler": "^2.6.10"
|
"vue-template-compiler": "^2.6.10"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome": "^1.1.8",
|
||||||
"@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
|
"@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
|
||||||
"axios": "^0.15.3",
|
"axios": "^0.15.3",
|
||||||
"bootstrap": "^4.5.3",
|
"bootstrap": "^4.5.3",
|
||||||
|
|||||||
@@ -91,7 +91,7 @@
|
|||||||
label="Icon "
|
label="Icon "
|
||||||
label-for="icon"
|
label-for="icon"
|
||||||
>
|
>
|
||||||
<icon-picker @selected="onSelectIcon" :color="menuColor"/>
|
<icon-picker @selected="onSelectIcon" :default="params.iconList"/>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
<div>
|
<div>
|
||||||
<b-form-group
|
<b-form-group
|
||||||
@@ -99,7 +99,7 @@
|
|||||||
label="Menu Color "
|
label="Menu Color "
|
||||||
label-for="icon"
|
label-for="icon"
|
||||||
>
|
>
|
||||||
<verte :value="menuColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
|
<verte :value="params.iconColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
|
||||||
<svg viewBox="0 0 50 50">
|
<svg viewBox="0 0 50 50">
|
||||||
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
|
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -156,7 +156,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
icon: "fas fa-user-cog",
|
icon: "fas fa-user-cog",
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
menuColor:"#4287f5",
|
|
||||||
pmTablesOptions: [],
|
pmTablesOptions: [],
|
||||||
columns: ['name', 'code', 'uri'],
|
columns: ['name', 'code', 'uri'],
|
||||||
data: utils.getData(),
|
data: utils.getData(),
|
||||||
@@ -179,7 +178,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
onSelectIcon(data){
|
onSelectIcon(data){
|
||||||
console.log (data);
|
console.log (data);
|
||||||
|
// this.params.iconList = data;
|
||||||
},
|
},
|
||||||
onChangeColor(color){
|
onChangeColor(color){
|
||||||
console.log(color);
|
console.log(color);
|
||||||
|
|||||||
@@ -59,8 +59,8 @@ export default {
|
|||||||
name: "Rocko",
|
name: "Rocko",
|
||||||
description: "algo te texto",
|
description: "algo te texto",
|
||||||
tableUid: "1234",
|
tableUid: "1234",
|
||||||
iconList: '',
|
iconList: 'far fa-calendar-alt',
|
||||||
iconColor: '',
|
iconColor: '#4287f5',
|
||||||
iconColorScreen:'',
|
iconColorScreen:'',
|
||||||
type: this.module
|
type: this.module
|
||||||
|
|
||||||
|
|||||||
@@ -2,25 +2,25 @@ import Vue from "vue";
|
|||||||
import VueRouter from "vue-router";
|
import VueRouter from "vue-router";
|
||||||
import VueSidebarMenu from "vue-sidebar-menu";
|
import VueSidebarMenu from "vue-sidebar-menu";
|
||||||
import VueI18n from 'vue-i18n';
|
import VueI18n from 'vue-i18n';
|
||||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
|
import { BootstrapVue } from 'bootstrap-vue';
|
||||||
import { ServerTable, Event, ClientTable} from 'vue-tables-2';
|
import { ServerTable, Event, ClientTable} from 'vue-tables-2';
|
||||||
import Sortable from 'sortablejs';
|
import Sortable from 'sortablejs';
|
||||||
import "@fortawesome/fontawesome-free/css/all.css";
|
import "@fortawesome/fontawesome-free/css/all.css";
|
||||||
import "@fortawesome/fontawesome-free/js/all.js";
|
|
||||||
import 'bootstrap/dist/css/bootstrap-grid.css';
|
import 'bootstrap/dist/css/bootstrap-grid.css';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||||
import CustomCaseList from "./CustomCaseList";
|
import CustomCaseList from "./CustomCaseList";
|
||||||
|
|
||||||
import Verte from 'verte';
|
import Verte from 'verte';
|
||||||
import 'verte/dist/verte.css';
|
import 'verte/dist/verte.css';
|
||||||
|
import fontawesome from '@fortawesome/fontawesome'
|
||||||
|
|
||||||
|
fontawesome.config = { autoReplaceSvg: false }
|
||||||
// register component globally
|
// register component globally
|
||||||
Vue.component('verte', Verte);
|
Vue.component('verte', Verte);
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
Vue.use(VueSidebarMenu);
|
Vue.use(VueSidebarMenu);
|
||||||
Vue.use(BootstrapVue);
|
Vue.use(BootstrapVue);
|
||||||
Vue.use(VueI18n);
|
Vue.use(VueI18n);
|
||||||
Vue.use(BootstrapVueIcons)
|
|
||||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
||||||
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
||||||
window.ProcessMaker = {
|
window.ProcessMaker = {
|
||||||
|
|||||||
@@ -1,210 +1,239 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="rbt-icon-picker">
|
<div class="rbt-icon-picker">
|
||||||
|
<b-button @click="popUpActive = true">
|
||||||
<b-button @click="popUpActive = true">
|
<i ref="icon" :class="icon"></i>
|
||||||
<i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></i>
|
</b-button>
|
||||||
</b-button>
|
|
||||||
|
|
||||||
<div class="rip-popup-component" :style="popupActiveStyle">
|
<div class="rip-popup-component" :style="popupActiveStyle">
|
||||||
<div class="rip-popup-bg"></div>
|
<div class="rip-popup-bg"></div>
|
||||||
<div class="rip-popup">
|
<div class="rip-popup">
|
||||||
|
<div class="rip-popup-content">
|
||||||
|
<div class="rip-search">
|
||||||
<div class="rip-popup-content">
|
<div class="rip-input">
|
||||||
<div class="rip-search">
|
<label for="ripSearch" style="display: none;"
|
||||||
<div class="rip-input">
|
>Search for Icon</label
|
||||||
<label for="ripSearch" style="display: none;">Search for Icon</label>
|
>
|
||||||
<input id="ripSearch" placeholder="Search for Icon" v-model="searchText" @input="searchTextChanged">
|
<input
|
||||||
<span class="input-append">
|
id="ripSearch"
|
||||||
<i class="fas fa-search"></i>
|
placeholder="Search for Icon"
|
||||||
</span>
|
v-model="searchText"
|
||||||
|
@input="searchTextChanged"
|
||||||
|
/>
|
||||||
|
<span class="input-append">
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rip-content">
|
||||||
|
<div class="rip-not-found" v-show="loading">
|
||||||
|
<i class="fas fa-spinner fa-pulse"></i>
|
||||||
|
</div>
|
||||||
|
<div class="rip-icons" v-show="!loading">
|
||||||
|
<h4 class="icon-title">
|
||||||
|
Regular Icons
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
style="text-align: center;"
|
||||||
|
v-if="regularIcons.length <= 0"
|
||||||
|
>
|
||||||
|
<i class="fas fa-eye-slash"></i>
|
||||||
|
Sorry, No icons found!
|
||||||
|
</p>
|
||||||
|
<ul class="rip-row" v-if="regularIcons.length > 0">
|
||||||
|
<li
|
||||||
|
v-for="(icon, index) in regularIcons"
|
||||||
|
:key="index"
|
||||||
|
class="rip-col"
|
||||||
|
>
|
||||||
|
<div class="icon-content text-center">
|
||||||
|
<div
|
||||||
|
class="icon-el"
|
||||||
|
@click="selectIcon(icon, 'far')"
|
||||||
|
>
|
||||||
|
<i :class="`far fa-${icon}`"></i>
|
||||||
|
</div>
|
||||||
|
<div class="icon-title">
|
||||||
|
{{ icon }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h4 class="icon-title">
|
||||||
|
Brand Icons
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
style="text-align: center;"
|
||||||
|
v-if="brandIcons.length <= 0"
|
||||||
|
>
|
||||||
|
<i class="fas fa-eye-slash"></i>
|
||||||
|
Sorry, No Brand icons found!
|
||||||
|
</p>
|
||||||
|
<ul class="rip-row" v-if="brandIcons.length > 0">
|
||||||
|
<li
|
||||||
|
v-for="(icon, index) in brandIcons"
|
||||||
|
:key="index"
|
||||||
|
class="rip-col"
|
||||||
|
>
|
||||||
|
<div class="icon-content text-center">
|
||||||
|
<div
|
||||||
|
class="icon-el"
|
||||||
|
@click="selectIcon(icon, 'fab')"
|
||||||
|
>
|
||||||
|
<i :class="`fab fa-${icon}`"></i>
|
||||||
|
</div>
|
||||||
|
<div class="icon-title">
|
||||||
|
{{ icon }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h4 class="icon-title">
|
||||||
|
Solid Icons
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
style="text-align: center;"
|
||||||
|
v-if="solidIcons.length <= 0"
|
||||||
|
>
|
||||||
|
<i class="fas fa-eye-slash"></i>
|
||||||
|
Sorry, No Solid icons found!
|
||||||
|
</p>
|
||||||
|
<ul class="rip-row" v-if="solidIcons.length > 0">
|
||||||
|
<li
|
||||||
|
v-for="(icon, index) in solidIcons"
|
||||||
|
:key="index"
|
||||||
|
class="rip-col"
|
||||||
|
>
|
||||||
|
<div class="icon-content text-center">
|
||||||
|
<div
|
||||||
|
class="icon-el"
|
||||||
|
@click="selectIcon(icon, 'fas')"
|
||||||
|
>
|
||||||
|
<i :class="`fas fa-${icon}`"></i>
|
||||||
|
</div>
|
||||||
|
<div class="icon-title">
|
||||||
|
{{ icon }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rip-content">
|
|
||||||
<div class="rip-not-found" v-show="loading">
|
|
||||||
<i class="fas fa-spinner fa-pulse"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rip-icons" v-show="!loading">
|
|
||||||
|
|
||||||
<h4 class="icon-title">
|
|
||||||
Regular Icons
|
|
||||||
</h4>
|
|
||||||
<p style="text-align: center;" v-if="regularIcons.length <= 0">
|
|
||||||
<i class="fas fa-eye-slash"></i>
|
|
||||||
Sorry, No icons found!
|
|
||||||
</p>
|
|
||||||
<ul class="rip-row" v-if="regularIcons.length > 0">
|
|
||||||
<li v-for="(icon, index) in regularIcons" :key="index" class="rip-col">
|
|
||||||
<div class="icon-content text-center">
|
|
||||||
<div class="icon-el" @click="selectIcon(icon, 'far')">
|
|
||||||
<i :class="`far fa-${icon}`"></i>
|
|
||||||
</div>
|
|
||||||
<div class="icon-title">
|
|
||||||
{{ icon }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4 class="icon-title">
|
|
||||||
Brand Icons
|
|
||||||
</h4>
|
|
||||||
<p style="text-align: center;" v-if="brandIcons.length <= 0">
|
|
||||||
<i class="fas fa-eye-slash"></i>
|
|
||||||
Sorry, No Brand icons found!
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul class="rip-row" v-if="brandIcons.length > 0">
|
|
||||||
<li v-for="(icon, index) in brandIcons" :key="index" class="rip-col">
|
|
||||||
<div class="icon-content text-center">
|
|
||||||
<div class="icon-el" @click="selectIcon(icon, 'fab')">
|
|
||||||
<i :class="`fab fa-${icon}`"></i>
|
|
||||||
</div>
|
|
||||||
<div class="icon-title">
|
|
||||||
{{ icon }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4 class="icon-title">
|
|
||||||
Solid Icons
|
|
||||||
</h4>
|
|
||||||
<p style="text-align: center;" v-if="solidIcons.length <= 0">
|
|
||||||
<i class="fas fa-eye-slash"></i>
|
|
||||||
Sorry, No Solid icons found!
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul class="rip-row" v-if="solidIcons.length > 0">
|
|
||||||
<li v-for="(icon, index) in solidIcons" :key="index" class="rip-col">
|
|
||||||
<div class="icon-content text-center">
|
|
||||||
<div class="icon-el" @click="selectIcon(icon, 'fas')">
|
|
||||||
<i :class="`fas fa-${icon}`"></i>
|
|
||||||
</div>
|
|
||||||
<div class="icon-title">
|
|
||||||
{{ icon }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ripIcons from './assets/icons';
|
import ripIcons from "./assets/icons";
|
||||||
export default {
|
export default {
|
||||||
name: 'VueAwesomeIconPicker',
|
name: "VueAwesomeIconPicker",
|
||||||
props: {
|
props: {
|
||||||
button: {
|
button: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'Pick A Icon'
|
default: "Pick A Icon",
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'black'
|
default: "black",
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'Vue Awesome Icon Picker'
|
default: "Vue Awesome Icon Picker",
|
||||||
},
|
},
|
||||||
iconPreview: {
|
iconPreview: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true,
|
||||||
}
|
},
|
||||||
|
default: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
allIcons: {
|
allIcons: {
|
||||||
brand: [],
|
brand: [],
|
||||||
regular: [],
|
regular: [],
|
||||||
solid: []
|
solid: [],
|
||||||
},
|
},
|
||||||
|
|
||||||
popUpActive: false,
|
popUpActive: false,
|
||||||
selectedIcon: {
|
icon: null,
|
||||||
name: "list",
|
searchText: "",
|
||||||
type: "fas"
|
searchIconNotFound: false,
|
||||||
},
|
};
|
||||||
searchText: '',
|
|
||||||
|
|
||||||
searchIconNotFound: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
color(){
|
color() {
|
||||||
console.log("colores");
|
console.log("colores");
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectIcon(icon, type) {
|
selectIcon(icon, type) {
|
||||||
this.selectedIcon.type = type;
|
this.icon = `${type} fa-${icon}`;
|
||||||
this.selectedIcon.name = icon;
|
this.popUpActive = false;
|
||||||
this.popUpActive = false;
|
this.$emit("selected", this.icon);
|
||||||
this.$emit('selected', this.selectedIcon);
|
},
|
||||||
},
|
searchTextChanged() {
|
||||||
searchTextChanged() {
|
this.searchIcon(this.searchText);
|
||||||
this.searchIcon(this.searchText);
|
},
|
||||||
},
|
setDefaultIcons() {
|
||||||
setDefaultIcons() {
|
this.allIcons.brand = ripIcons.brand;
|
||||||
this.allIcons.brand = ripIcons.brand;
|
this.allIcons.regular = ripIcons.regular;
|
||||||
this.allIcons.regular = ripIcons.regular;
|
this.allIcons.solid = ripIcons.solid;
|
||||||
this.allIcons.solid = ripIcons.solid;
|
},
|
||||||
},
|
searchIcon(txt) {
|
||||||
searchIcon(txt) {
|
this.loading = true;
|
||||||
this.loading = true;
|
if (txt && txt.length > 0) {
|
||||||
if(txt && txt.length > 0) {
|
setTimeout(() => {
|
||||||
setTimeout(() => {
|
this.loading = false;
|
||||||
this.loading = false;
|
}, 950);
|
||||||
}, 950);
|
|
||||||
|
|
||||||
txt = txt.toLowerCase();
|
txt = txt.toLowerCase();
|
||||||
Object.keys(ripIcons).forEach(key => {
|
Object.keys(ripIcons).forEach((key) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
|
let icons = ripIcons[key].filter(
|
||||||
if(icons && icons.length > 0) {
|
(ico) => ico.indexOf(txt) > -1
|
||||||
this.allIcons[key] = icons;
|
);
|
||||||
} else {
|
if (icons && icons.length > 0) {
|
||||||
this.allIcons[key] = [];
|
this.allIcons[key] = icons;
|
||||||
}
|
} else {
|
||||||
}, 320);
|
this.allIcons[key] = [];
|
||||||
});
|
}
|
||||||
} else {
|
}, 320);
|
||||||
setTimeout(() => {
|
});
|
||||||
this.setDefaultIcons();
|
} else {
|
||||||
this.loading = false;
|
setTimeout(() => {
|
||||||
}, 950);
|
this.setDefaultIcons();
|
||||||
}
|
this.loading = false;
|
||||||
}
|
}, 950);
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.setDefaultIcons();
|
this.setDefaultIcons();
|
||||||
|
if (this.default) {
|
||||||
|
this.icon = this.default;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
popupActiveStyle() {
|
popupActiveStyle() {
|
||||||
return !this.popUpActive ? 'display: none;' : '';
|
return !this.popUpActive ? "display: none;" : "";
|
||||||
},
|
},
|
||||||
brandIcons() {
|
brandIcons() {
|
||||||
return this.loading ? [] : this.allIcons.brand;
|
return this.loading ? [] : this.allIcons.brand;
|
||||||
},
|
},
|
||||||
solidIcons() {
|
solidIcons() {
|
||||||
return this.loading ? [] : this.allIcons.solid;
|
return this.loading ? [] : this.allIcons.solid;
|
||||||
},
|
},
|
||||||
regularIcons() {
|
regularIcons() {
|
||||||
return this.loading ? [] : this.allIcons.regular;
|
return this.loading ? [] : this.allIcons.regular;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "./assets/RbtIconPicker";
|
@import "./assets/RbtIconPicker";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user