Merge pull request #998 from Budibase/feature/icon-component-switch-to-remix
Switches the Icon component so that it now uses Remix like the rest of budibase
This commit is contained in:
Kevin Åberg Kultalahti
GitHub
commit
39f6fe10c8
|
|
@ -81,3 +81,6 @@ typings/
|
|||
|
||||
# Mac files
|
||||
.DS_Store
|
||||
|
||||
# Nova Editor
|
||||
.nova
|
||||
|
|
@ -34,8 +34,5 @@
|
|||
"test:e2e": "lerna run cy:test",
|
||||
"test:e2e:ci": "lerna run cy:ci",
|
||||
"build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@
|
|||
"@budibase/client": "^0.5.3",
|
||||
"@budibase/colorpicker": "^1.0.1",
|
||||
"@budibase/svelte-ag-grid": "^0.0.16",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"@sentry/browser": "5.19.1",
|
||||
"@svelteschool/svelte-forms": "^0.7.0",
|
||||
"britecharts": "^2.16.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<style>
|
||||
body, html {
|
||||
height: 100% !important;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<script context="module">
|
||||
import iconData from "./icons.js"
|
||||
|
||||
const categories = Object.keys(iconData)
|
||||
const icons = Object.keys(iconData).reduce((acc, cat) => [...acc, ...Object.keys(iconData[cat])], [])
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { DropdownMenu, Button, Input } from "@budibase/bbui"
|
||||
import { createEventDispatcher, tick } from "svelte"
|
||||
|
||||
import icons from "./icons.js"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let value = ""
|
||||
|
|
@ -45,12 +51,13 @@
|
|||
"Y",
|
||||
"Z",
|
||||
]
|
||||
|
||||
let buttonAnchor, dropdown
|
||||
let loading = false
|
||||
|
||||
function findIconByTerm(term) {
|
||||
const r = new RegExp(`\^${term}`, "i")
|
||||
return icons.filter(i => r.test(i.label))
|
||||
return icons.filter(i => r.test(i))
|
||||
}
|
||||
|
||||
async function switchLetter(letter) {
|
||||
|
|
@ -62,7 +69,6 @@
|
|||
await tick() //svg icons do not update without tick
|
||||
loading = false
|
||||
}
|
||||
|
||||
async function findIconOnPage() {
|
||||
loading = true
|
||||
const iconIdx = filteredIcons.findIndex(i => i.value === value)
|
||||
|
|
@ -100,7 +106,7 @@
|
|||
loading = false
|
||||
}
|
||||
|
||||
$: displayValue = value ? value.substring(7) : "Pick Icon"
|
||||
$: displayValue = value ? value.substring(3) : "Pick Icon"
|
||||
|
||||
$: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
|
||||
$: pageEndIdx = maxIconsPerPage * currentPage
|
||||
|
|
@ -138,11 +144,11 @@
|
|||
<div class="page-area">
|
||||
<div class="pager">
|
||||
<span on:click={() => pageClick(false)}>
|
||||
<i class="page-btn fas fa-chevron-left" />
|
||||
<i class="page-btn ri-arrow-left-line ri-sm" />
|
||||
</span>
|
||||
<span>{pagerText}</span>
|
||||
<span on:click={() => pageClick(true)}>
|
||||
<i class="page-btn fas fa-chevron-right" />
|
||||
<i class="page-btn ri-arrow-right-line ri-sm" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,12 +159,21 @@
|
|||
{#each pagedIcons as icon}
|
||||
<div
|
||||
class="icon-container"
|
||||
class:selected={value === icon.value}
|
||||
on:click={() => (value = icon.value)}>
|
||||
class:selected={value === `ri-${icon}-fill`}
|
||||
on:click={() => (value = `ri-${icon}-fill`)}>
|
||||
<div class="icon-preview">
|
||||
<i class={`${icon.value} fa-3x`} />
|
||||
<i class={`ri-${icon}-fill ri-xl`} />
|
||||
</div>
|
||||
<div class="icon-label">{icon.label}</div>
|
||||
<div class="icon-label">{icon}-fill</div>
|
||||
</div>
|
||||
<div
|
||||
class="icon-container"
|
||||
class:selected={value === `ri-${icon}-line`}
|
||||
on:click={() => (value = `ri-${icon}-line`)}>
|
||||
<div class="icon-preview">
|
||||
<i class={`ri-${icon}-line ri-xl`} />
|
||||
</div>
|
||||
<div class="icon-label">{icon}-line</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
|
@ -182,13 +197,11 @@
|
|||
padding: 10px 0px 10px 15px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
flex: 0 0 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
|
|
@ -199,13 +212,11 @@
|
|||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.no-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alphabet-area {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
@ -213,44 +224,36 @@
|
|||
padding-right: 15px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
width: 510px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.page-area {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.letter {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.letter:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.letter-selected {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
|
|
@ -258,34 +261,28 @@
|
|||
flex-direction: column;
|
||||
border: var(--border-dark);
|
||||
}
|
||||
|
||||
.icon-container:hover {
|
||||
cursor: pointer;
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-label {
|
||||
flex: 0 0 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.page-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +1 @@
|
|||
import "@fortawesome/fontawesome-free/js/all.js"
|
||||
|
||||
export { default as IconSelect } from "./IconSelect.svelte"
|
||||
|
|
|
|||
|
|
@ -1153,16 +1153,23 @@ export default {
|
|||
label: "Size",
|
||||
key: "size",
|
||||
control: OptionSelect,
|
||||
defaultValue: "fa-lg",
|
||||
defaultValue: "md",
|
||||
options: [
|
||||
{ value: "fa-xs", label: "xs" },
|
||||
{ value: "fa-sm", label: "sm" },
|
||||
{ value: "fa-lg", label: "lg" },
|
||||
{ value: "fa-2x", label: "2x" },
|
||||
{ value: "fa-3x", label: "3x" },
|
||||
{ value: "fa-5x", label: "5x" },
|
||||
{ value: "fa-7x", label: "7x" },
|
||||
{ value: "fa-10x", label: "10x" },
|
||||
{ value: "ri-xxs", label: "xxs" },
|
||||
{ value: "ri-xs", label: "xs" },
|
||||
{ value: "ri-sm", label: "sm" },
|
||||
{ value: "ri-1x", label: "md" },
|
||||
{ value: "ri-lg", label: "lg" },
|
||||
{ value: "ri-xl", label: "xl" },
|
||||
{ value: "ri-2x", label: "2x" },
|
||||
{ value: "ri-3x", label: "3x" },
|
||||
{ value: "ri-4x", label: "4x" },
|
||||
{ value: "ri-5x", label: "5x" },
|
||||
{ value: "ri-6x", label: "6x" },
|
||||
{ value: "ri-7x", label: "7x" },
|
||||
{ value: "ri-8x", label: "8x" },
|
||||
{ value: "ri-9x", label: "9x" },
|
||||
{ value: "ri-10x", label: "10x" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@
|
|||
"icon": "string",
|
||||
"size": {
|
||||
"type": "string",
|
||||
"default": "fa-lg"
|
||||
"default": "md"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
|
|
|
|||
|
|
@ -35,12 +35,12 @@
|
|||
"dependencies": {
|
||||
"@budibase/bbui": "^1.52.4",
|
||||
"@budibase/svelte-ag-grid": "^0.0.16",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"apexcharts": "^3.22.1",
|
||||
"flatpickr": "^4.6.6",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"markdown-it": "^12.0.2",
|
||||
"quill": "^1.3.7",
|
||||
"remixicon": "^2.5.0",
|
||||
"svelte-apexcharts": "^1.0.2",
|
||||
"svelte-flatpickr": "^3.1.0",
|
||||
"turndown": "^7.0.0"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import "@fortawesome/fontawesome-free/js/all.js"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const { styleable } = getContext("sdk")
|
||||
|
|
|
|||
|
|
@ -2362,6 +2362,11 @@ regexp.prototype.flags@^1.2.0:
|
|||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
|
||||
remixicon@^2.5.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
|
||||
integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
|
||||
|
||||
require-relative@^0.8.7:
|
||||
version "0.8.7"
|
||||
resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -107,16 +107,6 @@
|
|||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
|
||||
|
||||
"@fortawesome/fontawesome@^1.1.8":
|
||||
version "1.1.8"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.1.7"
|
||||
|
||||
"@lerna/add@3.14.0":
|
||||
version "3.14.0"
|
||||
resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48"
|
||||
|
|
|
|||
Loading…
Reference in New Issue