fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix icon picker

Browse Source
This commit is contained in:
Rodrigo Quelca
2021-08-09 16:46:56 +00:00
parent 2f1c053098
commit 7d7c11dc42
6 changed files with 241 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

7
resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
View File

@@ -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);

4
resources/assets/js/admin/settings/customCaseList/Tables.vue
View File

@@ -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

8
resources/assets/js/admin/settings/customCaseList/main.js
View File

@@ -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 = {

129
resources/assets/js/components/iconPicker/IconPicker.vue
View File

@@ -1,44 +1,54 @@
<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>
<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">
<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">
<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">
<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')">
<div
class="icon-el"
@click="selectIcon(icon, 'far')"
>
<i :class="`far fa-${icon}`"></i>
</div>
<div class="icon-title">
@@ -47,19 +57,27 @@
</div>
</li>
</ul>
<h4 class="icon-title">
Brand Icons
</h4>
<p style="text-align: center;" v-if="brandIcons.length <= 0">
<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">
<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')">
<div
class="icon-el"
@click="selectIcon(icon, 'fab')"
>
<i :class="`fab fa-${icon}`"></i>
</div>
<div class="icon-title">
@@ -68,19 +86,27 @@
</div>
</li>
</ul>
<h4 class="icon-title">
Solid Icons
</h4>
<p style="text-align: center;" v-if="solidIcons.length <= 0">
<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">
<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')">
<div
class="icon-el"
@click="selectIcon(icon, 'fas')"
>
<i :class="`fas fa-${icon}`"></i>
</div>
<div class="icon-title">
@@ -89,7 +115,6 @@
</div>
</li>
</ul>
</div>
</div>
</div>
@@ -99,26 +124,30 @@
</template>
<script>
import ripIcons from './assets/icons';
import ripIcons from "./assets/icons";
export default {
name: 'VueAwesomeIconPicker',
name: "VueAwesomeIconPicker",
props: {
button: {
type: String,
default: 'Pick A Icon'
default: "Pick A Icon",
},
color: {
type: String,
default: 'black'
default: "black",
},
title: {
type: String,
default: 'Vue Awesome Icon Picker'
default: "Vue Awesome Icon Picker",
},
iconPreview: {
type: Boolean,
default: true
}
default: true,
},
default: {
type: String,
default: null,
},
},
data() {
return {
@@ -126,30 +155,25 @@
allIcons: {
brand: [],
regular: [],
solid: []
solid: [],
},
popUpActive: false,
selectedIcon: {
name: "list",
type: "fas"
},
searchText: '',
searchIconNotFound: false
}
icon: null,
searchText: "",
searchIconNotFound: false,
};
},
watch: {
color() {
console.log("colores");
}
},
},
methods: {
selectIcon(icon, type) {
this.selectedIcon.type = type;
this.selectedIcon.name = icon;
this.icon = `${type} fa-${icon}`;
this.popUpActive = false;
this.$emit('selected', this.selectedIcon);
this.$emit("selected", this.icon);
},
searchTextChanged() {
this.searchIcon(this.searchText);
@@ -167,9 +191,11 @@
}, 950);
txt = txt.toLowerCase();
Object.keys(ripIcons).forEach(key => {
Object.keys(ripIcons).forEach((key) => {
setTimeout(() => {
let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
let icons = ripIcons[key].filter(
(ico) => ico.indexOf(txt) > -1
);
if (icons && icons.length > 0) {
this.allIcons[key] = icons;
} else {
@@ -183,14 +209,17 @@
this.loading = false;
}, 950);
}
}
},
},
created() {
this.setDefaultIcons();
if (this.default) {
this.icon = this.default;
}
},
computed: {
popupActiveStyle() {
return !this.popUpActive ? 'display: none;' : '';
return !this.popUpActive ? "display: none;" : "";
},
brandIcons() {
return this.loading ? [] : this.allIcons.brand;
@@ -200,8 +229,8 @@
},
regularIcons() {
return this.loading ? [] : this.allIcons.regular;
}
}
},
},
};
</script>