From 9133ee9c0c2a52ab8e21393e147ecc3a9ec0e41c Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <ramesh.p@matriotsolutions.com>
Date: Mon, 8 Aug 2022 12:42:44 +0530
Subject: [PATCH] TMSS-1526: Updated style and fixed minor issues
---
SAS/TMSS/frontend/tmss_webapp/src/App.css | 9 +++++++++
.../components/Resources/ResourceDisplayList.js | 4 ++--
.../tmss_webapp/src/components/ViewTable.js | 6 +++---
.../tmss_webapp/src/layout/_overrides.scss | 16 ++++++++++++++++
.../tmss_webapp/src/layout/sass/_timeline.scss | 2 +-
.../tmss_webapp/src/layout/sass/_viewtable.scss | 4 ++++
.../tmss_webapp/src/routes/Project/view.js | 6 ++++--
.../tmss_webapp/src/routes/Scheduling/create.js | 11 +++++++----
.../tmss_webapp/src/routes/Timeline/view.js | 2 +-
9 files changed, 47 insertions(+), 13 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.css b/SAS/TMSS/frontend/tmss_webapp/src/App.css
index bfac349899b..4f3ef8cd01b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.css
+++ b/SAS/TMSS/frontend/tmss_webapp/src/App.css
@@ -65,8 +65,13 @@ a{
padding: 0px 10px;
}
+.chips-readonly {
+ display: inline-block;
+}
+
.chips-readonly > ul {
border: none;
+ display: inline-block;
}
p {
@@ -116,6 +121,10 @@ p {
padding-left: 0.25em !important;
}
+.main-content .view-list .p-grid span {
+ margin-bottom: 0px;
+}
+
.act-btn-grp {
margin-top: 20px;
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Resources/ResourceDisplayList.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Resources/ResourceDisplayList.js
index 651161187d7..3bdc2835d63 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Resources/ResourceDisplayList.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Resources/ResourceDisplayList.js
@@ -16,8 +16,8 @@ class ResourceDisplayList extends Component {
<>
{this.props.quota.length>0 && this.props.quota.map((item, index) => (
<React.Fragment key={index+10}>
- <label key={'label1-'+ index} className="col-lg-3 col-md-3 col-sm-12">{item.resource.name}</label>
- <span key={'div1-'+ index} data-testid={item.resource.name} className="col-lg-3 col-md-3 col-sm-12">
+ <label key={'label1-'+ index} className="col-lg-2 col-md-2 col-sm-12">{item.resource.name}</label>
+ <span key={'div1-'+ index} data-testid={item.resource.name} className="col-lg-4 col-md-4 col-sm-12">
{item.value/(this.props.unitMap[item.resource.quantity_value]?this.props.unitMap[item.resource.quantity_value].conversionFactor:1)}
{` ${this.props.unitMap[item.resource.quantity_value]?this.props.unitMap[item.resource.quantity_value].display:''}`}
</span>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index bd6abb405bc..58e92c90719 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -2223,7 +2223,7 @@ function Table(props) {
};
const onChangeCustompagevalue = (e) => {
- setcustompagevalue(e.target.value);
+ setcustompagevalue(e.value);
}
const onShowAllPage = (e) => {
@@ -2415,7 +2415,7 @@ function Table(props) {
<div>
<Paginator rowsPerPageOptions={[10, 25, 50, 100]} first={currentpage} rows={currentrows} totalRecords={doServersideFilter?pageCount:rows.length} onPageChange={onPagination}></Paginator>
</div>
- <div>
+ <div className="custom-page">
<InputNumber id="customPageTop" value={custompagevalue} onChange={onChangeCustompagevalue}
min={0} style={{ width: '100px' }} />
<label >Records/Page</label>
@@ -2570,7 +2570,7 @@ function Table(props) {
<div>
<Paginator rowsPerPageOptions={[10, 25, 50, 100]} first={currentpage} rows={currentrows} totalRecords={doServersideFilter?pageCount:rows.length} onPageChange={onPagination}></Paginator>
</div>
- <div>
+ <div className="custom-page">
<InputNumber id="customPageBottom" value={custompagevalue} onChange={onChangeCustompagevalue}
min={0} style={{ width: '100px' }} />
<label >Records/Page</label>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index 5f92a7d1118..38ae4dc7c3d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
@@ -269,6 +269,9 @@ In Excel View the for Accordion background color override
.p-multiselect-panel {
min-width: 15em !important;
}
+.p-multiselect .p-multiselect-label {
+ padding: 0em .2em 0em .2em;
+}
.p-highlight label {
color: #ffffff !important;
}
@@ -411,4 +414,17 @@ h3 + div + p {
.p-button.p-button-icon-only {
padding-top: 0px;
padding-bottom: 0px;
+}
+
+.p-inputtext {
+ font-size: 14px;
+}
+
+.p-paginator .p-dropdown {
+ height: 2rem;
+ border: none;
+}
+
+.main-content .p-grid .p-checkbox-box span {
+ margin-bottom: 0px;
}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
index 090e3b5dc35..365971b35c6 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
@@ -430,7 +430,7 @@
.p-multiselect-header .p-multiselect-close {
position: absolute;
- right: -30px;
+ right: -10px;
top: .375em;
display: block;
border: 0 none;
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss
index 11ce444627c..d28530bce0a 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss
@@ -281,4 +281,8 @@ body .p-paginator {
.p-paginator {
margin-bottom: 0.5em;
}
+}
+
+.custom-page {
+ margin-top: 3px;
}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
index 5bbc6243b61..96ac7564b12 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Project/view.js
@@ -364,8 +364,10 @@ export class ProjectView extends Component {
</div>
</div>
</div>
- <SchedulingUnitList project={this.state.project.name} hideProjectColumn
- allowRowSelection={true} ref={suList => {this.suList = suList}} />
+ <div className="view-list">
+ <SchedulingUnitList project={this.state.project.name} hideProjectColumn
+ allowRowSelection={true} ref={suList => {this.suList = suList}} />
+ </div>
</div>
</React.Fragment>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
index 00c44e84afc..8bb4d7ea33c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
@@ -886,8 +886,9 @@ export class SchedulingUnitCreate extends Component {
<div className="p-field p-grid">
<label htmlFor="observStrategy" className="col-lg-2 col-md-2 col-sm-12">Observation Strategy <span style={{color:'red'}}>*</span></label>
<div className="col-lg-3 col-md-3 col-sm-12" data-testid="observStrategy" >
- <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="col-lg-5 col-md-5 col-sm-12"
- style={{paddingLeft: '0px'}}
+ <div className='p-field p-grid'>
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className=""
+ style={{paddingLeft: '0px', width: "50%"}}
tooltip="Filter Observation Strategy by Purpose" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategyFilters.purpose}
options={this.templatePurposes}
@@ -895,8 +896,9 @@ export class SchedulingUnitCreate extends Component {
selectedItemsLabel="{0} Selected"
onChange={(e) => {this.setObservStrateyFilters(e.value, 'purpose')}}
placeholder="Purpose" />
- <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="col-lg-5 col-md-5 col-sm-12"
- style={{float: 'right', paddingLeft: '0px'}}
+ {/* <div className="col-lg-1 col-md-1 col-sm-12"></div> */}
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className=""
+ style={{float: 'right', paddingLeft: '0px', width:"40%"}}
tooltip="Filter Observation Strategy by State" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategyFilters.states}
options={this.templateState}
@@ -904,6 +906,7 @@ export class SchedulingUnitCreate extends Component {
maxSelectedLabels="1"
selectedItemsLabel="{0} Selected"
placeholder= "State" />
+ </div>
<Dropdown inputId="observStrategy" optionLabel="uniqueId" optionValue="id"
tooltip="Observation Strategy Template to be used to create the Scheduling Unit and Tasks. Strategies already used are highlighted in bold" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategy.id}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
index de56d5255eb..4f92c6350eb 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -1765,7 +1765,7 @@ export class TimelineView extends Component {
<MultiSelect data-testid="reserv-reasons" id="reserv-reasons"
optionLabel="name" optionValue="name"
style={{ top: '2px', marginLeft:'5px', minWidth: '100px' }}
- panelStyle={{right: '0px'}}
+ // panelStyle={{right: '0px'}}
tooltip="Select Reservation Reason(s)"
value={this.state.reservationFilter}
options={this.reservationReasons}
--
GitLab