Skip to content

Commit 54350cc

Browse files
committed
[frontend] Add label option to the Spinner component and fix various styling issues
Switching to <i> for icons as there are certain global styles for FA icons with the i tag
1 parent cf1126d commit 54350cc

File tree

3 files changed

+105
-20
lines changed

3 files changed

+105
-20
lines changed
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
Licensed to Cloudera, Inc. under one
3+
or more contributor license agreements. See the NOTICE file
4+
distributed with this work for additional information
5+
regarding copyright ownership. Cloudera, Inc. licenses this file
6+
to you under the Apache License, Version 2.0 (the
7+
"License"); you may not use this file except in compliance
8+
with the License. You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing, software
13+
distributed under the License is distributed on an "AS IS" BASIS,
14+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
See the License for the specific language governing permissions and
16+
limitations under the License.
17+
*/
18+
19+
@import './styles/mixins';
20+
@import './styles/colors';
21+
22+
.spinner-container {
23+
@include fade-in;
24+
position: relative;
25+
z-index: 10000;
26+
27+
28+
&.spinner {
29+
@include fillAbsolute;
30+
margin: auto 0;
31+
vertical-align: center;
32+
}
33+
34+
&.spinner-overlay {
35+
@include fillAbsolute;
36+
@include fade-in;
37+
z-index: 10000;
38+
background: rgba(255, 255, 255, 0.5);
39+
}
40+
41+
&.spinner-inline {
42+
@include fade-in;
43+
display: inline-block;
44+
position: relative;
45+
}
46+
47+
&.spinner-blackout {
48+
z-index: 999;
49+
background-color: $fluid-white;
50+
}
51+
52+
.spinner-center {
53+
position: absolute;
54+
top: 50%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
57+
}
58+
59+
.spinner-large {
60+
font-size: 26px !important;
61+
}
62+
63+
.spinner-xlarge {
64+
font-size: 60px !important;
65+
}
66+
67+
span,
68+
i {
69+
font-size: 16px;
70+
color: $fluid-gray-500;
71+
}
72+
73+
span {
74+
margin-left: 5px;
75+
}
76+
}

desktop/core/src/desktop/js/components/Spinner.vue

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,38 @@
2121
v-if="spin"
2222
class="spinner-container"
2323
:class="{
24-
'hue-spinner-overlay': overlay,
25-
'hue-spinner-inline': inline,
26-
'hue-spinner': !overlay && !inline,
27-
'hue-spinner-blackout': blackout
24+
'spinner-overlay': overlay,
25+
'spinner-inline': inline,
26+
spinner: !overlay && !inline,
27+
'spinner-blackout': blackout
2828
}"
2929
>
30-
<em
31-
class="fa fa-spinner fa-spin"
32-
:style="{ width: center && inline ? '100%' : null }"
33-
:class="{
34-
'hue-spinner-large': size === 'large',
35-
'hue-spinner-xlarge': size === 'xlarge',
36-
'hue-spinner-center': center
37-
}"
38-
/>
30+
<div :style="{ width: center && inline ? '100%' : null }" :class="{ 'spinner-center': center }">
31+
<i
32+
class="fa fa-spinner fa-spin"
33+
:class="{
34+
'spinner-large': size === 'large',
35+
'spinner-xlarge': size === 'xlarge'
36+
}"
37+
/>
38+
<span
39+
v-if="label"
40+
:class="{
41+
'spinner-large': size === 'large',
42+
'spinner-xlarge': size === 'xlarge'
43+
}"
44+
>
45+
{{ label }}
46+
</span>
47+
</div>
3948
</div>
4049
</template>
4150

4251
<script lang="ts">
4352
import { defineComponent } from 'vue';
4453
54+
import './Spinner.scss';
55+
4556
export default defineComponent({
4657
name: 'Spinner',
4758
props: {
@@ -65,16 +76,14 @@
6576
type: Boolean,
6677
default: false
6778
},
79+
label: {
80+
type: String,
81+
default: ''
82+
},
6883
blackout: {
6984
type: Boolean,
7085
default: false
7186
}
7287
}
7388
});
7489
</script>
75-
76-
<style lang="scss" scoped>
77-
.spinner-container {
78-
z-index: 10000;
79-
}
80-
</style>

desktop/core/src/desktop/js/components/styles/mixins.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ $hue-panel-border-radius: 3px;
147147
}
148148

149149
@mixin fade-in {
150-
@include animation('fade-in-frames 2s');
150+
@include animation('fade-in-frames 0.5s');
151151
}
152152

153153
@mixin fillAbsolute {

0 commit comments

Comments
 (0)