http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/common.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/common.less b/falcon-ui/app/css/styles/common.less index 92a8020..1ce62f7 100644 --- a/falcon-ui/app/css/styles/common.less +++ b/falcon-ui/app/css/styles/common.less @@ -22,6 +22,22 @@ html, body { height: 100%; } body { background-color: rgba(246, 246, 246, 1); } +.color-success{ + color: #3c763d !important; +} +.color-info{ + color: #31708f !important; +} +.color-warning{ + color: #8a6d3b !important; +} +.color-danger{ + color: #a94442 !important; +} +.error{ + color: #ff3333 !important; +} + //--------------------VALIDATION---------------------// @shadow-valid: rgba(0, 255, 0, .6); @shadow-invalid: rgba(255, 0, 0, .6); @@ -51,6 +67,7 @@ input { border-color: inherit; } } + .ng-invalid.ng-dirty { border-color: lighten(red, 10%); &:focus.empty { @@ -151,7 +168,7 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu .mainUIView { //padding: 10px 0 30px 0; padding-top: 10px; - padding-bottom: 30px; + padding-bottom: 30px; } //-----------------------------------------// //----------------FILE UPLOAD---------------------// @@ -185,6 +202,19 @@ input[type="password"]{ color: black; padding:0; } +.dateInput { + //padding-right: 25px!important; +} +.dateInputIcon { + position: absolute; + background-color: white; + z-index: 2; + right: 5px; + bottom:5px; + /*top: 6px;*/ + line-height: 15px; + font-size: 30px!important; +} //-------------------------// .padding0 { padding: 0; @@ -195,15 +225,7 @@ input[type="password"]{ .buttonsWrapper { text-align: center; } -.entitySummary { - text-align: center; - h3 { font-size:24px; } - h5 { font-size:12px; } - h3, h5 { - margin:0; - } -} - +//-----------------------// .logoutBar { position: absolute; bottom:5px; @@ -221,3 +243,638 @@ input[type="password"]{ .timePicker { margin-top:-10px!important; } + +@summarySuccess: #009900; +@summaryWarning: #E6DD00; +@summaryDanger: #FF0000; + +.entitySummary { + text-align: center; + .whiteBox { + background-color: white; + border-radius: 3px; + margin: 0 7px 0 0; + padding: 5px 0; + &:first-child { + margin: 0 5px; + } + } + h3, h5 { + margin:0; + } + h3 { font-size:35px; } + h5 { font-size:9px; font-weight: bold; } + .notBold { + font-weight: normal; + } +} + +@keyframes blink-success { + 0% { color: @summarySuccess; } + 100% { color: black; } +} +@-webkit-keyframes blink-success { + 0% { color: @summarySuccess; } + 100% { color: black; } +} +.blink-success { + -webkit-animation: blink-success 1s linear infinite; + -moz-animation: blink-success 1s linear infinite; + animation: blink-success 1s linear infinite; +} + +@keyframes blink-warning { + 0% { color: @summaryWarning; } + 100% { color: black; } +} +@-webkit-keyframes blink-warning { + 0% { color: @summaryWarning; } + 100% { color: black; } +} +.blink-warning { + -webkit-animation: blink-warning 1s linear infinite; + -moz-animation: blink-warning 1s linear infinite; + animation: blink-warning 1s linear infinite; +} + +@keyframes blink-danger { + 0% { color: @summaryWarning; } + 100% { color: black; } +} +@-webkit-keyframes blink-danger { + 0% { color: @summaryWarning; } + 100% { color: black; } +} +.blink-danger { + -webkit-animation: blink-danger 1s linear infinite; + -moz-animation: blink-danger 1s linear infinite; + animation: blink-danger 1s linear infinite; +} + +@keyframes blink-notification { + 0% { color: #ffff00; } + 100% { color: white; } +} +@-webkit-keyframes blink-notification { + 0% { color: #ffff00; } + 100% { color: white; } +} +.blink-notification { + -webkit-animation: blink-notification 1s linear infinite; + -moz-animation: blink-notification 1s linear infinite; + animation: blink-notification 1s linear infinite; +} + +.text-success { + color: @summarySuccess; +} +.text-warning { + color: @summaryWarning; +} +.text-danger { + color: @summaryDanger; +} + +.border-left{ + border-left: 2px solid @gray-lighter; +} + +.border-right{ + border-right: 2px solid @gray-lighter; +} + +.summaryBox { + border-radius: 5px; + border: 1px solid @gray-light2; + margin: 5px 0; + padding: 15px 5px; + font-size: 12px; + background-color: #ffffff; + h4 { + font-weight: bold; + margin:5px 0; + } + h5 { + font-weight: bold; + margin-top:20px; + } + table { + width: 100%; + border-spacing: 5px; + border-collapse: separate; + } + .tableHeader { + width: 70px; + font-weight: bold; + } + textarea { + width: 100%; + } + &.processCluster { + padding: 15px 4%; + margin: 5px auto; + h5 { + margin-top:15px; + &:first-child { + margin-top:0; + } + } + } + .detailsBox{ + margin-left: 10px; + } +} + +/*************************************** SEARCH **************************************/ +.search { + height: 45px; + font-weight: 400; + font-size: 25px; + padding-left: 40px !important; + padding-right: 40px !important; +} + +.searchBoxContainer{ + margin: 25px 0; + .popover{ + right: 5px !important; + width: 400px; + } + .arrow{ + right: 35px !important; + } +} + +.search-icon { + cursor: pointer; + position: absolute; + top: 13px; + left: 13px; + z-index: 2; + display: block; + line-height: 23px; + text-align: center; + font-size: 26px; + color: #777; +} + +.search-loading-icon { + cursor: pointer; + position: absolute; + top: 15px; + left: 15px; + z-index: 2; + display: block; + line-height: 23px; + text-align: center; + font-size: 26px; + color: #777; + margin-right: 40px; +} + +.remove-icon { + cursor: pointer; + position: absolute; + top: 13px; + right: 14px; +// z-index: 2; + display: block; + line-height: 23px; + text-align: center; + font-size: 26px; + color: #777; +} + +.question-icon { + cursor: pointer; + position: absolute; + top: 13px; + right: 40px; +// z-index: 2; + display: block; + line-height: 23px; + text-align: center; + font-size: 26px; + color: #777; + margin-right: 5px; +} + +.searchBox { + display: inline-block; + .entityTypeButtons { + display: inline-block; + background-color: @gray-light2; + border-radius: 7px; + padding: 4px; + + .btn { + background-color: @gray-light2; + border-radius: 7px; + border: none; + outline: none!important; + line-height: 1; + padding: 5px; + &.active { + background-color: @gray-light; + color: white; + } + &:focus { + + } + } + } +} + +.filtersSearchBox{ + .padding0{ + min-width: 115px; + } +} + +tags-input { + display: block; + height: 40px; +} +tags-input *, tags-input *:before, tags-input *:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +tags-input .host { + position: relative; + margin-top: 5px; + margin-bottom: 5px; + height: 100%; +} +tags-input .host:active { + outline: none; +} + +tags-input .tags { + -moz-appearance: textfield; + -webkit-appearance: textfield; + padding: 1px; + overflow: hidden; + word-wrap: break-word; + cursor: text; + background-color: white; +// border: 1px solid darkgray; +// box-shadow: 1px 1px 1px 0 lightgray inset; + height: 100%; + padding-left: 40px; +} +tags-input .tags.focused { + outline: none; + -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); + -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); + box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); +} +tags-input .tags .tag-list { + margin: 0; + padding: 0; + list-style-type: none; +} +tags-input .tags .tag-item { + margin: 3px; + padding: 3px; + display: inline-block; + float: left; + font: 18px cabin, Arial, sans-serif; + height: 32px; + line-height: 25px; + border: 1px solid #acacac; + border-radius: 3px; + background: -webkit-linear-gradient(top, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%); + background: linear-gradient(to bottom, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%); +} +tags-input .tags .tag-item.selected { + background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); + background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); +} +tags-input .tags .tag-item .remove-button { + margin: 0 0 0 5px; + padding: 0; + border: none; + background: none; + cursor: pointer; + vertical-align: middle; + font: bold 18px cabin, Arial, sans-serif; + color: #585858; +} +tags-input .tags .tag-item .remove-button:active { + color: red; +} +tags-input .tags .input { + border: 0; + outline: none; + margin: 2px; + padding: 0; + padding-left: 5px; + float: left; + height: 32px; + font: 18px cabin, Arial, sans-serif; +} +tags-input .tags .input.invalid-tag { + color: red; +} +tags-input .tags .input::-ms-clear { + display: none; +} +tags-input.ng-invalid .tags { + -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6); + -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6); + box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6); +} + +tags-input .autocomplete { + margin-top: 5px; + position: absolute; + padding: 5px 0; + z-index: 999; + width: 100%; + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} +tags-input .autocomplete .suggestion-list { + margin: 0; + padding: 0; + list-style-type: none; +} +tags-input .autocomplete .suggestion-item { + padding: 5px 10px; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font: 16px cabin, Arial, sans-serif; + color: black; + background-color: white; +} +tags-input .autocomplete .suggestion-item.selected { + color: white; + background-color: #0097cf; +} +tags-input .autocomplete .suggestion-item.selected em { + color: white; + background-color: #0097cf; +} +tags-input .autocomplete .suggestion-item em { + font: normal bold 16px cabin, Arial, sans-serif; + color: black; + background-color: white; +} + +.tag-striked{ + text-decoration: line-through; +} + +.pagination { + margin: 10px 0 5px 0; +} + +.pagDisabled{ + cursor: default !important; + background-color: #eee !important; +} + +.no-margin{ + margin: 0; +} + +.buttonsRow { + height: 43px; + td { + border-top: none; + border-bottom: 1px solid @gray-lighter; + } + margin-bottom: 8px; +} + +.buttonCell { + .entypo, div { + display: inline-block; + vertical-align: middle; + } + .entypo { + font-size: 22px; + vertical-align: sub; + //margin: 6px 0 0 0; + //line-height: 18px; + } + div { + //margin: 3px 0 0 0; + } +} + +.btn-gray { + color: #333; + background-color: #ccc; + border-color: #ccc; +} + +.btn-big { + color: #333; + background-color: #ccc; + border-color: #ccc; + padding: 8px; + font-size: 14px; +} + +.instance-title{ + margin: 0; + padding: 10px; +} + +.instance-status{ + margin-top: 8px; +} + +.animate-show { + line-height: 20px; + opacity: 1; + padding: 10px; +} + +.animate-show.ng-hide-add.ng-hide-add-active, +.animate-show.ng-hide-remove.ng-hide-remove-active { + -webkit-transition: all linear 0.5s; + transition: all linear 0.5s; +} + +.animate-show.ng-hide { + line-height: 0; + opacity: 0; + padding: 0 10px; +} + +.vertical-align { + min-height: 5vh; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align : center; + -webkit-align-items : center; + -moz-box-align : center; + -ms-flex-align : center; + align-items : center; + width: 100%; +} + +.dependencies-graph{ + text-align: center; +} + +/** + DEPENDENCIES & LINEAGE GRAPHS +**/ + +.node { + .foreignObject { + padding: 5px; + } +} + +.node-name:before { + font-family: 'Glyphicons Halflings'; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + line-height: 1; + padding-right: 0.3em; + vertical-align: -20%; + font-size: 110%; + color: #428bca; +} + +.node-name-cluster:before { + content: "\2601"; +} + +.node-name-process:before { + content: "\e110"; +} + +.node-name-feed:before { + content: "\e181"; +} + +.node rect { + stroke-width: 0.5px; + stroke: #999; + fill: @gray-dark; + fill-opacity: 5%; + &:hover { + fill-opacity: 10%; + } +} + +.edge path { + fill: none; + stroke: #333; + stroke-width: 1px; +} + +.node-name { + font-size: 12px; + vertical-align: middle; + margin: 10px; +} + +.lineage-link { + fill: none; + stroke: #eee; + stroke-width: 1.5px; +} + +.lineage-node, .lineage-href { + cursor: pointer; +} + +.lineage-node-terminal { + stroke: #000; + stroke-opacity: 0.3; + stroke-width: 8px; +} + +.lineage-node-active { + stroke: #45a2b5; + stroke-opacity: 0.3; + stroke-width: 8px; +} + +.lineage-node-text { + font-size: 8pt; + fill: #fff; + word-wrap: break-word; +} + +.lineage-node-feed-instance { + fill: #6ab545; +} + +.lineage-node-process-instance { + fill: #456ab5; +} + +ul.lineage-legend { + list-style-type: none; +} + +.lineage-legend li { + padding-left: 20px; + display: inline; +} + +ul.lineage-legend li:before { + content: "\25cf"; + position: relative; + display: inline-block; + top: 2px; + font-style: normal; + font-size: 16pt; + line-height: 1; + -webkit-font-smoothing: antialiased; + padding-right: 5px; +} + +.lineage-legend-feed-inst:before { + color: #6ab545; +} + +.lineage-legend-process-inst:before { + color: #456ab5; +} + + +.lineage-legend-terminal:before { + -webkit-text-stroke-width: 2px; + -webkit-text-stroke-color: #ccc; +} + +/* ALERT MESSAGE */ + +.alert { + font-size: 16px; +} + +.no-outline{ + outline: 0; +} + +.tittle-in-row{ + margin-top: 20px !important; + margin-bottom: 0px !important; +} + +.icon-lg{ + font-size: 40px !important; +} + +.prettyXml{ + min-height: 800px; +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/dataset-form.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/dataset-form.less b/falcon-ui/app/css/styles/dataset-form.less new file mode 100644 index 0000000..1416dba --- /dev/null +++ b/falcon-ui/app/css/styles/dataset-form.less @@ -0,0 +1,494 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +//----------------mozilla outline hack-------------------// +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +.btn:focus, .btn:active, .btn:active:focus, .btn.active:focus, .btn:visited { + outline: none; + outline-offset: 0; +} + +//--------helpers-----------------// +.pa { position: absolute; } +.pr { position: relative; } + +.p0 { padding: 0; } +.p5 { padding: 5px; } +.p10 { padding: 10px; } +.p15 { padding: 15px; } +.p20 { padding: 20px; } + +.m0 { margin: 0; } +.m20 { margin: 20px; } +.mt5 { margin-top: 5px; } +.mt10 { margin-top: 10px; } +.mt15 { margin-top: 15px; } +.mt20 { margin-top: 20px; } +.mb5 { margin-bottom: 5px; } +.mb10 { margin-bottom: 10px; } +.mb15 { margin-bottom: 15px; } +.mb20 { margin-bottom: 20px; } + +.tl { text-align: left; } +.tc { text-align: center; } +.tr { text-align: right; } + +.pointer{ cursor: pointer; } +.db { display: block; } + +//-----------------------------------------// + +@nextBtnBackground: #666666; +@prevBtnBackground: #CCCCCC; + +#sourceClusterSelect, #targetClusterSelect { + display: block; + margin-bottom: 8px; +} +#formBox { + padding: 0 2%; + .dateInput { + padding-right:0!important; + } + .formBoxWrapper { + width: 500px; + margin:0 auto; + } + .locationBox { + label { margin:0 0 10px 0 }; + } + + label { + font-weight: normal; + font-size: 11px; + max-width: none; + + } + input[type="text"], select { + .p0; + padding-left: 1px; + font-size: 13px; + line-height: 15px; + height: 25px; + } + textarea { + .p0; + padding-left: 1px; + font-size: 13px; + line-height: 15px; + } + .tablesTextArea { + height: 50px; + } + .databasesTextArea { + height: 97px; + } + + a { + line-height: 30px; + cursor: pointer; + margin: 5px 15px; + text-decoration: underline; + color: black; + &:focus { + color: red; + } + } + h4 { + font-size: 14px; + font-weight: 700; + } + + .formTitol { + width: 500px; + margin:0 auto; + padding-top: 10px; + padding-bottom: 10px; + h1 { + font-size: 22px; + font-weight: bold; + margin:0; + } + a { + font-size: 12px; + line-height: 12px; + margin:0; + letter-spacing: 0.5px; + } + } + .tagsBox, .alertsBox { + .btn { + border-radius: 5px; + padding: 1px; + border-color: @gray; + height: 25px; + width: 65px; + line-height: 23px; + .glyphicon { + font-size: 8px; + line-height: 8px; + top:0; + color: @gray; + } + } + } + + .typeButtonsBox { + background-color: @gray-lighter; + width: 264px; + padding:5px; + border-radius: 5px; + .btn { + padding: 5px 20px; + border-radius: 5px; + background-color: @gray-lighter; + border: none; + &.active { + background-color: @gray; + color: white; + } + } + } + + .formBoxWrapper { + border: 1px solid @gray-lighter; + border-radius:3px; + .p20; + } + + .clusterBox { + border: 1px solid @gray-light; + border-radius: 5px; + .mt20; + .mb10; + padding-top: 15px; + padding-bottom: 15px; + + h3, .runJobOnBox { + .pa; + background-color: white; + padding: 0 5px; + } + + h3 { + font-size: 16px; + font-weight: 700; + display: inline-block; + top: -30px; + + } + .runJobOnBox { + width: 110px; + right: 5px; + top: -13px; + } + .hiveDatabasesTitol { + font-size: 12px; + padding-left: 5px; + } + .databaseRadioBox{ + font-size: 12px; + input { + margin-left: 5px; + } + } + } + .alertsBox { + .mt10; + h4 { + margin: 0; + } + .emailBox { + padding-right: 5px; + width: 82%; + display: inline-block; + vertical-align: top; + .db { margin:0; } + margin-bottom:5px; + label { + width: 100%; + } + } + .addAlertBox { + margin-bottom:5px; + margin-left: 10px; + display: inline-block; + vertical-align: top; + margin-top: 24px; + } + .emailArrayRow { + height: 25px; + font-size: 12px; + line-height: 25px; + margin-bottom: 5px; + span { + font-weight: bold; + } + button { + float: right; + margin-right: 4px; + } + } + } + +} +.advancedOptionsButton { + cursor: pointer; + hr { + width: 67%; + margin-top: -7px; + margin-bottom:0; + margin-left: 128px; + border-top: 1px solid @gray-dark; + } + span.entypo { + float: right; + margin: 7px 5px; + font-size: 50px; + } +} +#advancedOptionsBox { + .transition(max-height 1s ease); + max-height: 0; + overflow: hidden; + &.expanded { + max-height: 850px; + } + .frequencyBox { + width: 36%; + display: inline-block; + vertical-align: top; + input, select { + display: inline-block; + } + input { + width: 20px; + } + select { + width: 80px; + } + label { + margin:0; + } + } + + .allocationBox { + >div>div { + width: 24%; + display: inline-block; + } + + } + .retryBox { + .policyBox { + width: 45%; + select { + width: 170px; + } + } + + > div { + width: 30%; + display: inline-block; + input, select { + display: inline-block; + } + input { + width: 20px; + } + select { + width: 80px; + } + label { + margin:0; + } + &:last-child { + width: 20%; + text-align: right; + padding-right: 20px; + } + } + } + + .hiveOptBox { + label { + display: block; + } + } +} + + +//---------------SUMMARY------------------// + +#formSummaryBox { + font-size: 12px; + h4 { + margin-bottom:0; + font-size: 12px; + } + h5 { + font-size: 12px; + font-weight: bold; + display: inline-block; + } + span { + font-weight: bold; + } + .lightSubtitle { + color: @gray-light; + font-weight: bold; + font-size: 14px; + } + .box { + position: relative; + border: 1px solid @gray-lighter; + border-radius: 5px; + padding: 15px; + margin-top: 15px; + + h3 { + font-size: 18px; + margin-top: -25px; + margin-left: -10px; + padding: 0 5px; + background-color: white; + display: inline-block; + position: absolute; + } + h4 { + margin-top:0; + } + + } + .allocationSubBox { + width: 32%; + display: inline-block; + } + .previewBox { + text-align: right; + } + #jsonPreview { + width: 190px; + .mt20; + .mb20; + } + +} + + +////////////////////////////// + +#formBox { + .progressBox { + height: 75px; + .pr; + } + .progressBar { + overflow: hidden; + padding: 0 35px 10px; + height: 100px; + + h6 { + font-size: 10px; + white-space: nowrap; + } + span { + width: auto; + } + } + + .fir, .sec { + .pa; + .transition(border, 0.4s, ease); + .transition(background, 0.4s, ease); + width: 40px; + height: 40px; + display: inline-block; + border: 3px solid @gray-light; + border-radius: 20px; + color: white; + line-height: 34px; + font-size: 18px; + font-weight: bold; + text-align: center; + span { + display: none; + } + h6 { .m0; .pa; top: 40px; color: black; } + + } + .fir { + left:0; + h6 { + left: -5%; + } + } + .sec { + right: 0; + margin-left: -20px; + z-index: 4; + h6 { + left: -10%; + } + } + + .bar1 { + .transition(all, 0.4s, ease); + .pa; + z-index: 3; + top:13px; + height: 10px; + background-color: @gray-light; + z-index: 5; + left: 38px; + right: 32px; + border-width:0; + } + .general { + .bar1 { background-color: @gray-light; } + .fir { + background-color: @gray-dark; + h6 { font-weight: bold; } + } + .sec { + background-color: @gray-light; + h6 { font-weight: normal; } + } + + } + + .summary { + .bar1 { background-color: @gray-dark; } + .fir { + h6 { font-weight: normal; } + background-color: @gray-dark; + border-color: @gray-dark; + span { + display: inline-block; + } + b { + display: none; + } + } + .sec { + background-color: @gray-dark; + h6 { font-weight: bold; } + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/entities-list.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/entities-list.less b/falcon-ui/app/css/styles/entities-list.less index feb50e3..6ea757f 100644 --- a/falcon-ui/app/css/styles/entities-list.less +++ b/falcon-ui/app/css/styles/entities-list.less @@ -16,16 +16,17 @@ * limitations under the License. */ .dashboardBox { + padding: 0; h3 { margin: 0 0 5px 0; } } -.listTable { +.listTable { margin-top: 5px; border-collapse: separate; border-radius: 4px; - border: 1px solid @gray; + //border: 1px solid @gray; width: 100%; min-height: 140px; overflow: hidden; @@ -55,7 +56,7 @@ //.trayAnimation; } } - + } h5 { text-align: left; @@ -76,6 +77,7 @@ tbody { padding: 5px; display: table-row-group; + background-color: white; } tr { width: 100%; @@ -86,6 +88,9 @@ width: 35%; float:left; margin: 3px 1%; + &.clusterFilters { + width: 48%; + } } .filtersSelectBox { float:left; @@ -97,21 +102,30 @@ padding:0; font-size: 10px; } - } - .buttonsRow { - height: 41px; - td { - border-top: none; - } - } - .buttonCell {} + } + + .entityRow { + &:hover, &.rowSelected { + background: #F2F2F2; + td { + border-color: #E2E2E2; + } + } + td { - padding: 0 5px; + padding: 3px 3px; + line-height: 22px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + vertical-align: middle; + } + &.firstEntityRow { + td { padding-top: 6px; } } - &:last-child { + &.lastEntityRow { td { - border-bottom: none; + padding-bottom: 6px; } } } @@ -130,12 +144,8 @@ input[type="radio"] { margin: -1px 0 0 -18px; font-size: 10px; - } - .entypo { - font-size: 20px; - margin: 8px 0 0 0; - display: inline-block; - } + } + .nameCell { cursor: pointer; &:hover { @@ -143,7 +153,7 @@ } } } -.buttons-to-show { +.buttons-to-show { margin:2px 0; } /* LOGIN */ @@ -164,3 +174,39 @@ color: gray; } } + +/* New Dashboard */ + +.filtersResultBox { + font-weight: normal; +// font-size: 14px; + width: 35%; + float:left; + margin: 3px 1%; + &.clusterFilters { + width: 48%; + } +} + +.tag:hover { + cursor: pointer; + color: #fff; + background-color: #5fa33e; + font-weight: bold; +} + + + + +.waitingLayer { + position: absolute; + background-color: red; + width: 100%; + height:100%; + opacity:0; + z-index: -1; + .active { + opacity:1; + z-index: 2; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/entity-summary.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/entity-summary.less b/falcon-ui/app/css/styles/entity-summary.less new file mode 100644 index 0000000..5d5f1e3 --- /dev/null +++ b/falcon-ui/app/css/styles/entity-summary.less @@ -0,0 +1,17 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/form-pages.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/form-pages.less b/falcon-ui/app/css/styles/form-pages.less index 6f27ff5..957e148 100644 --- a/falcon-ui/app/css/styles/form-pages.less +++ b/falcon-ui/app/css/styles/form-pages.less @@ -20,6 +20,9 @@ .mt1 { margin-top: 1px; } +.mt5 { + margin-top: 5px; +} .mt10 { margin-top: 10px; } @@ -31,19 +34,83 @@ } .formViewContainer { .mt10; + } -.feedBottomButtons { - .mt20; +//-----------------next and previous buttons----------// +@nextBtnBackground: #666666; +@prevBtnBackground: #CCCCCC; +.nextBtn, .prevBtn { + .transition(background, 0.3s, ease); + border: 0px none; + width: 90px; + border-radius: 7px!important; + padding: 10px; +} +.nextBtn { + background: @nextBtnBackground; + color: white; + &:hover { + background: darken(@nextBtnBackground, 10%); + color: white; + outline: hidden; + border-radius: 7px!important; + } + &:focus, &:active, &:visited { + background: darken(@nextBtnBackground, 10%); + color: white; + outline: hidden; + border-radius: 10px!important; + } +} +.prevBtn { + background: @prevBtnBackground; + &:hover { + background: darken(@prevBtnBackground, 10%); + outline: hidden; + border-radius: 7px!important; + } + &:focus, &:active, &:visited { + background: darken(@prevBtnBackground, 10%); + outline: hidden; + border-radius: 10px!important; + } +} +//-----------------------------------------------------// +.aclBox { + .mt10; + + > div { + label { + margin-top:5px; + font-weight: normal; + width: 95%; + } + width: 32%; + display: inline-block; + vertical-align: top; + } +} +.dt { + //display: table; +} +@media screen and (max-width: @grid-float-breakpoint) { + .xmlPreviewContainer { + position: relative; + left:0; + top:0; + width: 500px; + } } .formPage { - + h3 { font-weight: bold; } .entypo { font-size: 22px; - line-height: 10px; - vertical-align: middle; + /* line-height: 14px;*/ + /*vertical-align: top; + display: inline-table;*/ } h4 { font-size: 14px; @@ -66,30 +133,36 @@ .light { font-weight: normal; } - u { + a { line-height: 30px; cursor: pointer; + margin: 5px 15px; + text-decoration: underline; + color: black; + &:focus { + color: red; + } } input, select { - color: black; + color: @gray-darker; font-size: 13px; } .input-group-addon { height:13px; border-radius:0; } - + } -select { - .form-control; +select { + .form-control; padding:0; } #engineVersionField{ display: inline-block; width: auto; } .inlineInputsGroup { - input { - display: inline-block; - margin-right: 3px; - &:last-child { margin-right:0;} + input { + display: inline-block; + margin-right: 3px; + &:last-child { margin-right:0;} } input[type="text"] { width: 20px; @@ -121,7 +194,7 @@ select { font-size: 35px; line-height: 9px; } - + } .clusterSummaryRow { padding: 0 10px; @@ -140,8 +213,8 @@ select { } margin-top: 5px; } - - + + } #feedPropertiesBox { label { @@ -153,7 +226,7 @@ select { margin-top: 10px; } label { - font-size: 10px; + font-size: 12px; margin:0; } input[type="checkbox"] { @@ -191,12 +264,34 @@ select { } .feedLocationNav { color: black; + .btn { - background-color: @gray-light; + position: relative; + background-color: lighten(@gray-light2, 20%); + border-radius: 5px; + font-size: 12px; + letter-spacing: 0.5px; + padding: 4px 20px; + + &:last-child { + margin-right: -12px; + } } .active { color: white; - background-color: @gray-dark; + background-color:lighten(@gray, 20%); + z-index: 1234; + } + &.disabled { + .btn { + background-color: lighten(@gray-light2, 30%); + opacity:1; + color: @gray-light2; + } + .active { + background-color:lighten(@gray, 30%); + color: white; + } } } @@ -234,7 +329,7 @@ select { } } - .validityDateBox { + /*.validityDateBox { .light { display: block; } @@ -242,7 +337,7 @@ select { display: inline-block; } - } + }*/ .input-group { input { font-size: 12px; @@ -290,18 +385,24 @@ select { color: white; } } + +@media screen and (max-width: @grid-float-breakpoint) { + .detailsBox { + float:none!important; + } +} .detailsBox { border-radius: 5px; border: 1px solid @gray-light2; - margin: 5px; + margin: 5px 0; padding: 15px 5px; font-size: 12px; background-color: #ffffff; h4 { - font-weight: bold; + font-weight: bold; margin:5px 0; } - h5 { + h5 { font-weight: bold; margin-top:2px; } @@ -320,7 +421,7 @@ select { &.processCluster { padding: 15px 4%; margin: 5px auto; - h5 { + h5 { margin-top:15px; &:first-child { margin-top:0; @@ -328,3 +429,92 @@ select { } } } + +.detailsBT{ + .entypo{ + font-size: 1.5em; + } + color: #fff; + padding: 3px 8px; + border: 1px solid white; + border-radius: 5px; + border-color: #fff; + display: inline-block; + cursor: auto; + background-color: #5fa33e; +} + + +/////////////////////////////////////////////// +///////VALIDITY BOXES////////////////////////// +/////////////////////////////////////////////// +.validityBox { + label, input, button { + font-weight: normal; + } + + > div { + display: inline-block; + margin: 0 2px; + } + + h4 { + margin-top: 5px; + margin-bottom: 0; + } + .startDateBox, .endDateBox { + width: 20%; + vertical-align: top; + } + .startTimeBox, .endTimeBox { + width: 15%; + vertical-align: top; + padding-left:0; + input { + //width: 20px; + //margin:0; + } + button { + border-radius: 0; + width: 25px; + height: 25px; + padding:0; + margin-left: 1px; + } + table { + width: auto; + border-spacing: 0; + tr { + &:first-child { + display: none; + } + &:last-child { + display: none; + } + } + } + + a { + display: none!important; + } + } + .endDateBox { + + } + .endTimeBox { + + } + .tzBox { + width: 22%; + //padding-top: 20px; + } +} + +.feedForm, .entityForm { + .validityBox { + .startDateBox, .endDateBox { width: 27%;} + .startTimeBox, .endTimeBox {width: 17%;} + .endDateBox { margin-left: 20px;} + .error_input { border:1px solid red !important;} + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/nav-header.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/nav-header.less b/falcon-ui/app/css/styles/nav-header.less index 7bc160e..2be45af 100644 --- a/falcon-ui/app/css/styles/nav-header.less +++ b/falcon-ui/app/css/styles/nav-header.less @@ -27,8 +27,25 @@ border-width: 0; border-radius: 0; position: relative; + &:hover{ + cursor: default; + } +} +.logoTitle { + background: transparent; + border: none; + float: left; + h1 span{ + vertical-align: middle; + display: inline-block; + } + .falconLogo{ + background: url(img/falcon.png) no-repeat center center; + background-size: 100%; + width: 30px; + height: 44px; + } } - .navbar-header { margin: 5px 15px 5px 5px; font-size: 30px; @@ -47,51 +64,177 @@ font-weight: bold; margin: 2px 0; } - > div { + > button { padding: 5px 10px; border: 1px solid white; border-radius: 3px; display: inline-block; cursor: pointer; + background-color: transparent; + } + span { + vertical-align: middle; + margin-right: 6px; + &.entypo, &.glyphicon{ + vertical-align: sub; + &.up{ + font-size: 2.2em; + } + } } .disabled { - color: lighten(@headerNavBG, 10%); - border-color: lighten(@headerNavBG, 10%); + //color: lighten(@headerNavBG, 30%); + //border-color: lighten(@headerNavBG, 10%); cursor: default; + .background-opacity(black, 0.2); } } .uploadNavWrapper { > div { min-width:183px; + padding: 5px 10px; + border: 1px solid white; + border-radius: 3px; + display: inline-block; + cursor: pointer; + &.fakeFocus { + .box-shadow(0 0 2px white); + } } } - .loginHeaderBox { margin: 0; display: inline-block; //width: 100%; - text-align:right; + text-align: right; + margin-top: 10px; + .pull-right; - div { + >*{ + vertical-align: middle; display: inline-block; margin-right: 10px; + >*{ + display: inline-block; + vertical-align: middle; + } + } + span.entypo{ + vertical-align: sub; + } + span.user{ + background: url(img/user.svg) no-repeat center center; + background-size: 35px 35px; + height: 35px; + width: 35px; + } + button { + border: none; + cursor: pointer; + background-color: transparent; + } + a { + color: white; + cursor: pointer; + overflow: hidden; + background-color: transparent; + &:hover { + text-decoration: none; + } + &:focus { + text-decoration: none; + } } } -@media screen and (min-width:880px) { - .loginHeaderBox { - margin-top: 36px; - } +/* NOTIFICATIONS */ + +.notifications .messages { + display:none; + position: absolute; + top:50px; + right:0px; + width:280px; + max-width:280px; + max-height:300px; + overflow: auto; } -@media screen and (max-width:880px) { - .loginHeaderBox { - //margin-top: 40px; - width: 100px; - } + +.messagesArrow { + content:'.'; + display:none; + position:absolute; + margin-left:-10px; + top:30px; + right:130px; + width:0; + height:0; + color:transparent; + border:10px solid black; + border-color:transparent transparent white; +} + +.notifications .messages:before { + content:'.'; + display:block; + position:absolute; + margin-left:-10px; + left:50%; + top:-18px; + width:0; + height:0; + color:transparent; + border:10px solid black; + border-color:transparent transparent white; +} + +.badge-notify{ + background:red; + position:relative; + top: -15px; + right: -35px; } -@media screen and (max-width:610px) { - .loginHeaderBox { - //margin-top: 40px; - width: 100%; + +.notifications .messages .message { + display:block; + position:relative; + padding:10px; + background-color:white; + text-decoration:none; + a { + font-weight: bold; + text-decoration: underline; } +} + +.notifications .messages .message + .message { + border-top:1px solid #e0e0e0; +} + +.icon-notif{ + margin-right: 10px; +} + +.no-margin-right{ + margin-right: 0; +} + +.bell-notif{ + margin-right: 10px; +} + +.header-icon{ + font-size: 18px; +} + +.logoutBT{ + margin-right: -20px; +} + +.no-outline{ + outline: 0; +} + +.unreaded-notif { + background-color: #EDEDED !important; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/popover.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/popover.less b/falcon-ui/app/css/styles/popover.less new file mode 100644 index 0000000..4218bc2 --- /dev/null +++ b/falcon-ui/app/css/styles/popover.less @@ -0,0 +1,230 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@popover-bg-color: #fff; +@popover-border-color: #d2d2d2; + +@popover-triangle-size: 11px; +@popover-triangle-color: @popover-bg-color; +@popover-triangle-border-color: @popover-border-color; + +.ns-popover-list-theme { + box-sizing: border-box; + border: solid 1px @popover-border-color; + border-radius: 3px; + z-index: 100; + background-color: #fff; + -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + + ul, .list { + padding: 0; + margin: 0.625rem 0; + display: block; + } + + li, .list-item { + list-style-type: none; + + a { + padding: 0.1875rem 0.625rem; + display: block; + + &:hover { + background-color: #f5f5f5; + } + } + } +} + +// @mixins +// +// We use this to create equilateral triangles +// @triangle-size - Used to set border-size. No default, set a px or em size. +// @triangle-color - Used to set border-color which makes up triangle. No default +// @triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right +.triangle(@triangle-direction, + @triangle-size:@popover-triangle-size, + @triangle-color:@popover-triangle-color, + @triangle-border-color:@popover-triangle-border-color) { + content: ""; + display: block; + width: 0; + height: 0; + border: solid @triangle-size; + border-color: transparent; + position: absolute; + + &:after { + content: " "; + display: block; + width:0; + height:0; + border: solid 10px; + border-color: transparent; + position: absolute; + } + + & when (@triangle-direction = "top") { + border-top-color: @triangle-border-color; + left:50%; + bottom: -@triangle-size; + margin-left: -@triangle-size; + + &:after { + border-top-color: @triangle-color; + border-bottom-width: 0; + bottom: 1px; + margin-left: -10px; + } + } + + & when (@triangle-direction = "bottom") { + border-bottom-color: @triangle-border-color; + left:50%; + top: -@triangle-size; + margin-left: -@triangle-size; + + &:after { + border-bottom-color: @triangle-color; + border-top-width: 0; + top: 1px; + margin-left: -10px; + } + } + + & when (@triangle-direction = "left") { + border-left-color: @triangle-border-color; + top:50%; + right: -@triangle-size; + margin-top: -@triangle-size; + + &:after { + border-left-color: @triangle-color; + border-right-width: 0; + right: 1px; + bottom: -10px; + } + } + + & when (@triangle-direction = "right") { + border-right-color: @triangle-border-color; + top:50%; + left: -@triangle-size; + margin-top: -@triangle-size; + + &:after { + border-right-color: @triangle-color; + border-left-width: 0; + left: 1px; + bottom: -10px; + } + } +} + +.ns-popover-tooltip-theme { + box-sizing: border-box; + z-index: 100; + background-color: transparent; + + .ns-popover-tooltip { + box-sizing: border-box; + border: solid 1px @popover-border-color; + border-radius: 3px; + z-index: 100; + background-color: #fff; + padding: 0.5625rem 0.875rem; + -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2); + margin: 10px; + + h5 { + font-weight: bold; + font-size: 16px; + color: #777; + } + + ul { + padding: 0; + margin: 0.625rem 0; + display: block; + } + + li { + list-style-type: none; + + a { + padding: 0.1875rem 0.625rem; + display: block; + + &:hover { + background-color: #f5f5f5; + } + } + } + } + + &.ns-popover-bottom-placement { + .triangle { + .triangle("bottom"); + } + } + + &.ns-popover-top-placement { + .triangle { + .triangle("top"); + } + } + + &.ns-popover-right-placement { + .triangle { + .triangle("right"); + } + } + + &.ns-popover-left-placement { + .triangle { + .triangle("left"); + } + } + + &.ns-popover-left-align { + .ns-popover-tooltip { + margin-left: 0; + } + } + + &.ns-popover-right-align { + .ns-popover-tooltip { + margin-right: 0; + } + } + + &.ns-popover-top-align { + .ns-popover-tooltip { + margin-top: 0; + } + } + + &.ns-popover-bottom-align { + .ns-popover-tooltip { + margin-bottom: 0; + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/progress-bar.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/progress-bar.less b/falcon-ui/app/css/styles/progress-bar.less index 21b03d8..5f0ad01 100644 --- a/falcon-ui/app/css/styles/progress-bar.less +++ b/falcon-ui/app/css/styles/progress-bar.less @@ -23,42 +23,56 @@ overflow: hidden; padding: 10px 35px; .entypo { - font-size: 37px; - line-height: 0; + /*float: none!important; + position: absolute; + margin: 0!important; + top:0; + left:0;*/ + /* line-height: 36px; + height: 36px; + width: 36px;*/ + + color: white; + z-index:2; + position: relative; + display: none; + font-size: 36px; + + margin: -24px -15px 0 0!important; } div { .transition(background-color, 0.5s, ease-out); background-color: @gray-light; height: 10px; border-top:2px solid @gray-light; - border-bottom:2px solid @gray-light; + border-bottom:2px solid @gray-light; span { display: block; width: 55px; span { display: none;} &:first-child { float: left; - margin: -10px 0 0 -17px; + margin: -10px 0 0 -17px; h6 { font-weight: bold; } } &:last-child { float: right; - margin: -10px -15px 0 0; + margin: -10px -15px 0 0; div { background-color: @gray-light; - } - } + } + } h6 { margin: 0; font-size: 10px; } - } + } div { display: inline-block; - border-radius: 30px; - line-height: 27px; + border-radius: 30px; + line-height: 27px; width: 30px; height: 30px; text-align: center; @@ -80,14 +94,8 @@ background-color: @gray-dark; border-color: @gray-dark; span { - &:first-child { - span { - color: white; - display: block; - z-index:2; - position: relative; - margin-top: -13px; - } + &:first-child { + .entypo { display: block;} div { color: @gray-dark; border-color: @gray-dark; @@ -103,7 +111,7 @@ h6 { font-weight: bold; } - } + } } } } @@ -111,14 +119,6 @@ } .feedProgressBox { font-size: 14px; - .entypo { - color: white; - z-index:2; - position: relative; - display: none; - font-size: 36px; - margin: -13px -15px 0 0!important; - } .progressBar { padding: 10px 6% 0 6%; >div { @@ -127,18 +127,18 @@ width: 24%; margin: -11px 0 0 0; &:first-child { - margin: -10px 0 0 -4%; + margin: -10px 0 0 -4%; h6 { font-weight: normal; - } + } } &:last-child { - margin: -10px -21% 0 0; + margin: -10px -21% 0 0; } - div { + div { background-color: @gray-dark; - } - } + } + } div { border-color: @gray-light; } @@ -150,32 +150,32 @@ } &.general { .fir { - background-color: @gray-dark; - & + h6 { font-weight: bold!important; } + background-color: @gray-dark; + & + h6 { font-weight: bold!important; } } .sec, .thi, .fou, .fif { background-color: @gray-light; - } - + } + } &.properties { - .fir { - .entypo {display: block;} + .fir { + .entypo {display: block;} border-color: @gray-dark; color: @gray-dark; } - .sec + h6 { font-weight: bold; } + .sec + h6 { font-weight: bold; } .fir, .sec { - background-color: @gray-dark; + background-color: @gray-dark; } .thi, .fou, .fif { - background-color: @gray-light; + background-color: @gray-light; } } &.location { - .thi + h6 { font-weight: bold; } + .thi + h6 { font-weight: bold; } .fir, .sec { - .entypo {display: block;} + .entypo {display: block;} border-color: @gray-dark; color: @gray-dark; } @@ -187,9 +187,9 @@ } } &.clusters { - .fou + h6 { font-weight: bold; } + .fou + h6 { font-weight: bold; } .fir, .sec, .thi { - .entypo {display: block;} + .entypo {display: block;} border-color: @gray-dark; color: @gray-dark; } @@ -201,9 +201,9 @@ } } &.summary { - .fif + h6 { font-weight: bold; } + .fif + h6 { font-weight: bold; } .fir, .sec, .thi, .fou { - .entypo {display: block;} + .entypo {display: block;} border-color: @gray-dark; color: @gray-dark; } @@ -214,16 +214,10 @@ } .processProgressBox { font-size: 14px; - .entypo { - color: white; - z-index:2; - position: relative; - display: none; - font-size: 36px; - margin: -13px -15px 0 0!important; - } + .progressBar { + padding: 10px 6% 0 6%; >div { >span { http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/server-messages.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/server-messages.less b/falcon-ui/app/css/styles/server-messages.less index b606810..0ab7d13 100644 --- a/falcon-ui/app/css/styles/server-messages.less +++ b/falcon-ui/app/css/styles/server-messages.less @@ -18,13 +18,15 @@ //------server messages ------// .alert { position: relative; - margin:5px 0; + display: inline-block; + margin:5px auto 0; + padding: 5px 20px 5px 10px; .box-shadow(~"1px 1px 5px black"); border: 1px solid white; opacity: 1; span { display: inline-block; - margin: auto 5px; + margin: auto 5px; } .entypo { position: absolute; @@ -32,19 +34,35 @@ right:5px; cursor: pointer; } + &.bg-danger { + border: 1px solid darken(@brand-danger, 10%); + } + &.bg-success { + border: 1px solid darken(@brand-success, 10%); + } + &.bg-warning { + border: 1px solid darken(@brand-warning, 10%); + } + a { + text-decoration: underline; + cursor: pointer; + } } -.alert.repeat-animation.ng-enter, -.alert.repeat-animation.ng-leave{ - // .transition (all, 0.3s, ease); -} - +.repeat-animation { + text-align: center; +} +.repeat-animation.ng-enter, +.repeat-animation.ng-leave{ + // .transition (all, 0.3s, ease); +} + //.alert.repeat-animation.ng-leave.repeat-animation.ng-leave-active, -.alert.repeat-animation.ng-enter { +.repeat-animation.ng-enter { .messageAnimation; } - -.alert.repeat-animation.ng-enter.repeat-animation.ng-enter-active, -.alert.repeat-animation.ng-leave { + +.repeat-animation.ng-enter.repeat-animation.ng-enter-active, +.repeat-animation.ng-leave { //.messageAnimation; } @@ -54,7 +72,10 @@ @keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } .messageAnimation { - .animation(messageAnimation, 1.5s, ease-in-out, 1); + .animation(messageAnimation, 1.5s, ease-in-out, 1); } - \ No newline at end of file +.repeat-leyend{ + text-align: center; + margin: 10px 0; +} http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/variables.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/variables.less b/falcon-ui/app/css/variables.less index f9fad79..f1c81ab 100644 --- a/falcon-ui/app/css/variables.less +++ b/falcon-ui/app/css/variables.less @@ -37,7 +37,7 @@ @brand-warning: #f0ad4e; @brand-danger: #d9534f; -@headerNavBG: #5fa33e; +@headerNavBG: #69BE28; //== Scaffolding // //## Settings for some of the most global styles. @@ -57,7 +57,7 @@ // //## Font, line-height, and color for body text, headings, and more. -@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif; +@font-family-sans-serif: cabin, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/authenticating.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/authenticating.html b/falcon-ui/app/html/authenticating.html new file mode 100644 index 0000000..8706322 --- /dev/null +++ b/falcon-ui/app/html/authenticating.html @@ -0,0 +1,37 @@ +<!-- +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +--> + +<form name="loginForm" ng-submit="loggUser(loginForm)" novalidate id="loginForm"> + + <div class="col-sm-24 dashboardBox login" ng-class="{showValidationStyle:showLoginVal.show}"> + <div class="row"> + <div class="col-sm-6"></div> + <div class="col-sm-12"> + + <div class="col-sm-15 detailsBox centered"> + <h3>Authenticating...</h3> + </div> + + </div> + <div class="col-sm-6"></div> + </div> + </div> + +</form> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html index 2ef813f..8d76c90 100644 --- a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html +++ b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html @@ -17,76 +17,84 @@ * limitations under the License. */ --> -<form name="clusterForm"> - <div class="col-sm-24"> +<form novalidate name="clusterForm" id="clusterGeneralStep"> + <div class="col-xs-24"> <label class="light">Name</label> - <input type="text" class="form-control nameInput" ng-pattern="validations.patterns.name" - ng-model="clusterEntity.clusterModel.cluster._name" ng-required="true" - ng-keydown="validations.acceptNoSpaces($event)" - check-name="{type:'cluster', check:true}" ng-class="{fakeInvalid:!validations.nameAvailable}" - ng-disabled="xmlPreview.edit" /> - <!--check-type="cluster" check-name-flag="nameValid" check="true"--> + <input type="text" class="form-control nameInput" + ng-pattern="validations.patterns.name" + ng-model="clusterEntity.clusterModel.cluster._name" ng-required="true" + ng-keydown="validations.acceptNoSpaces($event)" + check-name="{type:'cluster', check:true}" ng-class="{fakeInvalid:!validations.nameAvailable}" + ng-disabled="xmlPreview.edit" /> + <!--check-type="cluster" check-name-flag="nameValid" check="true"--> </div> - <div class="col-sm-12"> + <div class="col-xs-12"> <label class="light">Colo</label> - <input type="text" class="form-control" ng-pattern="validations.patterns.freeText" - ng-required="true" ng-disabled="xmlPreview.edit" - ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/> + <input type="text" class="form-control" + ng-pattern="validations.patterns.freeText" + ng-required="true" ng-disabled="xmlPreview.edit" + ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/> </div> - <div class="col-sm-12"> + <div class="col-xs-12"> <label class="light">Description</label> - <input type="text" class="form-control" ng-pattern="validations.patterns.freeText" - ng-required="true" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.description}}" - ng-model="clusterEntity.clusterModel.cluster._description" /> + <input type="text" class="form-control" + ng-pattern="validations.patterns.freeText" + ng-required="true" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.description}}" + ng-model="clusterEntity.clusterModel.cluster._description" /> </div> - + <div class="col-xs-24"> <label class="light">Tags</label> </div> - + <div class="col-xs-24"> - <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer"> + <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer"> <div class="col-xs-10"> <input type="text" class="form-control" ng-model="tag.key" ng-disabled="xmlPreview.edit" placeholder="key" - ng-pattern="validations.patterns.alpha" ng-required="tag.value"/> + ng-pattern="validations.patterns.alpha" ng-required="tag.value" validation-optional-message="{{validations.messages.key}}"/> </div> <div class="col-xs-11"> <input type="text" class="form-control" ng-disabled="xmlPreview.edit" placeholder="value" - ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key"/> + ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key" validation-optional-message="{{validations.messages.value}}"/> </div> <div class="col-xs-3"> - <div class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0"> + <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0"> <span class="entypo minus"></span> delete - </div> + </button> </div> - </div> + </div> </div> - <div class="col-sm-24 dynamic-table-spacer"> - <div class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit"> + <div class="col-xs-24 mt5"> + <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit"> <span class="entypo plus"></span> add tag - </div> + </button> </div> - <h4 class="col-sm-24"> Access Control List </h4> - <div class="col-sm-8"> + <h4 class="col-xs-24"> Access Control List </h4> + <div class="col-xs-8"> <label class="light">Owner</label> - <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId" + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.owner}}" + ng-required="true" + ng-pattern="validations.patterns.unixId" ng-model="clusterEntity.clusterModel.cluster.ACL._owner"/> </div> - <div class="col-sm-8"> + <div class="col-xs-8"> <label class="light">Group</label> - <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId" + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.group}}" + ng-required="true" + ng-pattern="validations.patterns.unixId" ng-model="clusterEntity.clusterModel.cluster.ACL._group"/> </div> - <div class="col-sm-8"> + <div class="col-xs-8"> <label class="light">Permissions</label> - <input type="text" class="form-control" ng-disabled="xmlPreview.edit" + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.permission}}" + ng-required="true" ng-pattern="validations.patterns.unixPermissions" ng-model="clusterEntity.clusterModel.cluster.ACL._permission"/> </div> - - <h4 class="col-sm-24"> Interfaces </h4> + + <h4 class="col-xs-24"> Interfaces </h4> <label class="col-xs-4"> Type </label> @@ -96,14 +104,14 @@ <label class="col-xs-4"> Version </label> - <div id="interfaces-detail" class="col-sm-24" + <div id="interfaces-detail" class="col-xs-24" ng-repeat="_interface in clusterEntity.clusterModel.cluster.interfaces.interface"> <div class="row"> <div class="col-xs-4"> - <label> + <input type="checkbox" ng-checked="registry.check" ng-model="registry.check" ng-if="_interface._type === 'registry'" ng-disabled="xmlPreview.edit"/> {{_interface._type}} - </label> + </div> <div class="col-xs-16"> <input type="text" class="form-control" ng-pattern="validations.patterns.osPath" @@ -123,25 +131,28 @@ <div ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property"> <div class="col-xs-7 dynamic-table-spacer"> <input type="text" class="form-control" ng-model="property._name" - ng-pattern="validations.patterns.alpha" ng-disabled="xmlPreview.edit" + validation-optional-message="{{validations.messages.name}}" + ng-disabled="xmlPreview.edit" ng-required="property._value" placeholder="name" /> </div> <div class="col-xs-15 dynamic-table-spacer"> - <input type="text" class="form-control" ng-model="property._value" ng-pattern="validations.patterns.alpha" - ng-disabled="xmlPreview.edit" ng-required="property._name" placeholder="value" /> + <input type="text" class="form-control" ng-model="property._value" + validation-optional-message="{{validations.messages.value}}" + ng-disabled="xmlPreview.edit" + ng-required="property._name" placeholder="value" /> </div> <div class="col-xs-2 dynamic-table-spacer"> - <div class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0" + <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0" ng-disabled="xmlPreview.edit"> <span class="entypo minus"></span> delete - </div> + </button> </div> <div class="clearfix hidden-md"></div> </div> <div class="col-xs-24 dynamic-table-spacer"> - <div class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit"> + <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit"> <span class="entypo plus"></span> add property - </div> + </button> </div> <h4 class="col-xs-24"> Location </h4> @@ -153,49 +164,52 @@ {{location._name}} </div> <div class="col-xs-15 dynamic-table-spacer"> - <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath" + <input id="location.{{location._name}}" type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath" ng-disabled="xmlPreview.edit" ng-required="true" validation-message="{{validations.messages.location}}"/> </div> - <div class="col-xs-2 dynamic-table-spacer"></div> + <div class="col-xs-2 dynamic-table-spacer"></div> <div class="clearfix hidden-md"></div> </div> <div class="row" ng-if="location._name !== 'staging' && location._name !== 'working' && location._name !== 'temp'"> <div class="col-xs-7 dynamic-table-spacer"> - <input type="text" class="form-control" ng-model="location._name" ng-pattern="validations.patterns.alpha" + <input type="text" class="form-control" ng-model="location._name" + validation-optional-message="{{validations.messages.name}}" + ng-pattern="validations.patterns.alpha" ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" /> </div> - <div class="col-xs-15 dynamic-table-spacer"> - <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath" + <div class="col-xs-15 dynamic-table-spacer"> + <input type="text" class="form-control" ng-model="location._path" + validation-optional-message="{{validations.messages.path}}" + ng-pattern="validations.patterns.osPath" ng-disabled="xmlPreview.edit" ng-required="location._name" placeholder="path" /> </div> <div class="col-xs-2 dynamic-table-spacer"> - <div class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3" + <button class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3" ng-disabled="xmlPreview.edit" > <span class="entypo minus"></span> delete - </div> - </div> + </button> + </div> <div class="clearfix hidden-md"></div> </div> - + </div> <div class="col-xs-24 dynamic-table-spacer"> - <div class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit"> + <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit"> <span class="entypo plus"></span> add location - </div> + </button> </div> - <div class="col-xs-24"> - <div class="row mt20"> - <div class="btn btn-default col-xs-6 mt10" ui-sref="main"> - Cancel - </div> - <div class="btn btn-default col-xs-6 pull-right mt10" ng-disabled="xmlPreview.edit" - ng-click="goSummaryStep(clusterForm.$invalid)"> - Next - </div> + <div class="col-xs-24 mt20"> + + <button id="cluster.step1" class="btn nextBtn pull-right" ng-disabled="xmlPreview.edit || buttonSpinners.show" + ng-click="goSummaryStep(clusterForm.$invalid)"> + Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + <a class="pull-right" ui-sref="main"> + Cancel + </a> - </div> </div> </form> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html index d13b3f5..a7caad9 100644 --- a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html +++ b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html @@ -17,7 +17,7 @@ * limitations under the License. */ --> -<div class="row clusterSummaryRow"> +<div class="row clusterSummaryRow" id="clusterSummaryStep"> <div class="col-sm-24"> <label>Name</label>: {{clusterEntity.clusterModel.cluster._name}} </div> @@ -50,7 +50,7 @@ Properties </h4> - <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0" + <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0" ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property"> <label>{{property._name}}</label>: {{property._value}} </div> @@ -65,13 +65,23 @@ </div> -<div class="row clusterSummaryRow mt20"> - <div class="btn btn-default col-xs-6" ui-sref="forms.cluster.general" ng-click="goGeneralStep()"> - Previous - </div> +<div class="row clusterSummaryRow"> + <div class="col-xs-24 mt20"> + <button id="cluster.backToStep1" + class="btn prevBtn" + ui-sref="forms.cluster.general" + ng-click="goGeneralStep()" + ng-disabled="buttonSpinners.backShow"> + Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> + </button> - <div class="btn btn-default col-xs-6 pull-right" ng-click="saveCluster()" ng-disabled="xmlPreview.edit"> - Save - </div> + <button id="cluster.step2" class="btn btn-default nextBtn pull-right" + ng-click="saveCluster()" ng-disabled="xmlPreview.edit || buttonSpinners.show"> + Save <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + <a class="pull-right" ui-sref="main"> + Cancel + </a> + </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/cluster/clusterFormTpl.html b/falcon-ui/app/html/cluster/clusterFormTpl.html index 4da4cf6..1a65172 100644 --- a/falcon-ui/app/html/cluster/clusterFormTpl.html +++ b/falcon-ui/app/html/cluster/clusterFormTpl.html @@ -17,55 +17,67 @@ * limitations under the License. */ --> -<div class="col-sm-24 clusterForm"> - <div class="col-sm-22 col-sm-offset-2"> +<div class="col-xs-22 col-xs-offset-1 clusterForm" id="clusterForm"> + <div class="col-xs-24"> <div class="row"> - <h3 class="col-sm-24"> - New Cluster + + <h3 id="cluster.title" class="col-xs-24"> + <span class="entypo archive icon-lg"></span> New Cluster </h3> - <div class="col-sm-15 detailsBox"> - <div class="clusterProgressBox" ng-class="{summary:secondStep===true}"> - <div class="progressBar col-md-24"> - <div> + + <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-20' : !propsOpen}"> + <div class="detailsBox"> + <div class="clusterProgressBox" ng-class="{summary:secondStep===true}"> + <div class="progressBar col-xs-24"> + <div> <span> - <div>1<span class="entypo check"></span></div> + <div>1<span class="entypo check"></span></div> <h6>General</h6> </span> <span> <div>2</div> <h6>Summary</h6> </span> - </div> + </div> + </div> </div> - </div> - <div class="row"> - <div class="col-xs-offset-1 col-xs-22" ui-view></div> - </div> + <div class="row"> + <div class="col-xs-offset-1 col-xs-22" ui-view></div> + </div> + </div> </div> - <div class="col-sm-8 detailsBox col-sm-offset-1"> - <div class="row"> - - <h5 class="col-xs-13 col-xs-offset-1 noSpecial">XML Preview</h5> - - <div class="col-xs-9"> - <div class="btn btn-default btn-xs pull-right" ng-click="xmlPreview.editXML()" ng-class="{'btn-warning':xmlPreview.edit}"> - Edit XML + <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-4' : !propsOpen}"> + <div class="detailsBox"> + <div class="row"> + + <div class="col-xs-13 col-xs-offset-1 noSpecial"> + <h5><i class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-minus-sign':'glyphicon-plus-sign'"></i> XML Preview</h5> </div> - </div> - - <div class="col-xs-24"> - <div class="row"> - <div class="col-xs-22 col-xs-offset-1"> - <textarea ng-model="prettyXml" rows="35" class="form-control" ng-disabled="!xmlPreview.edit"> - </textarea> + + <div ng-if="propsOpen" class="col-xs-9"> + <button type="button" + id="cluster.editXML" + class="btn btn-default btn-xs pull-right" + ng-click="xmlPreview.editXML()" + ng-class="{'btn-warning':xmlPreview.edit}"> + <div ng-if="!xmlPreview.edit">Edit XML</div> + <div ng-if="xmlPreview.edit">Finish</div> + </button> + </div> + + <div ng-show="propsOpen" class="col-xs-24"> + <div class="row"> + <div class="col-xs-22 col-xs-offset-1"> + <textarea ng-model="prettyXml" elastic class="form-control prettyXml" ng-disabled="!xmlPreview.edit"></textarea> + </div> </div> </div> + </div> - </div> </div> - + </div> </div> </div> \ No newline at end of file
