xicon/xtr-improved-frontend
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[TASK] #3 Change overflowing spinner - [FIX] Reload - set active bug

Browse Source
This commit is contained in:
XiCoN-Luan-
2019-12-08 21:19:41 +01:00
parent ca991a705b
commit ab8daba952
5 changed files with 29 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

8
package-lock.json generated
View File

@@ -7491,10 +7491,10 @@
"vue-style-loader": "^4.1.0" "vue-style-loader": "^4.1.0"
} }
}, },
"vue-loading-button": { "vue-spinners-css": {
"version": "0.2.0", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/vue-loading-button/-/vue-loading-button-0.2.0.tgz", "resolved": "https://registry.npmjs.org/vue-spinners-css/-/vue-spinners-css-1.1.3.tgz",
"integrity": "sha512-HjlNzS2deIaXGr7cZU/J/SiaZfA6OvJC+vzujTohUCs0cF+6G9p4SfTquT4watDFl5m3yO4OBEaxhE99JQLBNA==" "integrity": "sha512-EbWBH2tPj+YjJOYcZ8gyFCYFK0QCxECCH5xFUeOXKxvN4tVgP6Axk5A60ld+GUBcg+YuBn/EYSG/jifEWpzi9Q=="
}, },
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",

4
package.json
View File

@@ -22,9 +22,9 @@
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"axios": "^0.19.0", "axios": "^0.19.0",
"vue-loading-button": "^0.2.0",
"webpack": "^4.41.2", "webpack": "^4.41.2",
"webpack-cli": "^3.3.10", "webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0" "webpack-dev-server": "^3.9.0",
"vue-spinners-css": "^1.1.3"
} }
} }

28
src/StatusBox.vue
View File

@@ -11,14 +11,11 @@
</select> </select>
<input v-model="target" placeholder="Enter Ip or Domain"> <input v-model="target" placeholder="Enter Ip or Domain">
<VueLoadingButton <button v-on:click="handleClick()">
:id="'vueOwnButtonStyle'" ⛟
aria-label="Post message" </button>
class="button" <RingLoader :size="10" :loading="isLoading" color="black"></RingLoader>
@click.native="handleClick" <br>
:loading="isLoading"
:styled="false"
>⛟</VueLoadingButton> <br>
<span class="small">{{infoString}}</span> <span class="small">{{infoString}}</span>
<div> <div>
@@ -55,11 +52,11 @@
import axios from 'axios'; import axios from 'axios';
import XtrServer from './ModelObjects/XtrServer.js'; import XtrServer from './ModelObjects/XtrServer.js';
import XtrData from './ModelObjects/XtrData.js'; import XtrData from './ModelObjects/XtrData.js';
import VueLoadingButton from 'vue-loading-button'; import { RingLoader } from 'vue-spinners-css';
export default { export default {
components: { components: {
VueLoadingButton RingLoader
}, },
props: { props: {
serverlist: Array, serverlist: Array,
@@ -351,15 +348,4 @@ export default {
75% { transform: rotate(0deg); } 75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); } 100% { transform: rotate(-30deg); }
} }
button#vueOwnButtonStyle {
font-family: inherit;
font-size: 0.9rem;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
}
</style> </style>

24
src/StatusBoxContainer.vue
View File

@@ -148,12 +148,15 @@ export default {
}); });
}, },
setActive: function setActive(tableId) { setActive: function setActive(tableId) {
var settedClasses = document.getElementById("tableId_"+tableId).className; this.$nextTick(() => {
if (settedClasses == 'table table-striped') { var settedClasses = document.getElementById("tableId_"+tableId).className;
document.getElementById("tableId_"+tableId).className = 'table table-striped active'; if (settedClasses == 'table table-striped') {
} else { document.getElementById("tableId_"+tableId).className = 'table table-striped active';
document.getElementById("tableId_"+tableId).className = 'table table-striped'; } else {
} document.getElementById("tableId_"+tableId).className = 'table table-striped';
}
});
}, },
setActiveFromSession: function setActiveFromSession(tableIds) { setActiveFromSession: function setActiveFromSession(tableIds) {
tableIds.forEach(tableId => { tableIds.forEach(tableId => {
@@ -220,19 +223,16 @@ export default {
padding: 5px; padding: 5px;
} }
.info .info {
{
display: block; position: absolute; right: 10px; top: 10px; display: block; position: absolute; right: 10px; top: 10px;
} }
.info:hover .info_box .info:hover .info_box {
{
visibility: visible; visibility: visible;
z-index: 4; z-index: 4;
} }
.info .info_box .info .info_box {
{
display: block; display: block;
position: absolute; position: absolute;
right: 0px; right: 0px;