This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 732d80618536927c942647521dc4d759fa564643 Author: Marcus Christie <[email protected]> AuthorDate: Wed Sep 5 10:57:11 2018 -0400 AIRAVATA-2876 Dragging improvements --- django_airavata/apps/admin/package-lock.json | 26 +++++++ django_airavata/apps/admin/package.json | 3 + .../applications/ApplicationInputFieldEditor.vue | 81 ++++++++++++---------- .../applications/ApplicationInterfaceEditor.vue | 16 ++++- .../admin/static/django_airavata_admin/src/main.js | 8 +++ 5 files changed, 95 insertions(+), 39 deletions(-) diff --git a/django_airavata/apps/admin/package-lock.json b/django_airavata/apps/admin/package-lock.json index 2a80427..725c86a 100644 --- a/django_airavata/apps/admin/package-lock.json +++ b/django_airavata/apps/admin/package-lock.json @@ -4,6 +4,32 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.4.tgz";, + "integrity": "sha512-0qbIVm+MzkxMwKDx8V0C7w/6Nk+ZfBseOn2R1YK0f2DQP5pBcOQbu9NmaVaLzbJK6VJb1TuyTf0ZF97rc6iWJQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.4.tgz";, + "integrity": "sha512-oGtnwcdhJomoDxbJcy6S0JxK6ItDhJLNOujm+qILPqajJ2a0P/YRomzBbixFjAPquCoyPUlA9g9ejA22P7TKNA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.4" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.3.1.tgz";, + "integrity": "sha512-NkiLBFoiHtJ89cPJdM+W6cLvTVKkLh3j9t3MxkXyip0ncdD3lhCunSuzvFcrTHWeETEyoClGd8ZIWrr3HFZ3BA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.4" + } + }, + "@fortawesome/vue-fontawesome": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.1.tgz";, + "integrity": "sha512-dvPpA9eI18bWr3E+c0JvCYD6xl/keEj0ICTMShUPbxsGkd6PdFU9xYjqA8qE8ahsY+xhbQzZt/k1FKlpMGaRXA==" + }, "@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz";, diff --git a/django_airavata/apps/admin/package.json b/django_airavata/apps/admin/package.json index ccae111..dc6a771 100644 --- a/django_airavata/apps/admin/package.json +++ b/django_airavata/apps/admin/package.json @@ -11,6 +11,9 @@ "watch": "cross-env WEBPACK_WATCH=true node static/django_airavata_admin/build/build.js" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.4", + "@fortawesome/free-solid-svg-icons": "^5.3.1", + "@fortawesome/vue-fontawesome": "^0.1.1", "bootstrap": "^4.0.0", "bootstrap-vue": "^2.0.0-rc.11", "django-airavata-api": "file:../api", diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue index 1694345..0730ae4 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue @@ -1,51 +1,57 @@ <template> <b-card> <div class="d-flex align-items-center" slot="header"> + <div class="drag-handle mr-1 text-muted"> + <font-awesome-icon icon="grip-vertical" /> + <span class="sr-only">Drag handle for reordering</span> + </div> <div class="mr-auto">Input Field: {{ data.name }}</div> <b-link class="text-secondary" @click="deleteApplicationInput"> <i class="fa fa-trash"></i> <span class="sr-only">Delete</span> </b-link> </div> - <b-form-group label="Name" :label-for="id+'-name'"> - <b-form-input :id="id+'-name'" type="text" v-model="data.name" ref="nameInput" required></b-form-input> - </b-form-group> - <b-form-group label="Initial Value" :label-for="id+'-value'"> - <b-form-input :id="id+'-value'" type="text" v-model="data.value"></b-form-input> - </b-form-group> - <b-form-group label="Type" :label-for="id+'-type'"> - <b-form-select :id="id+'-type'" v-model="data.type" :options="inputTypeOptions" /> - </b-form-group> - <b-form-group label="Application Argument" :label-for="id+'-argument'"> - <b-form-input :id="id+'-argument'" type="text" v-model="data.applicationArgument"></b-form-input> - </b-form-group> - <div class="d-flex"> - <b-form-group class="flex-fill" label="Standard Input" :label-for="id+'-standard-input'"> - <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput" :options="trueFalseOptions"> - </b-form-radio-group> + <b-collapse :visible="!collapse"> + <b-form-group label="Name" :label-for="id+'-name'"> + <b-form-input :id="id+'-name'" type="text" v-model="data.name" ref="nameInput" required></b-form-input> </b-form-group> - <b-form-group class="flex-fill" label="Read Only" :label-for="id+'-read-only'"> - <b-form-radio-group :id="id+'-read-only'" v-model="data.isReadOnly" :options="trueFalseOptions"> - </b-form-radio-group> + <b-form-group label="Initial Value" :label-for="id+'-value'"> + <b-form-input :id="id+'-value'" type="text" v-model="data.value"></b-form-input> </b-form-group> - </div> - <b-form-group label="User Friendly Description" :label-for="id+'-user-friendly-description'"> - <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription" :rows="3" /> - </b-form-group> - <div class="d-flex"> - <b-form-group class="flex-fill" label="Data is staged" :label-for="id+'-data-staged'"> - <b-form-radio-group :id="id+'-data-staged'" v-model="data.dataStaged" :options="trueFalseOptions"> - </b-form-radio-group> + <b-form-group label="Type" :label-for="id+'-type'"> + <b-form-select :id="id+'-type'" v-model="data.type" :options="inputTypeOptions" /> + </b-form-group> + <b-form-group label="Application Argument" :label-for="id+'-argument'"> + <b-form-input :id="id+'-argument'" type="text" v-model="data.applicationArgument"></b-form-input> </b-form-group> - <b-form-group class="flex-fill" label="Required" :label-for="id+'-required'"> - <b-form-radio-group :id="id+'-required'" v-model="data.isRequired" :options="trueFalseOptions"> + <div class="d-flex"> + <b-form-group class="flex-fill" label="Standard Input" :label-for="id+'-standard-input'"> + <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput" :options="trueFalseOptions"> + </b-form-radio-group> + </b-form-group> + <b-form-group class="flex-fill" label="Read Only" :label-for="id+'-read-only'"> + <b-form-radio-group :id="id+'-read-only'" v-model="data.isReadOnly" :options="trueFalseOptions"> + </b-form-radio-group> + </b-form-group> + </div> + <b-form-group label="User Friendly Description" :label-for="id+'-user-friendly-description'"> + <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription" :rows="3" /> + </b-form-group> + <div class="d-flex"> + <b-form-group class="flex-fill" label="Data is staged" :label-for="id+'-data-staged'"> + <b-form-radio-group :id="id+'-data-staged'" v-model="data.dataStaged" :options="trueFalseOptions"> + </b-form-radio-group> + </b-form-group> + <b-form-group class="flex-fill" label="Required" :label-for="id+'-required'"> + <b-form-radio-group :id="id+'-required'" v-model="data.isRequired" :options="trueFalseOptions"> + </b-form-radio-group> + </b-form-group> + </div> + <b-form-group class="flex-fill" label="Required on Command Line" :label-for="id+'-required-command-line'"> + <b-form-radio-group :id="id+'-required-command-line'" v-model="data.requiredToAddedToCommandLine" :options="trueFalseOptions"> </b-form-radio-group> </b-form-group> - </div> - <b-form-group class="flex-fill" label="Required on Command Line" :label-for="id+'-required-command-line'"> - <b-form-radio-group :id="id+'-required-command-line'" v-model="data.requiredToAddedToCommandLine" :options="trueFalseOptions"> - </b-form-radio-group> - </b-form-group> + </b-collapse> </b-card> </template> @@ -66,6 +72,9 @@ export default { // Whether to put focus on the name field when mounting component focus: { type: Boolean + }, + collapse: { + type: Boolean } }, computed: { @@ -102,8 +111,8 @@ export default { </script> <style scoped> -.flex-fill { - flex: 1; +.drag-handle { + cursor: move; } </style> diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue index 4a880be..8d2789c 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue @@ -26,8 +26,8 @@ <h1 class="h5 mb-4"> Input Fields </h1> - <draggable v-model="data.applicationInputs"> - <application-input-field-editor v-for="(input, index) in data.applicationInputs" :value="input" :key="index" :id="'app-input-'+index" :focus="index === focusApplicationInputIndex" @input="updatedInput($event, index)" @delete="deleteInput($event, index)" /> + <draggable v-model="data.applicationInputs" :options="dragOptions" @start="onDragStart" @end="onDragEnd"> + <application-input-field-editor v-for="(input, index) in data.applicationInputs" :value="input" :key="index" :id="'app-input-'+index" :focus="index === focusApplicationInputIndex" :collapse="collapseApplicationInputs" @input="updatedInput($event, index)" @delete="deleteInput($event, index)" /> </draggable> </div> </div> @@ -77,7 +77,11 @@ export default { }, data() { return { - focusApplicationInputIndex: null + focusApplicationInputIndex: null, + dragOptions: { + handle: ".drag-handle" + }, + collapseApplicationInputs: false }; }, methods: { @@ -97,6 +101,12 @@ export default { }, deleteInput(e, index) { this.data.applicationInputs.splice(index, 1); + }, + onDragStart() { + this.collapseApplicationInputs = true; + }, + onDragEnd() { + this.collapseApplicationInputs = false; } } }; diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/main.js b/django_airavata/apps/admin/static/django_airavata_admin/src/main.js index 640b5a9..3c49b77 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/main.js +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/main.js @@ -11,6 +11,14 @@ import BootstrapVue from 'bootstrap-vue' // TODO: load the latest bootstrap css globally import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' +import { library as faLibrary } from '@fortawesome/fontawesome-svg-core' +import { faGripVertical } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' + +faLibrary.add(faGripVertical) + +Vue.component('font-awesome-icon', FontAwesomeIcon) + import { components, errors } from 'django-airavata-common-ui'
