You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2020/12/29 14:59:13 UTC
[skywalking-rocketbot-ui] branch master updated: refactor: optimize
rk-icon (#405)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new d7c7b2c refactor: optimize rk-icon (#405)
d7c7b2c is described below
commit d7c7b2cfdf029bfb41d22c821fcb8072ad7ab2c7
Author: xuchangjun <93...@users.noreply.github.com>
AuthorDate: Tue Dec 29 22:59:01 2020 +0800
refactor: optimize rk-icon (#405)
* fix(rk-icon): xlink add char`#`
* fix(rk-footer): utc input style
* perf(rk-header): replace svg tag with rk-icon
Co-authored-by: tianxuanzhizi <bo...@bangdao-tech.com>
---
src/components/rk-footer.vue | 2 +-
src/components/rk-header.vue | 28 +++++++---------------------
src/components/rk-icon.vue | 2 +-
3 files changed, 9 insertions(+), 23 deletions(-)
diff --git a/src/components/rk-footer.vue b/src/components/rk-footer.vue
index 5a87f12..fd755a2 100644
--- a/src/components/rk-footer.vue
+++ b/src/components/rk-footer.vue
@@ -93,7 +93,7 @@ limitations under the License. -->
background: 0;
border: 0;
outline: none;
- width: 27px;
+ width: auto;
padding-bottom: 0;
}
.rk-footer-inner {
diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue
index 476c347..b9cd800 100644
--- a/src/components/rk-header.vue
+++ b/src/components/rk-header.vue
@@ -20,39 +20,27 @@ limitations under the License. -->
</svg>
<span class="grey rocketbot">Rocketbot</span>
<router-link class="nav-link mr-20" to="/" exact>
- <svg class="icon sm vm">
- <use xlink:href="#chart"></use>
- </svg>
+ <rk-icon size="sm" icon="chart" />
<span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/topology">
- <svg class="icon sm vm">
- <use xlink:href="#issues"></use>
- </svg>
+ <rk-icon size="sm" icon="issues" />
<span class="vm hide-xs ml-5">{{ this.$t('topology') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/trace">
- <svg class="icon sm vm">
- <use xlink:href="#merge"></use>
- </svg>
+ <rk-icon size="sm" icon="merge" />
<span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/profile">
- <svg class="icon sm vm">
- <use xlink:href="#timeline"></use>
- </svg>
+ <rk-icon size="sm" icon="timeline" />
<span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/log">
- <svg class="icon sm vm">
- <use xlink:href="#assignment"></use>
- </svg>
+ <rk-icon size="sm" icon="assignment" />
<span class="vm hide-xs ml-5">{{ this.$t('log') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/alarm">
- <svg class="icon sm vm">
- <use xlink:href="#spam"></use>
- </svg>
+ <rk-icon size="sm" icon="spam" />
<span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
</router-link>
</div>
@@ -72,9 +60,7 @@ limitations under the License. -->
{{ this.$t('second') }}
</div>
<a class="rk-btn sm ghost" @click="handleReload">
- <svg class="icon mr-5 vm" :class="{ loading: auto }">
- <use xlink:href="#retry"></use>
- </svg>
+ <rk-icon icon="retry" :loading="auto" />
<span class="vm">{{ this.$t('reload') }}</span>
</a>
</div>
diff --git a/src/components/rk-icon.vue b/src/components/rk-icon.vue
index a5234a4..9a224ff 100644
--- a/src/components/rk-icon.vue
+++ b/src/components/rk-icon.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
loading: loading,
}"
>
- <use :xlink:href="icon"></use>
+ <use :xlink:href="`#${icon}`"></use>
</svg>
</template>