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"
|
||||
}
|
||||
},
|
||||
"@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": {
|
||||
"version": "0.2.35",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
"@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
|
||||
"axios": "^0.15.3",
|
||||
"bootstrap": "^4.5.3",
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
label="Icon "
|
||||
label-for="icon"
|
||||
>
|
||||
<icon-picker @selected="onSelectIcon" :color="menuColor"/>
|
||||
<icon-picker @selected="onSelectIcon" :default="params.iconList"/>
|
||||
</b-form-group>
|
||||
<div>
|
||||
<b-form-group
|
||||
@@ -99,7 +99,7 @@
|
||||
label="Menu Color "
|
||||
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">
|
||||
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
|
||||
</svg>
|
||||
@@ -156,7 +156,6 @@ export default {
|
||||
return {
|
||||
icon: "fas fa-user-cog",
|
||||
isLoading: false,
|
||||
menuColor:"#4287f5",
|
||||
pmTablesOptions: [],
|
||||
columns: ['name', 'code', 'uri'],
|
||||
data: utils.getData(),
|
||||
@@ -179,7 +178,7 @@ export default {
|
||||
methods: {
|
||||
onSelectIcon(data){
|
||||
console.log (data);
|
||||
|
||||
// this.params.iconList = data;
|
||||
},
|
||||
onChangeColor(color){
|
||||
console.log(color);
|
||||
|
||||
@@ -59,8 +59,8 @@ export default {
|
||||
name: "Rocko",
|
||||
description: "algo te texto",
|
||||
tableUid: "1234",
|
||||
iconList: '',
|
||||
iconColor: '',
|
||||
iconList: 'far fa-calendar-alt',
|
||||
iconColor: '#4287f5',
|
||||
iconColorScreen:'',
|
||||
type: this.module
|
||||
|
||||
|
||||
@@ -2,25 +2,25 @@ import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import VueSidebarMenu from "vue-sidebar-menu";
|
||||
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 Sortable from 'sortablejs';
|
||||
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.min.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import CustomCaseList from "./CustomCaseList";
|
||||
|
||||
import Verte from 'verte';
|
||||
import 'verte/dist/verte.css';
|
||||
import fontawesome from '@fortawesome/fontawesome'
|
||||
|
||||
fontawesome.config = { autoReplaceSvg: false }
|
||||
// register component globally
|
||||
Vue.component('verte', Verte);
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(VueSidebarMenu);
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(VueI18n);
|
||||
Vue.use(BootstrapVueIcons)
|
||||
Vue.use(ServerTable, {}, false, 'bootstrap3', {});
|
||||
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
|
||||
window.ProcessMaker = {
|
||||
|
||||
@@ -1,210 +1,239 @@
|
||||
<template>
|
||||
<div class="rbt-icon-picker">
|
||||
|
||||
<b-button @click="popUpActive = true">
|
||||
<i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></i>
|
||||
</b-button>
|
||||
|
||||
<div class="rbt-icon-picker">
|
||||
<b-button @click="popUpActive = true">
|
||||
<i ref="icon" :class="icon"></i>
|
||||
</b-button>
|
||||
<div class="rip-popup-component" :style="popupActiveStyle">
|
||||
<div class="rip-popup-bg"></div>
|
||||
<div class="rip-popup">
|
||||
|
||||
|
||||
<div class="rip-popup-content">
|
||||
<div class="rip-search">
|
||||
<div class="rip-input">
|
||||
<label for="ripSearch" style="display: none;">Search for Icon</label>
|
||||
<input id="ripSearch" placeholder="Search for Icon" v-model="searchText" @input="searchTextChanged">
|
||||
<span class="input-append">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<div class="rip-popup-bg"></div>
|
||||
<div class="rip-popup">
|
||||
<div class="rip-popup-content">
|
||||
<div class="rip-search">
|
||||
<div class="rip-input">
|
||||
<label for="ripSearch" style="display: none;"
|
||||
>Search for Icon</label
|
||||
>
|
||||
<input
|
||||
id="ripSearch"
|
||||
placeholder="Search for Icon"
|
||||
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 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ripIcons from './assets/icons';
|
||||
export default {
|
||||
name: 'VueAwesomeIconPicker',
|
||||
import ripIcons from "./assets/icons";
|
||||
export default {
|
||||
name: "VueAwesomeIconPicker",
|
||||
props: {
|
||||
button: {
|
||||
type: String,
|
||||
default: 'Pick A Icon'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Vue Awesome Icon Picker'
|
||||
},
|
||||
iconPreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
button: {
|
||||
type: String,
|
||||
default: "Pick A Icon",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "black",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "Vue Awesome Icon Picker",
|
||||
},
|
||||
iconPreview: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
default: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
allIcons: {
|
||||
brand: [],
|
||||
regular: [],
|
||||
solid: []
|
||||
},
|
||||
return {
|
||||
loading: false,
|
||||
allIcons: {
|
||||
brand: [],
|
||||
regular: [],
|
||||
solid: [],
|
||||
},
|
||||
|
||||
popUpActive: false,
|
||||
selectedIcon: {
|
||||
name: "list",
|
||||
type: "fas"
|
||||
},
|
||||
searchText: '',
|
||||
|
||||
searchIconNotFound: false
|
||||
}
|
||||
popUpActive: false,
|
||||
icon: null,
|
||||
searchText: "",
|
||||
searchIconNotFound: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
color(){
|
||||
console.log("colores");
|
||||
}
|
||||
color() {
|
||||
console.log("colores");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectIcon(icon, type) {
|
||||
this.selectedIcon.type = type;
|
||||
this.selectedIcon.name = icon;
|
||||
this.popUpActive = false;
|
||||
this.$emit('selected', this.selectedIcon);
|
||||
},
|
||||
searchTextChanged() {
|
||||
this.searchIcon(this.searchText);
|
||||
},
|
||||
setDefaultIcons() {
|
||||
this.allIcons.brand = ripIcons.brand;
|
||||
this.allIcons.regular = ripIcons.regular;
|
||||
this.allIcons.solid = ripIcons.solid;
|
||||
},
|
||||
searchIcon(txt) {
|
||||
this.loading = true;
|
||||
if(txt && txt.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 950);
|
||||
selectIcon(icon, type) {
|
||||
this.icon = `${type} fa-${icon}`;
|
||||
this.popUpActive = false;
|
||||
this.$emit("selected", this.icon);
|
||||
},
|
||||
searchTextChanged() {
|
||||
this.searchIcon(this.searchText);
|
||||
},
|
||||
setDefaultIcons() {
|
||||
this.allIcons.brand = ripIcons.brand;
|
||||
this.allIcons.regular = ripIcons.regular;
|
||||
this.allIcons.solid = ripIcons.solid;
|
||||
},
|
||||
searchIcon(txt) {
|
||||
this.loading = true;
|
||||
if (txt && txt.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 950);
|
||||
|
||||
txt = txt.toLowerCase();
|
||||
Object.keys(ripIcons).forEach(key => {
|
||||
setTimeout(() => {
|
||||
let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
|
||||
if(icons && icons.length > 0) {
|
||||
this.allIcons[key] = icons;
|
||||
} else {
|
||||
this.allIcons[key] = [];
|
||||
}
|
||||
}, 320);
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.setDefaultIcons();
|
||||
this.loading = false;
|
||||
}, 950);
|
||||
}
|
||||
}
|
||||
txt = txt.toLowerCase();
|
||||
Object.keys(ripIcons).forEach((key) => {
|
||||
setTimeout(() => {
|
||||
let icons = ripIcons[key].filter(
|
||||
(ico) => ico.indexOf(txt) > -1
|
||||
);
|
||||
if (icons && icons.length > 0) {
|
||||
this.allIcons[key] = icons;
|
||||
} else {
|
||||
this.allIcons[key] = [];
|
||||
}
|
||||
}, 320);
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.setDefaultIcons();
|
||||
this.loading = false;
|
||||
}, 950);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefaultIcons();
|
||||
this.setDefaultIcons();
|
||||
if (this.default) {
|
||||
this.icon = this.default;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
popupActiveStyle() {
|
||||
return !this.popUpActive ? 'display: none;' : '';
|
||||
},
|
||||
brandIcons() {
|
||||
return this.loading ? [] : this.allIcons.brand;
|
||||
},
|
||||
solidIcons() {
|
||||
return this.loading ? [] : this.allIcons.solid;
|
||||
},
|
||||
regularIcons() {
|
||||
return this.loading ? [] : this.allIcons.regular;
|
||||
}
|
||||
}
|
||||
};
|
||||
popupActiveStyle() {
|
||||
return !this.popUpActive ? "display: none;" : "";
|
||||
},
|
||||
brandIcons() {
|
||||
return this.loading ? [] : this.allIcons.brand;
|
||||
},
|
||||
solidIcons() {
|
||||
return this.loading ? [] : this.allIcons.solid;
|
||||
},
|
||||
regularIcons() {
|
||||
return this.loading ? [] : this.allIcons.regular;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./assets/RbtIconPicker";
|
||||
@import "./assets/RbtIconPicker";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user