This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch airavata-3453 in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 2ca4a789c9344acfa87ad35a582523e7d77d95f1 Author: Marcus Christie <[email protected]> AuthorDate: Thu May 13 17:18:48 2021 -0400 AIRAVATA-3453 Add icons --- django_airavata/apps/workspace/package.json | 3 ++ .../js/web-components/QueueSettingsEditor.vue | 47 +++++++++++++++++----- django_airavata/apps/workspace/yarn.lock | 24 +++++++++++ 3 files changed, 63 insertions(+), 11 deletions(-) diff --git a/django_airavata/apps/workspace/package.json b/django_airavata/apps/workspace/package.json index 883c65d..d351fbb 100644 --- a/django_airavata/apps/workspace/package.json +++ b/django_airavata/apps/workspace/package.json @@ -17,6 +17,9 @@ "wc:watch": "WC_MODE='true' vue-cli-service build --target wc --inline-vue --name adpf './static/django_airavata_workspace/js/web-components/*.vue' --dest ./static/django_airavata_workspace/wc --watch" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/vue-fontawesome": "^2.0.2", "bootstrap": "^4.3.1", "bootstrap-vue": "2.0.0-rc.26", "codemirror": "5.52.2", diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue index 6f04b3d..0db908d 100644 --- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue @@ -62,7 +62,7 @@ > </b-form-input> <div slot="description"> - <i class="fa fa-info-circle" aria-hidden="true"></i> + <font-awesome-icon :icon="infoIcon" /> Max Allowed Nodes = {{ maxAllowedNodes }} </div> </b-form-group> @@ -78,7 +78,7 @@ > </b-form-input> <div slot="description"> - <i class="fa fa-info-circle" aria-hidden="true"></i> + <font-awesome-icon :icon="infoIcon" /> Max Allowed Cores = {{ maxAllowedCores }} </div> </b-form-group> @@ -96,7 +96,7 @@ </b-form-input> </b-input-group> <div slot="description"> - <i class="fa fa-info-circle" aria-hidden="true"></i> + <font-awesome-icon :icon="infoIcon" /> Max Allowed Wall Time = {{ maxAllowedWalltime }} minutes </div> </b-form-group> @@ -117,18 +117,14 @@ </b-form-input> </b-input-group> <div slot="description"> - <i class="fa fa-info-circle" aria-hidden="true"></i> + <font-awesome-icon :icon="infoIcon" /> Max Physical Memory = {{ maxMemory }} MB </div> </b-form-group> <div> - <a - class="text-secondary action-link" - href="#" - @click.prevent="showConfiguration = false" - > - <i class="fa fa-times text-secondary" aria-hidden="true"></i> - Hide Settings</a + <b-link class="text-secondary" @click="showConfiguration = false"> + <font-awesome-icon :icon="closeIcon" /> + Hide Settings</b-link > </div> </div> @@ -141,6 +137,13 @@ import Vue from "vue"; import { BootstrapVue } from "bootstrap-vue"; Vue.use(BootstrapVue); +import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; +import { config, dom } from "@fortawesome/fontawesome-svg-core"; +import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons"; + +// Make sure you tell Font Awesome to skip auto-inserting CSS into the <head> +config.autoAddCss = false; + export default { props: { value: { @@ -168,6 +171,22 @@ export default { required: true, }, }, + components: { + FontAwesomeIcon, + }, + mounted() { + // Add font awesome styles + // https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper + const { shadowRoot } = this.$parent.$options; + const id = "fa-styles"; + + if (!shadowRoot.getElementById(`${id}`)) { + const faStyles = document.createElement("style"); + faStyles.setAttribute("id", id); + faStyles.textContent = dom.css(); + shadowRoot.appendChild(faStyles); + } + }, data() { return { computationalResourceScheduling: this.cloneValue(), @@ -201,6 +220,12 @@ export default { queueDescription() { return this.queue ? this.queue.queueDescription : null; }, + closeIcon() { + return faTimes; + }, + infoIcon() { + return faInfoCircle; + } }, methods: { cloneValue() { diff --git a/django_airavata/apps/workspace/yarn.lock b/django_airavata/apps/workspace/yarn.lock index 2407517..f8e3826 100644 --- a/django_airavata/apps/workspace/yarn.lock +++ b/django_airavata/apps/workspace/yarn.lock @@ -682,11 +682,35 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@fortawesome/fontawesome-common-types@^0.2.35": + version "0.2.35" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"; + integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw== + "@fortawesome/fontawesome-free@^5.6.3": version "5.11.2" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz#8644bc25b19475779a7b7c1fc104bc0a794f4465"; integrity sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ== +"@fortawesome/fontawesome-svg-core@^1.2.35": + version "1.2.35" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"; + integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + +"@fortawesome/free-solid-svg-icons@^5.15.3": + version "5.15.3" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"; + integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + +"@fortawesome/vue-fontawesome@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.2.tgz#5b86cd2fb7b4c17e5dede722c1c2855c97eceaea"; + integrity sha512-ecpKSBUWXsxRJVi/dbOds4tkKwEcBQ1JSDZFzE2jTFpF8xIh3OgTX8POIor6bOltjibr3cdEyvnDjecMwUmxhQ== + "@hapi/[email protected]": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5";
