MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2021-01-18 16:15:07 +01:00 committed by GitHub
parent 05d54dedba 32517b225c
commit 39f6fe10c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 2576 additions and 6508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -81,3 +81,6 @@ typings/
# Mac files # Mac files
.DS_Store .DS_Store
# Nova Editor
.nova

3
package.json
View File

@ -34,8 +34,5 @@
"test:e2e": "lerna run cy:test", "test:e2e": "lerna run cy:test",
"test:e2e:ci": "lerna run cy:ci", "test:e2e:ci": "lerna run cy:ci",
"build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -" "build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8"
} }
} }

1
packages/builder/package.json
View File

@ -67,7 +67,6 @@
"@budibase/client": "^0.5.3", "@budibase/client": "^0.5.3",
"@budibase/colorpicker": "^1.0.1", "@budibase/colorpicker": "^1.0.1",
"@budibase/svelte-ag-grid": "^0.0.16", "@budibase/svelte-ag-grid": "^0.0.16",
"@fortawesome/fontawesome-free": "^5.14.0",
"@sentry/browser": "5.19.1", "@sentry/browser": "5.19.1",
"@svelteschool/svelte-forms": "^0.7.0", "@svelteschool/svelte-forms": "^0.7.0",
"britecharts": "^2.16.0", "britecharts": "^2.16.0",

1
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <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> <style>
body, html { body, html {
height: 100% !important; height: 100% !important;

57
packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
View File

@ -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> <script>
import { DropdownMenu, Button, Input } from "@budibase/bbui" import { DropdownMenu, Button, Input } from "@budibase/bbui"
import { createEventDispatcher, tick } from "svelte" import { createEventDispatcher, tick } from "svelte"
import icons from "./icons.js"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
export let value = "" export let value = ""
@ -45,12 +51,13 @@
"Y", "Y",
"Z", "Z",
] ]
let buttonAnchor, dropdown let buttonAnchor, dropdown
let loading = false let loading = false
function findIconByTerm(term) { function findIconByTerm(term) {
const r = new RegExp(`\^${term}`, "i") 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) { async function switchLetter(letter) {
@ -62,7 +69,6 @@
await tick() //svg icons do not update without tick await tick() //svg icons do not update without tick
loading = false loading = false
} }
async function findIconOnPage() { async function findIconOnPage() {
loading = true loading = true
const iconIdx = filteredIcons.findIndex(i => i.value === value) const iconIdx = filteredIcons.findIndex(i => i.value === value)
@ -100,7 +106,7 @@
loading = false loading = false
} }
$: displayValue = value ? value.substring(7) : "Pick Icon" $: displayValue = value ? value.substring(3) : "Pick Icon"
$: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage) $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
$: pageEndIdx = maxIconsPerPage * currentPage $: pageEndIdx = maxIconsPerPage * currentPage
@ -138,11 +144,11 @@
<div class="page-area"> <div class="page-area">
<div class="pager"> <div class="pager">
<span on:click={() => pageClick(false)}> <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>
<span>{pagerText}</span> <span>{pagerText}</span>
<span on:click={() => pageClick(true)}> <span on:click={() => pageClick(true)}>
<i class="page-btn fas fa-chevron-right" /> <i class="page-btn ri-arrow-right-line ri-sm" />
</span> </span>
</div> </div>
</div> </div>
@ -153,12 +159,21 @@
{#each pagedIcons as icon} {#each pagedIcons as icon}
<div <div
class="icon-container" class="icon-container"
class:selected={value === icon.value} class:selected={value === `ri-${icon}-fill`}
on:click={() => (value = icon.value)}> on:click={() => (value = `ri-${icon}-fill`)}>
<div class="icon-preview"> <div class="icon-preview">
<i class={`${icon.value} fa-3x`} /> <i class={`ri-${icon}-fill ri-xl`} />
</div> </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> </div>
{/each} {/each}
{/if} {/if}
@ -182,13 +197,11 @@
padding: 10px 0px 10px 15px; padding: 10px 0px 10px 15px;
overflow-x: hidden; overflow-x: hidden;
} }
.search-area { .search-area {
flex: 0 0 80px; flex: 0 0 80px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.icon-area { .icon-area {
flex: 1; flex: 1;
display: grid; display: grid;
@ -199,13 +212,11 @@
overflow-x: hidden; overflow-x: hidden;
padding-right: 10px; padding-right: 10px;
} }
.no-icons { .no-icons {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.alphabet-area { .alphabet-area {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -213,44 +224,36 @@
padding-right: 15px; padding-right: 15px;
justify-content: space-around; justify-content: space-around;
} }
.loading-container { .loading-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.search-input { .search-input {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
width: 100%; width: 100%;
padding-right: 15px; padding-right: 15px;
} }
.input-wrapper { .input-wrapper {
width: 510px; width: 510px;
margin-right: 5px; margin-right: 5px;
} }
.page-area { .page-area {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.letter { .letter {
color: var(--blue); color: var(--blue);
} }
.letter:hover { .letter:hover {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
.letter-selected { .letter-selected {
text-decoration: underline; text-decoration: underline;
} }
.icon-container { .icon-container {
height: 100px; height: 100px;
display: flex; display: flex;
@ -258,34 +261,28 @@
flex-direction: column; flex-direction: column;
border: var(--border-dark); border: var(--border-dark);
} }
.icon-container:hover { .icon-container:hover {
cursor: pointer; cursor: pointer;
background: var(--grey-2); background: var(--grey-2);
} }
.selected { .selected {
background: var(--grey-3); background: var(--grey-3);
} }
.icon-preview { .icon-preview {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.icon-label { .icon-label {
flex: 0 0 20px; flex: 0 0 20px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
} }
.page-btn { .page-btn {
color: var(--blue); color: var(--blue);
} }
.page-btn:hover { .page-btn:hover {
cursor: pointer; cursor: pointer;
} }
</style> </style>

8972
packages/builder/src/components/userInterface/IconSelect/icons.js
View File

File diff suppressed because it is too large Load Diff

2
packages/builder/src/components/userInterface/IconSelect/index.js
View File

@ -1,3 +1 @@
import "@fortawesome/fontawesome-free/js/all.js"
export { default as IconSelect } from "./IconSelect.svelte" export { default as IconSelect } from "./IconSelect.svelte"

25
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -1153,16 +1153,23 @@ export default {
label: "Size", label: "Size",
key: "size", key: "size",
control: OptionSelect, control: OptionSelect,
defaultValue: "fa-lg", defaultValue: "md",
options: [ options: [
{ value: "fa-xs", label: "xs" }, { value: "ri-xxs", label: "xxs" },
{ value: "fa-sm", label: "sm" }, { value: "ri-xs", label: "xs" },
{ value: "fa-lg", label: "lg" }, { value: "ri-sm", label: "sm" },
{ value: "fa-2x", label: "2x" }, { value: "ri-1x", label: "md" },
{ value: "fa-3x", label: "3x" }, { value: "ri-lg", label: "lg" },
{ value: "fa-5x", label: "5x" }, { value: "ri-xl", label: "xl" },
{ value: "fa-7x", label: "7x" }, { value: "ri-2x", label: "2x" },
{ value: "fa-10x", label: "10x" }, { 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" },
], ],
}, },
{ {

2
packages/standard-components/components.json
View File

@ -133,7 +133,7 @@
"icon": "string", "icon": "string",
"size": { "size": {
"type": "string", "type": "string",
"default": "fa-lg" "default": "md"
}, },
"color": { "color": {
"type": "string", "type": "string",

2
packages/standard-components/package.json
View File

@ -35,12 +35,12 @@
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.52.4", "@budibase/bbui": "^1.52.4",
"@budibase/svelte-ag-grid": "^0.0.16", "@budibase/svelte-ag-grid": "^0.0.16",
"@fortawesome/fontawesome-free": "^5.14.0",
"apexcharts": "^3.22.1", "apexcharts": "^3.22.1",
"flatpickr": "^4.6.6", "flatpickr": "^4.6.6",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"markdown-it": "^12.0.2", "markdown-it": "^12.0.2",
"quill": "^1.3.7", "quill": "^1.3.7",
"remixicon": "^2.5.0",
"svelte-apexcharts": "^1.0.2", "svelte-apexcharts": "^1.0.2",
"svelte-flatpickr": "^3.1.0", "svelte-flatpickr": "^3.1.0",
"turndown": "^7.0.0" "turndown": "^7.0.0"

1
packages/standard-components/src/Icon.svelte
View File

@ -1,5 +1,4 @@
<script> <script>
import "@fortawesome/fontawesome-free/js/all.js"
import { getContext } from "svelte" import { getContext } from "svelte"
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")

5
packages/standard-components/yarn.lock
View File

@ -2362,6 +2362,11 @@ regexp.prototype.flags@^1.2.0:
define-properties "^1.1.3" define-properties "^1.1.3"
es-abstract "^1.17.0-next.1" 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: require-relative@^0.8.7:
version "0.8.7" version "0.8.7"
resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de" resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"

10
yarn.lock
View File

@ -107,16 +107,6 @@
lodash "^4.17.19" lodash "^4.17.19"
to-fast-properties "^2.0.0" 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": "@lerna/add@3.14.0":
version "3.14.0" version "3.14.0"
resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48" resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48"