rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to matierial-symbols

Browse source 
material-design-icons was outdated and missing symbols. I've now switched, as recommended in the issue.

/closes #254
This commit is contained in:
Richard Bowman 2024-01-03 20:51:32 +00:00
parent 35db80121a
commit 0083231b85
14 changed files with 196 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

166
webapp/package-lock.json generated
View file

@ -11,6 +11,7 @@
"dependencies": {
"imjoy-core": "^0.13",
"material-design-icons": "^3.0",
"material-symbols": "^0.14.3",
"mousetrap": "^1.6.5",
"vue-observe-visibility": "^0.4"
},
@ -2147,25 +2148,73 @@
"string.prototype.padstart": "^3.0.0"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"node_modules/@vue/compiler-core": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.4.tgz",
"integrity": "sha512-U5AdCN+6skzh2bSJrkMj2KZsVkUpgK8/XlxjSRYQZhNPcvt9/kmgIMpFEiTyK+Dz5E1J+8o8//BEIX+bakgVSw==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"source-map": "^0.6.1"
"@babel/parser": "^7.23.6",
"@vue/shared": "3.4.4",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-core/node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"optional": true,
"peer": true,
"engines": {
"node": ">=0.12"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.4.tgz",
"integrity": "sha512-iSwkdDULCN+Vr8z6uwdlL044GJ/nUmECxP9vu7MzEs4Qma0FwDLYvnvRcyO0ZITuu3Os4FptGUDnhi1kOLSaGw==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@vue/compiler-core": "3.4.4",
"@vue/shared": "3.4.4"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.4.tgz",
"integrity": "sha512-OTFcU6vUxUNHBcarzkp4g6d25nvcmDvFDzPRvSrIsByFFPRYN+y3b+j9HxYwt6nlWvGyFCe0roeJdJlfYxbCBg==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@babel/parser": "^7.23.6",
"@vue/compiler-core": "3.4.4",
"@vue/compiler-dom": "3.4.4",
"@vue/compiler-ssr": "3.4.4",
"@vue/shared": "3.4.4",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5",
"postcss": "^8.4.32",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-sfc/node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
"dev": true,
"optional": true,
"peer": true
},
"node_modules/@vue/compiler-sfc/node_modules/postcss": {
"version": "8.4.32",
@ -2186,6 +2235,8 @@
"url": "https://github.com/sponsors/ai"
}
],
"optional": true,
"peer": true,
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
@ -2195,6 +2246,18 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.4.tgz",
"integrity": "sha512-1DU9DflSSQlx/M61GEBN+NbT/anUki2ooDo9IXfTckCeKA/2IKNhY8KbG3x6zkd3KGrxzteC7de6QL88vEb41Q==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.4.4",
"@vue/shared": "3.4.4"
}
},
"node_modules/@vue/component-compiler-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@ -2263,6 +2326,14 @@
"webpack": ">=4.0.0"
}
},
"node_modules/@vue/shared": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.4.tgz",
"integrity": "sha512-abSgiVRhfjfl3JALR/cSuBl74hGJ3SePgf1mKzodf1eMWLwHZbfEGxT2cNJSsNiw44jEgrO7bNkhchaWA7RwNw==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/@vue/web-component-wrapper": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@ -6304,6 +6375,14 @@
"node": ">=4.0"
}
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/esutils": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@ -9471,6 +9550,20 @@
"lz-string": "bin/bin.js"
}
},
"node_modules/magic-string": {
"version": "0.30.5",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
"integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
"engines": {
"node": ">=12"
}
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -9512,6 +9605,11 @@
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
"integrity": "sha512-t19Z+QZBwSZulxptEu05kIm+UyfIdJY1JDwI+nx02j269m6W414whiQz9qfvQIiLrdx71RQv+T48nHhuQXOCIQ=="
},
"node_modules/material-symbols": {
"version": "0.14.3",
"resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.14.3.tgz",
"integrity": "sha512-oys7SbIaPz1sfUCMVYlEE5HJGzh0GMoUK0jCGH7hAqO9iW/b9dnSAeYgOQp2s1ifQP5Y+Q4+Fcujay/ASzvy2w=="
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -15195,6 +15293,54 @@
"vue": "^2.6.10"
}
},
"node_modules/vue/node_modules/@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"source-map": "^0.6.1"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
}
},
"node_modules/vue/node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
},
"node_modules/vue/node_modules/postcss": {
"version": "8.4.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/vuejs-paginate": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",

1
webapp/package.json
View file

@ -15,6 +15,7 @@
"dependencies": {
"imjoy-core": "^0.13",
"material-design-icons": "^3.0",
"material-symbols": "^0.14.3",
"mousetrap": "^1.6.5",
"vue-observe-visibility": "^0.4"
},

14
webapp/src/components/appContent.vue
View file

@ -33,9 +33,9 @@
style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
:src="item.iconURL"
/>
<i v-if="!item.iconURL" class="material-icons">
<span v-if="!item.iconURL" class="material-symbols-outlined">
{{ item.icon }}
</i>
</span>
</tabIcon>
<!-- Add a divider if item.divide is true -->
<hr v-if="item.divide" :key="'tab-divider-' + index" />
@ -52,7 +52,9 @@
:click-callback="updatePlugins"
@set-tab="setTab"
>
<i class="material-icons">{{ plugin.icon || "extension" }}</i>
<span class="material-symbols-outlined">{{
plugin.icon || "extension"
}}</span>
</tabIcon>
<tabIcon
@ -69,9 +71,9 @@
style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
:src="imjoyTab.iconURL"
/>
<i v-if="!imjoyTab.iconURL" class="material-icons">
<span v-if="!imjoyTab.iconURL" class="material-symbols-outlined">
{{ imjoyTab.iconName || "extension" }}
</i>
</span>
</tabIcon>
<hr id="extension-tab-divider" />
@ -88,7 +90,7 @@
:class="item.class"
@set-tab="setTab"
>
<i class="material-icons">{{ item.icon }}</i>
<span class="material-symbols-outlined">{{ item.icon }}</span>
</tabIcon>
<!-- Add a divider if item.divide is true -->
<hr v-if="item.divide" :key="'tab-divider-' + index" />

4
webapp/src/components/fieldComponents/keyvalList.vue
View file

@ -32,7 +32,7 @@
href="#"
class="uk-icon uk-margin-left"
@click="handleMetadataSubmit()"
><i class="material-icons">add_circle</i></a
><span class="material-symbols-outlined">add_circle</span></a
>
</div>
</form>
@ -51,7 +51,7 @@
/>
</div>
<a href="#" class="uk-icon uk-width-auto" @click="delMetadataKey(key)"
><i class="material-icons">delete</i></a
><span class="material-symbols-outlined">delete</span></a
>
</div>
</div>

4
webapp/src/components/fieldComponents/tagList.vue
View file

@ -5,7 +5,7 @@
<div class="uk-margin-remove-top uk-width-expand">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon"
><i class="material-icons">label</i></span
><span class="material-symbols-outlined">label</span></span
>
<input
v-model="newTag"
@ -18,7 +18,7 @@
</div>
<a href="#" class="uk-icon uk-margin-left" @click="handleTagSubmit()"
><i class="material-icons">add_circle</i></a
><span class="material-symbols-outlined">add_circle</span></a
>
</div>
</form>

6
webapp/src/components/labThingsComponents/propertyControl.vue
View file

@ -11,7 +11,7 @@
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
<span class="material-symbols-outlined">refresh</span>
</a>
</div>
<div v-if="dataType == 'number_array'" class="input-and-buttons-container">
@ -26,7 +26,7 @@
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
<span class="material-symbols-outlined">refresh</span>
</a>
</div>
<div v-if="dataType == 'number_object'" class="input-and-buttons-container">
@ -41,7 +41,7 @@
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
<span class="material-symbols-outlined">refresh</span>
</a>
</div>
<div v-if="dataType == 'other'" class="input-and-buttons-container">

4
webapp/src/components/loadingContent.vue
View file

@ -6,7 +6,9 @@
uk-spinner="ratio: 3"
></div>
<div v-if="$store.state.waiting" class="uk-align-center">Loading...</div>
<i class="material-icons uk-align-center error-icon">error_outline</i>
<span class="material-symbols-outlined uk-align-center error-icon"
>error_outline</span
>
<div v-if="$store.state.error" class="uk-align-center">
{{ $store.state.error }}
</div>

2
webapp/src/components/pluginComponents/JsonForm.vue
View file

@ -5,7 +5,7 @@
{{ name }}
</div>
<a href="#" class="uk-icon uk-width-auto" @click="updateForm()"
><i class="material-icons">cached</i></a
><span class="material-symbols-outlined">cached</span></a
>
</div>

9
webapp/src/components/tabContentComponents/galleryComponents/captureCard.vue
View file

@ -26,7 +26,7 @@
</div>
<div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
<a href="#" class="uk-icon" @click="delCaptureConfirm()">
<i class="material-icons">delete</i>
<span class="material-symbols-outlined">delete</span>
</a>
</div>
</div>
@ -58,7 +58,8 @@
<ul class="uk-nav uk-dropdown-nav">
<li v-for="item in openInImjoyMenuItems" :key="item.name">
<a href="#" @click="item.callback(name, imgURL)"
><i class="material-icons">launch</i>{{ item.title }}</a
><span class="material-symbols-outlined">launch</span
>{{ item.title }}</a
>
</li>
</ul>
@ -136,7 +137,9 @@
@submit.prevent="handleTagSubmit"
>
<div class="uk-inline">
<span class="uk-form-icon"><i class="material-icons">label</i></span>
<span class="uk-form-icon"
><span class="material-symbols-outlined">label</span></span
>
<input
v-model="newTag"
autofocus

5
webapp/src/components/tabContentComponents/galleryComponents/scanCard.vue
View file

@ -27,7 +27,7 @@
</div>
<div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
<a href="#" class="uk-icon" @click="delAllConfirm()">
<i class="material-icons">delete</i>
<span class="material-symbols-outlined">delete</span>
</a>
</div>
</div>
@ -57,7 +57,8 @@
href="#"
style="color:black"
@click="item.callback(name, allURLs)"
><i class="material-icons">launch</i>{{ item.title }}</a
><span class="material-symbols-outlined">launch</span
>{{ item.title }}</a
>
</li>
</ul>

6
webapp/src/components/tabContentComponents/galleryContent.vue
View file

@ -12,12 +12,12 @@
<ul class="uk-navbar-nav">
<li :class="[sortDescending ? 'uk-active' : '']">
<a class="uk-icon" href="#" @click="sortDescending = true">
<i class="material-icons">keyboard_arrow_down</i>
<span class="material-symbols-outlined">keyboard_arrow_down</span>
</a>
</li>
<li :class="[!sortDescending ? 'uk-active' : '']">
<a class="uk-icon" href="#" @click="sortDescending = false">
<i class="material-icons">keyboard_arrow_up</i>
<span class="material-symbols-outlined">keyboard_arrow_up</span>
</a>
</li>
<li>
@ -85,7 +85,7 @@
class="gallery-folder-heading uk-flex uk-flex-middle"
>
<a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
<i class="material-icons">arrow_back</i>
<span class="material-symbols-outlined">arrow_back</span>
</a>
<div class="uk-margin-left">
<h3 class="uk-margin-remove uk-margin-left">

8
webapp/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue
View file

@ -13,9 +13,13 @@
:alt="name + ' icon'"
uk-img
/>
<i v-if="!iconURL" class="material-icons" style="font-size:50px">
<span
v-if="!iconURL"
class="material-symbols-outlined"
style="font-size:50px"
>
{{ iconName }}
</i>
</span>
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom">{{ name }}</h3>

2
webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
View file

@ -104,7 +104,7 @@
@keyup.enter="startMoveTask"
/>
<a class="button-next-to-input" @click="updatePosition">
<i class="material-icons">refresh</i>
<span class="material-symbols-outlined">refresh</span>
</a>
</div>
<p>

2
webapp/src/main.js
View file

@ -10,7 +10,7 @@ import VueObserveVisibility from "vue-observe-visibility";
require("vue-tour/dist/vue-tour.css");
// Import MD icons
import "material-design-icons/iconfont/material-icons.css";
import "material-symbols/outlined.css";
// UIKit overrides
UIkit.mixin(