AIRAVATA-3453 Add icons
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 { 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 @@
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 @@
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 2d5c8b1..605cf36 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/address@2.x.x":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
