diff --git a/src/assets/index.js b/src/assets/index.js index 72d8043..13cbcfd 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -1349,19 +1349,100 @@ }) // 选择图标 - $("#options").on('click', '#icon', async function () { - var options = { - buttonLabel: '选择', - properties: ['openFile'] - } - var file = getFileInfo({ type: 'dialog', argvs: options, readfile: false }) - if (file) { - $("#iconame").val(file.name); - let src = await getBase64Ico(file.path); - $("#icon").attr('src', src); - } + $("#options").on('click', '#icon', function () { + showChangeIconWindow() }) + // 从 icons8 选择图标 + let getIcons8Icon = () => { + let showIcon = icon => { + return $(` ${icon.name}`) + } + let showItems = item => { + if (item.loading) return item.text + return showIcon(item) + } + let showSelection = selection => { + if (!selection.commonName) return selection.text + $('#networkImg').val(`https://img.icons8.com/color/1x/${selection.commonName}.png`) + return showIcon(selection) + } + $('#icons8').select2({ + dataType: 'json', + width: '80%', + delay: 250, + ajax: { + url: 'https://search.icons8.com/api/iconsets/v5/search', + data: function (params) { + return { + term: params.term, + offset: (params.page - 1) * 10 || 0, + platform: 'color', + amount: 10, + token: 'JpOyWT5TW8yYThBIk1fCbsNDd3ISSChSD5vPgCON' + } + }, + processResults: function (data, params) { + return { + results: data.icons, + pagination: { + more: (data.parameters.offset + 10) < data.parameters.countAll + } + }; + }, + cache: true + }, + placeholder: '搜索icons8图标', + minimumInputLength: 1, + templateResult: showItems, + templateSelection: showSelection + }) + } + + let getRemoteImg = async imgUrl => { + try { + let imgInfo = getFileInfo({ type: 'file', argvs: imgUrl, readfile: false }) + let imgPath = getQuickCommandScriptFile(imgInfo.ext) + await quickcommand.downloadFile(imgUrl, imgPath) + $("#iconame").val(imgInfo.name); + let src = await getBase64Ico(imgPath); + $("#icon").attr('src', src); + } catch (error) { + quickcommand.showMessageBox('图片地址有误!', 'error') + } + } + + let showChangeIconWindow = () => { + var html = ` + + + + ` + Swal.fire({ + title: "设置图标", + onBeforeOpen: () => { + getIcons8Icon() + $('#localImg').click(async () => { + var options = { buttonLabel: '选择', properties: ['openFile'] } + var file = getFileInfo({ type: 'dialog', argvs: options, readfile: false }) + if (file) { + $("#iconame").val(file.name); + let src = await getBase64Ico(file.path); + $("#icon").attr('src', src); + Swal.close() + } + }) + }, + html: html, + showCancelButton: true, + preConfirm: async () => { + let imgUrl = $('#networkImg').val() + if (imgUrl) await getRemoteImg(imgUrl) + else quickcommand.showMessageBox('没有输入图标地址', 'warning') + } + }) + } + let SaveCurrentCommand = async () => { if ($('#tags').is(":parent")) { var type = $('#type').val(), diff --git a/src/assets/style/options.css b/src/assets/style/options.css index dee57e8..e25e53d 100644 --- a/src/assets/style/options.css +++ b/src/assets/style/options.css @@ -831,6 +831,25 @@ li.CodeMirror-hint { outline: none } +.swal2-shown .select2-dropdown { + z-index: 1070; +} + +.swal2-content .select2-container .select2-selection--single, +.swal2-content .select2-container .select2-selection--single .select2-selection__arrow { + height: 3rem; +} + + +.swal2-content .select2-container .select2-selection--single .select2-selection__rendered { + line-height: 3rem; +} + +.swal2-content img.icon8s { + vertical-align: middle; + max-width: 35px; +} + /*select2*/ /*quicktextarea*/ @@ -866,7 +885,7 @@ li.CodeMirror-hint { outline: none; } -#quicktextarea .circleButton{ +#quicktextarea .circleButton { right: 20px; bottom: 20px; height: 40px; @@ -874,7 +893,7 @@ li.CodeMirror-hint { background: #2196F3; } -#quickselect .circleButton{ +#quickselect .circleButton { right: 10px; bottom: 10px; height: 25px; @@ -890,7 +909,7 @@ li.CodeMirror-hint { /*quicktextarea*/ /*搜索框*/ -#out > #outputSearch { +#out>#outputSearch { position: fixed; opacity: 0; top: -30px; @@ -900,7 +919,7 @@ li.CodeMirror-hint { box-shadow: 2px 1px 3px 0px black; } -#out > #outputSearch input { +#out>#outputSearch input { height: 20px; width: 220px; margin-right: 5px; @@ -909,11 +928,11 @@ li.CodeMirror-hint { outline: none; } -#out > #outputSearch input:focus { +#out>#outputSearch input:focus { border: 1px solid #03A9F4; } -#out > #outputSearch > kbd { +#out>#outputSearch>kbd { cursor: pointer; margin: 5px; user-select: none;