From 60670a64298cf6a13a5a12fcaeda1ec057a9385a Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <ramesh.p@matriotsolutions.com>
Date: Tue, 9 Aug 2022 12:27:31 +0530
Subject: [PATCH] TMSS-1526: Styles updated
---
SAS/TMSS/frontend/tmss_webapp/src/App.css | 12 ++++++++++++
.../tmss_webapp/src/layout/_overrides.scss | 19 ++++++++++++++++++-
.../src/layout/sass/_timeline.scss | 2 +-
.../src/routes/Scheduling/create.js | 10 +++++-----
.../Scheduling/excelview.schedulingset.js | 8 ++++----
5 files changed, 40 insertions(+), 11 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.css b/SAS/TMSS/frontend/tmss_webapp/src/App.css
index 4f3ef8cd01b..31b45a2f541 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.css
+++ b/SAS/TMSS/frontend/tmss_webapp/src/App.css
@@ -267,4 +267,16 @@ div[data-schemapath='root.$schema'] {
body > iframe {
display: none !important;
+}
+
+.observ_strategy_purpose {
+ padding-left: 0px;
+ width: 50%;
+}
+
+.observ_strategy_state {
+ float: right;
+ padding-left: 0px;
+ width: 45%;
+ margin-left: 10px;
}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index 38ae4dc7c3d..4fd72b7f91b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
@@ -276,7 +276,7 @@ In Excel View the for Accordion background color override
color: #ffffff !important;
}
.pi-search {
- right: -1.25em !important;
+ right: -0.5em !important;
}
/** End */
/** Below classes for react-tool in create and edit page in project & SU for non primereact input component */
@@ -425,6 +425,23 @@ h3 + div + p {
border: none;
}
+.p-dropdown-filter {
+ width: 90%;
+}
+
+.p-component {
+ font-size: 14px;
+}
+
+.p-checkbox-label {
+ margin-bottom: 0px;
+ padding-left: 5px;
+}
+
+.p-float-label label {
+ margin-top: 0px;
+}
+
.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 365971b35c6..38a1a0c2e68 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: -10px;
+ margin-left: -45px;
top: .375em;
display: block;
border: 0 none;
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 8bb4d7ea33c..ec5c6dbd61a 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/create.js
@@ -887,8 +887,7 @@ export class SchedulingUnitCreate extends Component {
<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" >
<div className='p-field p-grid'>
- <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className=""
- style={{paddingLeft: '0px', width: "50%"}}
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="observ_strategy_purpose"
tooltip="Filter Observation Strategy by Purpose" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategyFilters.purpose}
options={this.templatePurposes}
@@ -897,8 +896,7 @@ export class SchedulingUnitCreate extends Component {
onChange={(e) => {this.setObservStrateyFilters(e.value, 'purpose')}}
placeholder="Purpose" />
{/* <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%"}}
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="observ_strategy_state"
tooltip="Filter Observation Strategy by State" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategyFilters.states}
options={this.templateState}
@@ -907,7 +905,8 @@ export class SchedulingUnitCreate extends Component {
selectedItemsLabel="{0} Selected"
placeholder= "State" />
</div>
- <Dropdown inputId="observStrategy" optionLabel="uniqueId" optionValue="id"
+ <div>
+ <Dropdown inputId="observStrategy" optionLabel="uniqueId" optionValue="id" style={{width: "100%"}}
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}
options={this.state.observStrategies} filter
@@ -917,6 +916,7 @@ export class SchedulingUnitCreate extends Component {
<label className="info">
{ this.state.observStrategy ? this.state.observStrategy.description : ""}
</label>
+ </div>
</div>
<div className="col-lg-1 col-md-1 col-sm-12"></div>
<label htmlFor="autodeletion" className="col-lg-2 col-md-2 col-sm-12">Pin Data</label>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/excelview.schedulingset.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/excelview.schedulingset.js
index 88e529cc2d5..14833aefbf8 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/excelview.schedulingset.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/excelview.schedulingset.js
@@ -3487,17 +3487,16 @@ export class SchedulingSetCreate 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"
+ <div className='p-field p-grid'>
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="observ_strategy_purpose"
tooltip="Filter Observation Strategy by Purpose" tooltipOptions={this.tooltipOptions}
- style={{paddingLeft: '0px' }}
value={this.state.observStrategyFilters.purpose}
options={this.templatePurposes}
onChange={(e) => {this.setObservStrateyFilters(e.value, 'purpose')}}
maxSelectedLabels="1"
selectedItemsLabel="{0} Selected"
placeholder="Purpose" />
- <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="col-lg-5 col-md-5 col-sm-12"
- style={{float: 'right', paddingLeft: '0px'}}
+ <MultiSelect inputId="observStrategy" optionLabel="name" optionValue="value" className="observ_strategy_state"
tooltip="Filter Observation Strategy by State" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategyFilters.states}
options={this.templateState}
@@ -3505,6 +3504,7 @@ export class SchedulingSetCreate extends Component {
selectedItemsLabel="{0} Selected"
onChange={(e) => {this.setObservStrateyFilters(e.value, 'state')}}
placeholder="State" />
+ </div>
<Dropdown inputId="observStrategy" optionLabel="uniqueId" optionValue="id"
tooltip="Observation Strategy Template to be used to create the Scheduling Unit. Strategies already used in the Scheduling Set are in bold" tooltipOptions={this.tooltipOptions}
value={this.state.observStrategy.id}
--
GitLab