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{
margin: 15px 17px;
.status{
color: #0573bc;
font-size: 20px;
font-weight: 600;
margin-top: 5px;
.progress {
margin: 15px 17px;
.status {
color: #0573bc;
font-size: 20px;
font-weight: 600;
margin-top: 5px;
.status-text{
display: inline-block;
line-height: 30px;
}
}
.probar{
width: 95%;
height: 34px;
margin-top: 15px;
.probar {
width: 100%;
height: 34px;
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{
border: 2px solid #e6e6e6;
border-radius: 0 12px 12px 0 !important;
}
.name{
height: 34px;
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;
}
.boundary {
width: 100%;
line-height: 24px;
font-size: 12px;
color: #212121;
.right {
text-align: right;
}
}
.showProgress{
height: 30px;
}
.description{
width: 100%;
line-height: 24px;
font-size: 12px;
color: #212121;
.right{
text-align: right;
}
}
.description{
line-height: 34px;
margin-left: 6px;
}
}
}
/* basic experiment message style */
.basic{
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
p{
font-size: 14px;
color: #212121;
}
div{
font-size: 16px;
color: #0573bc;
}
.basic {
line-height: 24px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
p {
font-size: 14px;
color: #212121;
}
div {
font-size: 16px;
color: #0573bc;
}
}
.colorOfbasic{
div{
color: #0573bc;
}
.time{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.colorOfbasic {
div {
color: #0573bc;
}
.time {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.mess{
margin: 10px 0;
.mess {
margin: 10px 0;
}
/*
.ant-tooltip-inner{
min-width: 300px;
.inputBox {
height: 32px;
margin-top: 5px;
.concurrencyInput {
width: 40px;
padding-left: 8px;
outline: none;
border: 1px solid #ccc;
}
}
*/
.inputBox{
height: 26px;
margin-top: 5px;
.concurrencyInput{
width: 25%;
height: 26px;
padding-left: 8px;
outline: none;
border: 1px solid #ccc;
}
.editStyle{
height: 26px;
padding: 0 9px;
}
.lineBasic {
padding-bottom: 14px;
border-bottom: 1px solid #ccc;
}
.lineBasic{
padding-bottom: 14px;
border-bottom: 1px solid #ccc;
/* office-fabric-ui progressIndicator*/
.ms-ProgressIndicator-itemProgress {
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 @@
.allList{
width: 96%;
margin: 0 auto;
.right{
text-align: right;
.common{
border-radius: 0;
}
.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;
margin-top: 15px;
&-compare{
margin-top: 15px;
}
.btns{
height: 32px;
text-align: right;
.ant-input-search{
height: 32px;
}
&-entry{
line-height: 32px;
}
}
.titleColumn{
.ant-checkbox-group-item{
display: block;
/* compare button style */
&-button-gap{
margin-right: 10px;
}
}
.applyfooter{
/* apply button style */
.apply{
text-align: right;
&-search-input{
padding-left: 10px;
}
}
/* compare button style */
Button.mediateBtn{
margin: 0 2px 0 8px;
}
/* each row's Intermediate btn -> Modal*/
.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 @@
}
}
}
/* 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: 0 10px;
}
#detail-button{
margin: 2px 0;
.common-style, .common-style:visited, .common-style:focus{
height: 26px;
.detail-button{
&-operation{
min-width: 44px;
border: none;
border-radius: 0;
background-color: #0078d4;
margin-right: 10px;
}
.common-style:hover{
background-color: #106ebe;
}
.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;
i{
color: #fff;
}
}
/* 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{
.ant-tabs-nav-container{
height: 38px;
}
.ant-tabs-tab{
border: none;
margin-right: 0;
line-height: 38px;
padding: 0;
}
.ant-tabs-nav-scroll{
background-color: #b3b3b3;
}
.ant-tabs-tab-active{
.panelTitle{
background-color: #999;
/*
span{
color: #fff;
font-weight: normal;
.ms-Pivot{
.ms-Button{
padding: 0;
/* reset fabric style */
margin-right: 0;
border-right: 2px solid #fff;
transition: 0.3s;
&:hover{
background-color: $bg;
}
.ms-Button-flexContainer{
background-color: $bg;
}
}
.ms-Pivot-link::before{
height: 0;
}
.is-selected{
background: #999;
&:hover{
background: #999;
}
*/
}
}
.panelTitle{
margin-right: 14px;
border-right: 2px solid #e8e8e8;
.ms-Pivot-icon{
margin-left: 12px;
}
.ms-Pivot-text{
/* Default metric | Hyper-parameter | Duration | Intermediate result*/
margin: 0 12px;
font-size: 16px;
font-weight: 600;
}
}
.trial{
/* graph, title total height */
width: 100%;
height: 478px;
/* cancle default panel title style*/
.ant-tabs-bar{
margin: 0;
height: 500px;
/* graph all title bg*/
.ms-FocusZone{
background-color: $bg;
}
.graph{
height: 432px;
......@@ -69,30 +81,54 @@
}
}
.allList{
margin-top: 15px;
}
.default-metric{
width: 90%;
text-align: right;
margin-top: 15px;
.position{
&-graph{
position: relative;
}
&-noData{
position: absolute;
left: 48%;
top: 30%;
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{
position: relative;
.yAxis{
color: #333;
position: absolute;
left: 45%;
top: 86%;
left: 50%;
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": {
"outDir": "build/dist",
"module": "esnext",
"target": "esnext",
"target": "es5",
"lib": [
"esnext",
"dom"
"dom",
"dom.iterable",
"esnext"
],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"skipLibCheck": true,
"esModuleInterop": true,
"downlevelIteration": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"baseUrl": "."
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"jsx": "preserve"
},
"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