You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/01/21 05:19:20 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Add menu
icon and logo
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
new fcc2d6c Add menu icon and logo
fcc2d6c is described below
commit fcc2d6cc7f3b7eab55c06b2100b5b26482ce597c
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Sun Jan 21 13:18:28 2018 +0800
Add menu icon and logo
---
src/main/frontend/public/css/iconfont.css | 71 +++++++++++++++++++++++++++
src/main/frontend/public/css/iconfont.eot | Bin 0 -> 5116 bytes
src/main/frontend/public/css/iconfont.js | 1 +
src/main/frontend/public/css/iconfont.svg | 57 +++++++++++++++++++++
src/main/frontend/public/css/iconfont.ttf | Bin 0 -> 4948 bytes
src/main/frontend/public/css/iconfont.woff | Bin 0 -> 3216 bytes
src/main/frontend/public/img/logo/sw-2.png | Bin 0 -> 1397 bytes
src/main/frontend/public/index.html | 1 +
src/main/frontend/src/common/nav.js | 12 ++---
src/main/frontend/src/layouts/BasicLayout.js | 7 +--
10 files changed, 140 insertions(+), 9 deletions(-)
diff --git a/src/main/frontend/public/css/iconfont.css b/src/main/frontend/public/css/iconfont.css
new file mode 100644
index 0000000..2ca477a
--- /dev/null
+++ b/src/main/frontend/public/css/iconfont.css
@@ -0,0 +1,71 @@
+
+@font-face {font-family: "iconfont";
+ src: url('iconfont.eot?t=1516507130714'); /* IE9*/
+ src: url('iconfont.eot?t=1516507130714#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAyQAAsAAAAAE1QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7k3TY21hcAAAAYAAAACjAAACGEGg6XVnbHlmAAACJAAAB/cAAAwE8ttzW2hlYWQAAAocAAAALwAAADYQM6XyaGhlYQAACkwAAAAcAAAAJAfeA4tobXR4AAAKaAAAABQAAAAoJ+kAAGxvY2EAAAp8AAAAFgAAABYO5ApgbWF4cAAACpQAAAAeAAAAIAEkAS1uYW1lAAAKtAAAAUUAAAJtPlT+fXBvc3QAAAv8AAAAlAAAALLrxH1JeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sc4gYG [...]
+ url('iconfont.ttf?t=1516507130714') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+ url('iconfont.svg?t=1516507130714#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+ display: inline-block;
+ font-style: normal;
+ vertical-align: baseline;
+ text-align: center;
+ text-transform: none;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ margin-right: 10px;
+}
+
+.ant-menu-item .iconfont,
+.ant-menu-submenu-title .iconfont {
+ min-width: 14px;
+ margin-right: 10px;
+ transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.ant-menu-item .iconfont + span,
+.ant-menu-submenu-title .iconfont + span {
+ transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ opacity: 1;
+}
+
+.ant-menu-inline-collapsed > .ant-menu-item .iconfont,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .iconfont,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .iconfont {
+ font-size: 16px;
+ line-height: 40px;
+ margin: 0;
+}
+
+.ant-menu-inline-collapsed > .ant-menu-item .iconfont + span,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .iconfont + span,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .iconfont + span {
+ max-width: 0;
+ display: inline-block;
+ opacity: 0;
+}
+
+.iconfont:before {
+ display: block;
+ font-family: "iconfont" !important;
+}
+
+.icon-server:before { content: "\ebe2"; }
+
+.icon-network:before { content: "\e64d"; }
+
+.icon-icon-traces-search:before { content: "\e626"; }
+
+.icon-APPyemiantubiaoSVGxinxileixing:before { content: "\e612"; }
+
+.icon-database1:before { content: "\e601"; }
+
+.icon-ALERT:before { content: "\e954"; }
+
+.icon-Corebusinessnetwork-copy:before { content: "\e600"; }
+
+.icon-soft_A_Redis:before { content: "\e773"; }
diff --git a/src/main/frontend/public/css/iconfont.eot b/src/main/frontend/public/css/iconfont.eot
new file mode 100644
index 0000000..fe2d08f
Binary files /dev/null and b/src/main/frontend/public/css/iconfont.eot differ
diff --git a/src/main/frontend/public/css/iconfont.js b/src/main/frontend/public/css/iconfont.js
new file mode 100644
index 0000000..a2c1a6c
--- /dev/null
+++ b/src/main/frontend/public/css/iconfont.js
@@ -0,0 +1 @@
+(function(window){var svgSprite='<svg><symbol id="icon-server" viewBox="0 0 1024 1024"><path d="M73.142857 804.571429l585.142857 0 0-73.142857-585.142857 0 0 73.142857zM73.142857 512l585.142857 0 0-73.142857-585.142857 0 0 73.142857zM969.142857 768q0-22.820571-16.018286-38.838857t-38.838857-16.018286-38.838857 16.018286-16.018286 38.838857 16.018286 38.838857 38.838857 16.018286 38.838857-16.018286 16.018286-38.838857zM73.142857 219.428571l585.142857 0 0-73.142857-585.142857 0 0 73.14285 [...]
\ No newline at end of file
diff --git a/src/main/frontend/public/css/iconfont.svg b/src/main/frontend/public/css/iconfont.svg
new file mode 100644
index 0000000..8147aa1
--- /dev/null
+++ b/src/main/frontend/public/css/iconfont.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+ <font-face
+ font-family="iconfont"
+ font-weight="500"
+ font-stretch="normal"
+ units-per-em="1024"
+ ascent="896"
+ descent="-128"
+ />
+ <missing-glyph />
+
+ <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+
+
+
+ <glyph glyph-name="server" unicode="" d="M73.142857 91.428571l585.142857 0 0 73.142857-585.142857 0 0-73.142857zM73.142857 384l585.142857 0 0 73.142857-585.142857 0 0-73.142857zM969.142857 128q0 22.820571-16.018286 38.838857t-38.838857 16.018286-38.838857-16.018286-16.018286-38.838857 16.018286-38.838857 38.838857-16.018286 38.838857 16.018286 16.018286 38.838857zM73.142857 676.571429l585.142857 0 0 73.142857-585.142857 0 0-73.142857zM969.142857 420.571429q0 22.820571-16.0182 [...]
+
+
+ <glyph glyph-name="network" unicode="" d="M912.290909 896c-61.607564 0-111.709091-50.101527-111.709091-111.709091 0-19.269818 4.896582-37.403927 13.5168-53.248l-182.998109-182.998109a147.884218 147.884218 0 0 1-182.365091 0.018618l-142.782836 142.782837A73.485964 73.485964 0 0 1 316.509091 728.436364c0 41.071709-33.401018 74.472727-74.472727 74.472727S167.563636 769.508073 167.563636 728.436364s33.401018-74.472727 74.472728-74.472728c13.777455 0 26.512291 4.002909 37.590109 1 [...]
+
+
+ <glyph glyph-name="icon-traces-search" unicode="" d="M738.312 727.526H219.595c-47.744 0-86.458-38.798-86.458-86.665v-433.359c0-47.856 38.714-86.661 86.458-86.661h352.193c-46.896 34.415-77.48 90.879-77.48 154.702 0 104.829 82.534 189.823 184.36 189.823 59.493 0 112.39-29.023 146.094-74.068V640.861c0 47.867-38.705 86.665-86.45 86.665zM357.951 396.561H229.87c-19.283 0-34.914 15.007-34.914 33.518 0 18.504 15.631 33.503 34.914 33.503h128.081c19.284 0 34.909-15.003 34.909-33.503 0- [...]
+
+
+ <glyph glyph-name="APPyemiantubiaoSVGxinxileixing" unicode="" d="M357.885 846.711h285.276c173.87 0 316.906-143.086 316.906-317.854v-285.276c0-173.831-143.086-316.925-316.906-316.925h-285.276c-174.749 0-317.854 143.086-317.854 316.925v285.276c0 174.749 143.086 317.854 317.854 317.854zM708.284 144.029h-138.54c-18.985 0-35.317 15.371-35.317 34.429v138.54c0 18.985 16.279 35.317 35.317 35.317h138.54c18.985 0 34.429-16.326 34.429-35.317v-138.54c0-18.985-15.381-34.429-34.429-34.429z [...]
+
+
+ <glyph glyph-name="database1" unicode="" d="M896.483 704.532v-64.081c0-70.585-172.214-128.161-384.485-128.161-212.267 0-384.484 57.577-384.484 128.161v64.081c0 70.584 172.216 128.161 384.484 128.161 212.271 0 384.485-57.577 384.485-128.161zM896.483 533.319v-85.109c0-70.584-172.214-128.161-384.485-128.161-212.267 0-384.484 57.577-384.484 128.161v85.109c82.608-58.074 233.795-85.109 384.484-85.109 150.691 0 301.878 27.036 384.485 85.109zM896.483 341.077v-85.11c0-70.585-172.214-1 [...]
+
+
+ <glyph glyph-name="ALERT" unicode="" d="M611.702 851.037l263.203-149.544c60.979-35.06 98.35-99.414 98.154-168.892v-299.056c0.037-69.658-37.691-134.044-98.987-168.902l-262.37-149.36c-61.333-34.828-136.864-34.828-198.176 0l-263.61 149.55c-61.285 34.859-99.008 99.246-98.977 168.915V532.601c-0.032 69.657 37.691 134.033 98.977 168.892l263.61 149.544c61.312 34.834 136.843 34.834 198.176 0M799.555 370.858h-75.163v12.625c-0.063 7.043-0.449 14.072-1.224 21.083h76.387c9.521 0 17.24-7.5 [...]
+
+
+ <glyph glyph-name="Corebusinessnetwork-copy" unicode="" d="M151.3048309167421 25.98617983100155c199.20612239587413-199.20612239587422 522.1842157706417-199.20612239587433 721.3924594868594 0.002121320343348998 199.2068295026554 199.20682950265532 199.20682950265544 522.1849228774227 0.0007071067813058107 721.391045273297C673.4897537941649 946.5875901408598 350.5109533126164 946.5882972476411 151.30412380996103 747.3814677449857-47.90341279947552 548.1739311355491-47.903412799 [...]
+
+
+ <glyph glyph-name="soft_A_Redis" unicode="" d="M583.66976 610.83136l-229.83168-23.296a2.19136 2.19136 0 0 1-1.84832-1.78176 2.14016 2.14016 0 0 1 1.28-2.27328l179.12832-73.07776c0.28672-0.07168 0.49664-0.14336 0.77824-0.14336 0.77312 0 1.4848 0.42496 1.83808 1.13664l50.65216 96.45056c0.34816 0.63488 0.34816 1.48992-0.08192 2.05312a2.08896 2.08896 0 0 1-1.91488 0.93184zM880.75776 676.59776l-139.99104 56.3968a1.98144 1.98144 0 0 1-1.56672 0l-124.14464-49.28512a2.01216 2.01216 0 [...]
+
+
+
+
+ </font>
+</defs></svg>
diff --git a/src/main/frontend/public/css/iconfont.ttf b/src/main/frontend/public/css/iconfont.ttf
new file mode 100644
index 0000000..d9f87fa
Binary files /dev/null and b/src/main/frontend/public/css/iconfont.ttf differ
diff --git a/src/main/frontend/public/css/iconfont.woff b/src/main/frontend/public/css/iconfont.woff
new file mode 100644
index 0000000..a4c5201
Binary files /dev/null and b/src/main/frontend/public/css/iconfont.woff differ
diff --git a/src/main/frontend/public/img/logo/sw-2.png b/src/main/frontend/public/img/logo/sw-2.png
new file mode 100644
index 0000000..7606a35
Binary files /dev/null and b/src/main/frontend/public/img/logo/sw-2.png differ
diff --git a/src/main/frontend/public/index.html b/src/main/frontend/public/index.html
index 5d5ec75..50f7ae2 100755
--- a/src/main/frontend/public/index.html
+++ b/src/main/frontend/public/index.html
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apache SkyWalking</title>
<link rel="stylesheet" href="index.css" />
+ <link rel="stylesheet" href="css/iconfont.css" />
</head>
<body>
<div id="root"></div>
diff --git a/src/main/frontend/src/common/nav.js b/src/main/frontend/src/common/nav.js
index 675216f..21df26c 100644
--- a/src/main/frontend/src/common/nav.js
+++ b/src/main/frontend/src/common/nav.js
@@ -23,37 +23,37 @@ export const getNavData = app => [
},
{
name: 'Topology',
- icon: 'topology',
+ icon: 'iconfont icon-network',
path: 'topology',
component: dynamicWrapper(app, ['topology'], () => import('../routes/Topology/Topology')),
},
{
name: 'Application',
- icon: 'application',
+ icon: 'appstore',
path: 'application',
component: dynamicWrapper(app, ['application'], () => import('../routes/Application/Application')),
},
{
name: 'Server',
- icon: 'server',
+ icon: 'iconfont icon-server',
path: 'server',
component: dynamicWrapper(app, ['server'], () => import('../routes/Server/Server')),
},
{
name: 'Service',
- icon: 'service',
+ icon: 'api',
path: 'service',
component: dynamicWrapper(app, ['service'], () => import('../routes/Service/Service')),
},
{
name: 'Trace',
- icon: 'trace',
+ icon: 'iconfont icon-icon-traces-search',
path: 'trace',
component: dynamicWrapper(app, ['trace'], () => import('../routes/Trace/Trace')),
},
{
name: 'Alert',
- icon: 'alert',
+ icon: 'iconfont icon-ALERT',
path: 'alert',
component: dynamicWrapper(app, ['alert'], () => import('../routes/Alert/Alert')),
},
diff --git a/src/main/frontend/src/layouts/BasicLayout.js b/src/main/frontend/src/layouts/BasicLayout.js
index 3b0aa46..123f7a4 100644
--- a/src/main/frontend/src/layouts/BasicLayout.js
+++ b/src/main/frontend/src/layouts/BasicLayout.js
@@ -132,7 +132,7 @@ class BasicLayout extends React.PureComponent {
title={
item.icon ? (
<span>
- <Icon type={item.icon} />
+ {item.icon.indexOf('iconfont') > -1 ? (<i className={item.icon} />) : (<Icon type={item.icon} />)}
<span>{item.name}</span>
</span>
) : item.name
@@ -143,7 +143,7 @@ class BasicLayout extends React.PureComponent {
</SubMenu>
);
}
- const icon = item.icon && <Icon type={item.icon} />;
+ const icon = item.icon && (item.icon.indexOf('iconfont') > -1 ? (<i className={item.icon} />) : (<Icon type={item.icon} />));
return (
<Menu.Item key={item.key || item.path}>
{
@@ -278,7 +278,8 @@ class BasicLayout extends React.PureComponent {
>
<div className={styles.logo}>
<Link to="/">
- <img src="https://camo.githubusercontent.com/4ac940361b7345156ff71aa21efdb42a449e67d7/68747470733a2f2f736b7977616c6b696e67746573742e6769746875622e696f2f706167652d7265736f75726365732f332e302f736b7977616c6b696e672e706e67" alt="logo" />
+ <img src="img/logo/sw-2.png" alt="logo" style={{ width: 50, height: 30 }} />
+ <h1>SkyWalking</h1>
</Link>
</div>
<Menu
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].