Skip to content

GitLab

Commit c7187946 authored by Lijiao's avatar Lijiao Committed by GitHub
Browse files

Use office-fabric-ui components (#1964)

parent fdfff50d
Hide whitespace changes
Inline Side-by-side
Showing with 10995 additions and 9282 deletions
src/webui/src/static/style/progress.scss
View file @ c7187946
.progress {
.progress{ margin: 15px 17px;
margin: 15px 17px; .status {
.status{ color: #0573bc;
color: #0573bc; font-size: 20px;
font-size: 20px; font-weight: 600;
font-weight: 600; margin-top: 5px;
margin-top: 5px; .status-text{
display: inline-block;
line-height: 30px;
} }
}
.probar{ .probar {
width: 95%; width: 100%;
height: 34px; height: 34px;
margin-top: 15px; margin-top: 15px;
.showProgress{
width: 300px;
height: 30px;
}
.name {
width: 178px;
box-sizing: border-box;
line-height: 30px;
text-align: center;
color: #fff;
background-color: #999;
border: 2px solid #e6e6e6;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.ant-progress-inner{ .boundary {
border: 2px solid #e6e6e6; width: 100%;
border-radius: 0 12px 12px 0 !important; line-height: 24px;
} font-size: 12px;
.name{ color: #212121;
height: 34px; .right {
line-height: 30px; text-align: right;
text-align: center; }
color: #fff; }
background-color: #999;
border: 2px solid #e6e6e6;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.showProgress{ .description{
height: 30px; line-height: 34px;
} margin-left: 6px;
.description{
width: 100%;
line-height: 24px;
font-size: 12px;
color: #212121;
.right{
text-align: right;
}
}
} }
}
} }
/* basic experiment message style */ /* basic experiment message style */
.basic{ .basic {
line-height: 24px;
line-height: 24px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; p {
p{ font-size: 14px;
font-size: 14px; color: #212121;
color: #212121; }
} div {
div{ font-size: 16px;
font-size: 16px; color: #0573bc;
color: #0573bc; }
}
} }
.colorOfbasic{ .colorOfbasic {
div{ div {
color: #0573bc; color: #0573bc;
} }
.time{ .time {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.mess{ .mess {
margin: 10px 0; margin: 10px 0;
} }
/*
.ant-tooltip-inner{ .inputBox {
min-width: 300px; height: 32px;
margin-top: 5px;
.concurrencyInput {
width: 40px;
padding-left: 8px;
outline: none;
border: 1px solid #ccc;
}
} }
*/
.inputBox{ .lineBasic {
height: 26px; padding-bottom: 14px;
margin-top: 5px; border-bottom: 1px solid #ccc;
.concurrencyInput{
width: 25%;
height: 26px;
padding-left: 8px;
outline: none;
border: 1px solid #ccc;
}
.editStyle{
height: 26px;
padding: 0 9px;
}
} }
.lineBasic{ /* office-fabric-ui progressIndicator*/
padding-bottom: 14px; .ms-ProgressIndicator-itemProgress {
border-bottom: 1px solid #ccc; padding: 0;
border: 2px solid #e6e6e6;
border-radius: 0 12px 12px 0 !important;
} }
src/webui/src/static/style/search.scss
View file @ c7187946
...@@ -2,64 +2,26 @@ ...@@ -2,64 +2,26 @@
.allList{ .allList{
width: 96%; width: 96%;
margin: 0 auto; margin: 0 auto;
.right{ margin-top: 15px;
text-align: right;
.common{ &-compare{
border-radius: 0; margin-top: 15px;
}
.common:hover{
color: #0071BC;
border-radius: 0;
}
.filter{
width: 100px;
margin-left: 8px;
.ant-select-selection-selected-value{
font-size: 14px;
}
}
.search-input{
height: 32px;
outline: none;
border: 1px solid #d9d9d9;
border-left: none;
padding-left: 8px;
color: #333;
}
.search-input::placeholder{
color: DarkGray;
}
}
.entry{
width: 120px;
margin: 0 6px;
} }
.btns{
height: 32px; &-entry{
text-align: right; line-height: 32px;
.ant-input-search{
height: 32px;
}
} }
}
.titleColumn{ /* compare button style */
.ant-checkbox-group-item{ &-button-gap{
display: block; margin-right: 10px;
} }
}
.applyfooter{ &-search-input{
/* apply button style */ padding-left: 10px;
.apply{
text-align: right;
} }
} }
/* compare button style */
Button.mediateBtn{
margin: 0 2px 0 8px;
}
/* each row's Intermediate btn -> Modal*/ /* each row's Intermediate btn -> Modal*/
.selectKeys{ .selectKeys{
......
src/webui/src/static/style/slideBar.scss deleted 100644 → 0
View file @ fdfff50d
$barHeight: 56px;
/* drowdown and select default bgcolor */
$drowBgColor: #f2f2f2;
/* drowdown and select hover bgcolor */
$drowHoverBgColor: #e2e2e2;
/* refresh button */
.fresh{
border: none;
color: #fff;
font-size: 16px;
padding: 0 8px;
}
.fresh:hover{
color: #fff;
background-color: #006cb5;
}
.dropdown{
/* make dropdown content box position in blue bar bottom */
padding-bottom: 14px;
.down-icon{
font-size: 20px !important;
padding-right: 6px;
}
}
.interval{
display: inline-block;
font-size: 16px;
color: #fff;
.ant-form{
display: inline-block;
}
form .ant-select{
width: 166px;
}
.ant-select-selection{
background-color: transparent;
border: none;
color: #fff;
outline: none;
font-size: 16px;
}
.ant-select-arrow{
color: #fff;
}
.fresh{
margin-right: 10px;
}
.ant-btn-ghost{
padding: 0 10px;
}
.ant-btn-ghost[disabled]{
background-color: #005b98;
color: #fff;
}
}
/* set select bgcolor */
.ant-select-dropdown-menu{
background-color: $drowBgColor;
}
.ant-select-dropdown-menu-item:hover{
background-color: $drowHoverBgColor;
}
.ant-select-dropdown-menu-item-active{
background-color: transparent;
}
/* set dropdown bgcolor */
.ant-dropdown{
.ant-dropdown-menu{
padding: 0;
background-color: $drowBgColor;
border-radius: 0;
.ant-dropdown-menu-item{
font-size: 16px;
}
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu:hover{
background-color: $drowHoverBgColor;
}
}
}
.ant-dropdown-menu-sub{
padding: 0;
background-color: $drowBgColor;
border-radius: 0;
.ant-dropdown-menu-item:hover{
background-color: $drowHoverBgColor;
}
}
.menu-list{
position: relative;
top: 13px;
}
.ant-dropdown{
.menuModal{
position: relative;
top: 12px;
}
}
.ant-select-selection-selected-value{
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.ant-dropdown-menu-submenu-title{
font-size: 16px;
}
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
background-color: transparent;
}
.nav{
width: 95%;
height: $barHeight;
margin: 0 auto;
line-height: $barHeight;
/* mobile start*/
.left{
text-align: left;
/* more menu */
font-size: 18px;
color: #fff;
a, a:visited{
color: #fff;
text-decoration: none;
}
.more-mobile{
margin-right: 10%;
font-size: 22px;
position: relative;
top: 1px;
}
.more-mobile:hover{
cursor: pointer;
}
}
.center{
text-align: center;
img{
height: 38px;
}
}
.right{
text-align: right;
button{
margin-top: 12px;
}
}
/* mobile end */
/* tabelt mode */
.tabelt-left{
height: $barHeight;
.tabelt-img img{
position: relative;
top: -5px;
}
}
.tabelt-right{
text-align: right;
}
/* desktop mode */
.desktop-logo{
position: relative;
top: -3px;
}
.desktop-right{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: right;
line-height: $barHeight;
font-size: 16px;
color: #fff;
a{
color: #fff;
text-decoration: none;
}
img{
width: 20px;
margin-right: 8px;
}
/* ? icon style */
.question{
width: 14px;
margin-right: 4px;
}
.feedback{
font-size: 16px;
margin: 0 20px;
}
.version{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
}
.margin-icon{
margin-left: 8px;
}
}
}
/* public style in nav in threee mode*/
.more{
color: #fff;
font-size: 24px;
}
.more:hover{
cursor: pointer;
}
/* overview and detail tabs common style */
a.common-tabs{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #b8c7ce;
text-decoration: none;
}
.common-tabs:visited, .high-light:hover{
color: #fff;
text-decoration: none;
}
.common-tabs:hover, .high-light{
color: #fff;
border-bottom: 1px solid #fff;
}
.left-right-margin{
margin-left: 20px;
margin-right: 20px;
}
.left-margin{
margin-left: 20px;
}
\ No newline at end of file
src/webui/src/static/style/succTable.scss 0 → 100644
View file @ c7187946
#succTable{
height: 404px;
overflow-y: scroll;
}
\ No newline at end of file
src/webui/src/static/style/table.scss
View file @ c7187946
...@@ -24,129 +24,26 @@ ...@@ -24,129 +24,26 @@
} }
} }
} }
/* add the brother selector to increase the priority */
#succeTable .commonTableStyle, #tableList .commonTableStyle {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
tr{
text-align: center;
color:#212121;
font-size: 14px;
}
th{
padding: 2px;
background-color:white !important;
font-size: 14px;
color: #808080;
text-align: center;
}
.ant-table-expanded-row{
/* background-color: #f2f2f2 */
background-color: transparent;
}
tr:hover{
/* cancel antd table default hover style */
td{
background-color: transparent;
}
.ant-table-row-expand-icon{
background-color: transparent;
}
}
td{
padding: 0 15px;
line-height: 24px;
}
.ant-table-row-expand-icon-cell{
background: #ccc;
width: 50px;
.ant-table-row-expand-icon{
background: none;
border: none;
}
}
.ant-table-row-expand-icon-cell:hover{
background: #ccc;
}
.ant-table-selection-column{
width: 50px;
}
}
/* let openrow content left*/
.hyperpar{
text-align: left;
line-height: 18px;
font-size: 14px;
overflow: hidden;
margin-bottom: 10px;
}
/* the position of the pagination */
.ant-table-pagination.ant-pagination{
margin: 16px 0;
float: right;
margin-right: 30px;
}
.ant-modal-title{
font-size: 20px;
}
/*disable select all checkbox in detail page*/
.ant-table-selection{
display: none;
}
/* fix the border-bottom bug in firefox and edge */
.ant-table-thead > tr > th .ant-table-column-sorters::before{
padding-bottom: 25px;
border-bottom: 1px solid #e8e8e8;
}
.margin-mediate{ .margin-mediate{
margin: 0 10px; margin: 0 10px;
} }
#detail-button{ .detail-button{
margin: 2px 0; &-operation{
.common-style, .common-style:visited, .common-style:focus{ min-width: 44px;
height: 26px;
border: none; border: none;
border-radius: 0; margin-right: 10px;
background-color: #0078d4;
} }
.common-style:hover{ i{
background-color: #106ebe; color: #fff;
}
.common-style:active{
background-color: #005a9e;
outline: 0;
}
.common-style:disabled{
background-color: #f4f4f4;
}
.special, .special:visited, .special:focus, .special button{
height: 26px;
border: none;
border-radius: 0;
outline: 0;
background-color: #f4f4f4;
color: #333;
}
.special:hover{
background-color: #eaeaea;
}
.special:active{
background-color: #c8c8c8;
outline: 0;
}
.special:disabled, .special button:disabled{
background-color: #f4f4f4;
color: #d9d9d9;
} }
} }
/* office-fabric-ui */
.ms-DetailsRow{
height: 30px;
}
.detail-table{
padding: 5px 0 0 0;
}
\ No newline at end of file
src/webui/src/static/style/trialsDetail.scss
View file @ c7187946
$bg: #b3b3b3;
#tabsty{ #tabsty{
.ant-tabs-nav-container{ .ms-Pivot{
height: 38px; .ms-Button{
} padding: 0;
.ant-tabs-tab{ /* reset fabric style */
border: none; margin-right: 0;
margin-right: 0; border-right: 2px solid #fff;
line-height: 38px; transition: 0.3s;
padding: 0;
} &:hover{
.ant-tabs-nav-scroll{ background-color: $bg;
background-color: #b3b3b3; }
} .ms-Button-flexContainer{
.ant-tabs-tab-active{ background-color: $bg;
.panelTitle{ }
background-color: #999; }
/*
span{ .ms-Pivot-link::before{
color: #fff; height: 0;
font-weight: normal; }
.is-selected{
background: #999;
&:hover{
background: #999;
} }
*/
} }
} }
.panelTitle{
margin-right: 14px; .ms-Pivot-icon{
border-right: 2px solid #e8e8e8; margin-left: 12px;
}
.ms-Pivot-text{
/* Default metric | Hyper-parameter | Duration | Intermediate result*/
margin: 0 12px;
font-size: 16px;
font-weight: 600;
} }
} }
.trial{ .trial{
/* graph, title total height */ /* graph, title total height */
width: 100%; width: 100%;
height: 478px; height: 500px;
/* cancle default panel title style*/ /* graph all title bg*/
.ant-tabs-bar{ .ms-FocusZone{
margin: 0; background-color: $bg;
} }
.graph{ .graph{
height: 432px; height: 432px;
...@@ -69,30 +81,54 @@ ...@@ -69,30 +81,54 @@
} }
} }
.allList{
margin-top: 15px;
}
.default-metric{ .default-metric{
width: 90%; width: 90%;
text-align: right; text-align: right;
margin-top: 15px; margin-top: 15px;
.position{
&-graph{
position: relative;
}
&-noData{
position: absolute;
left: 48%;
top: 30%;
color: #333; color: #333;
.bold{
font-weight: 600;
margin-right: 10px;
}
} }
} }
/* for # intermediate in intermediate graph*/ .detial-title{
.ms-Button{
i{
font-size: 22px;
}
}
}
/* for yAxis # intermediate position in intermediate graph*/
.intermediate-graph{ .intermediate-graph{
position: relative; position: relative;
.yAxis{ .yAxis{
color: #333; color: #333;
position: absolute; position: absolute;
left: 45%; left: 50%;
top: 86%; top: 88%;
transform: translate(-50%);
}
}
#tableList{
width: 96%;
margin: 0 auto;
}
.detail-table{
.ms-Button{
padding: 0;
height: 26px;
margin-top: -2px;
span{
padding: 0;
}
} }
} }
src/webui/tsconfig.json
View file @ c7187946
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "target": "es5",
"module": "esnext",
"target": "esnext",
"lib": [ "lib": [
"esnext", "dom",
"dom" "dom.iterable",
"esnext"
], ],
"sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react", "skipLibCheck": true,
"moduleResolution": "node", "esModuleInterop": true,
"rootDir": "src", "downlevelIteration": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "module": "esnext",
"noImplicitThis": true, "moduleResolution": "node",
"noImplicitAny": true, "resolveJsonModule": true,
"strictNullChecks": true, "isolatedModules": false,
"suppressImplicitAnyIndexErrors": true, "noEmit": true,
"noUnusedLocals": true, "jsx": "preserve"
"baseUrl": "."
}, },
"include": [ "include": [
"src/**/*" "src"
] ]
} }
src/webui/tsconfig.prod.json deleted 100644 → 0
View file @ fdfff50d
{
"extends": "./tsconfig.json"
}
\ No newline at end of file
src/webui/tsconfig.test.json deleted 100644 → 0
View file @ fdfff50d
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}
\ No newline at end of file
src/webui/yarn.lock
View file @ c7187946
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment