styling and other refactorings to the phase estimate list component

ArunaTebel · Oct 20, 2019 · 9296c5c · 9296c5c
1 parent ac5a2a3
commit 9296c5c
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 44 deletions.
diff --git a/src/components/ArchestCalendarComponent.js b/src/components/ArchestCalendarComponent.js
@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
 import React, {Component} from "react";
 import ArchestAuthEnabledComponent from "./ArchestAuthEnabledComponent";
 import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
-import './styles/ArchestTimeline.scss';
+import './styles/ArchestTimelineComponent.scss';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from "@fullcalendar/interaction";

diff --git a/src/components/ArchestEstimateEditComponent.js b/src/components/ArchestEstimateEditComponent.js
@@ -5,7 +5,7 @@ import {BACKEND_ESTIMATOR_API_URL} from "../constants";
 import ArchestHttp from "../modules/archest_http";
 import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
 import ArchestEstimateActivityComponent from "./ArchestEstimateActivityComponent";
-import './styles/ArchestEditEstimate.scss';
+import './styles/ArchestEstimateEditComponent.scss';
 import autosize from 'autosize';
 
 const _ = require('lodash');

diff --git a/src/components/ArchestEstimateProgressComponent.js b/src/components/ArchestEstimateProgressComponent.js
@@ -4,7 +4,7 @@ import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
 import ArchestFeatureProgressComponent from "./ArchestFeatureProgressComponent";
 import {BACKEND_ESTIMATOR_API_URL} from "../constants";
 import ArchestHttp from "../modules/archest_http";
-import {Col, Row, Card, Table, ProgressBar, Dropdown} from "react-bootstrap";
+import {Col, Row, Card} from "react-bootstrap";
 import './styles/ArchestEstimateProgressComponent.scss';
 
 const _ = require('lodash');

diff --git a/src/components/ArchestPhaseEstimatesComponent.js b/src/components/ArchestPhaseEstimatesComponent.js
@@ -5,6 +5,7 @@ import {BACKEND_ESTIMATOR_API_URL} from "../constants";
 import ArchestHttp from "../modules/archest_http";
 import {Redirect} from "react-router-dom";
 import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
+import './styles/ArchestPhaseEstimatesComponent.scss';
 
 const _ = require('lodash');
 
@@ -178,46 +179,56 @@ class ArchestPhaseEstimatesComponent extends Component {
     getPhaseEstimateInfoListItem(estimate) {
         return (
             <ListGroup.Item key={estimate.id}>
-                <div>
-                    <h5 style={{'display': 'inline-block', 'maxWidth': '80%'}}>{estimate.name}</h5>
-                    <OverlayTrigger key="delete" placement="right"
-                                    overlay={
-                                        <Tooltip id="tooltip-right">Delete</Tooltip>
-                                    }>
-                        <Button onClick={() => this.showDeleteEstimateModal(estimate.id)}
-                                style={{'float': 'right', 'marginLeft': '10px'}} variant="outline-danger" size="sm">
-                            <span className="oi oi-x"/>
-                        </Button>
-                    </OverlayTrigger>
-                    <OverlayTrigger key="view" placement="right"
-                                    overlay={
-                                        <Tooltip id="tooltip-right">View</Tooltip>
-                                    }>
-                        <Button onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'view')}
-                                style={{'float': 'right', 'marginLeft': '10px'}} variant="outline-primary" size="sm">
-                            <span className="oi oi-eye"/>
-                        </Button>
-                    </OverlayTrigger>
-                    <OverlayTrigger key="progress" placement="right"
-                                    overlay={
-                                        <Tooltip id="tooltip-right">Progress</Tooltip>
-                                    }>
-                        <Button onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'progress')}
-                                style={{'float': 'right', 'marginLeft': '10px'}} variant="outline-primary" size="sm">
-                            <span className="oi oi-project"/>
-                        </Button>
-                    </OverlayTrigger>
-                    <OverlayTrigger key="edit" placement="top"
-                                    overlay={
-                                        <Tooltip id="tooltip-top">Edit</Tooltip>
-                                    }>
-                        <Button onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'edit')}
-                                style={{'float': 'right'}} variant="outline-primary" size="sm">
-                            <span className="oi oi-pencil"/>
-                        </Button>
-                    </OverlayTrigger>
-                </div>
-                <Badge variant="success">{estimate.owner.full_name}</Badge>
+                <Col>
+                    <Row>
+                        <Col sm={9}>
+                            <p style={{}}>{estimate.name}</p>
+                        </Col>
+                        <Col sm={3}>
+                            <Row>
+                                <Col sm={2}>
+
+                                    <OverlayTrigger key="progress" placement="top"
+                                                    overlay={<Tooltip>Progress</Tooltip>}>
+                                        <i onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'progress')}
+                                           className="material-icons md-18 archest-phase-estimates-icon">view_list</i>
+                                    </OverlayTrigger>
+                                </Col>
+                                <Col sm={2}>
+
+                                    <OverlayTrigger key="view" placement="top" overlay={<Tooltip>Sheet View</Tooltip>}>
+                                        <i onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'view')}
+                                           className="material-icons md-18 archest-phase-estimates-icon">grid_on</i>
+                                    </OverlayTrigger>
+                                </Col>
+                                <Col sm={2}>
+
+                                    <OverlayTrigger key="edit" placement="top" overlay={<Tooltip>Edit</Tooltip>}>
+                                        <i onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'edit')}
+                                           className="material-icons md-18 archest-phase-estimates-icon">edit</i>
+                                    </OverlayTrigger>
+                                </Col>
+                                <Col sm={2}>
+                                    <OverlayTrigger key="share" placement="top" overlay={<Tooltip>Share</Tooltip>}>
+                                        <i onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'share')}
+                                           className="material-icons md-18 archest-phase-estimates-icon">folder_shared</i>
+                                    </OverlayTrigger>
+                                </Col>
+                                <Col sm={2}>
+                                    <OverlayTrigger key="delete" placement="top" overlay={<Tooltip>Delete</Tooltip>}>
+                                        <i onClick={() => this.showDeleteEstimateModal(estimate.id)}
+                                           className="material-icons md-18 archest-phase-estimates-icon">delete</i>
+                                    </OverlayTrigger>
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={12}>
+                            <Badge variant="success">{estimate.owner.full_name}</Badge>
+                        </Col>
+                    </Row>
+                </Col>
             </ListGroup.Item>
         );
     }

diff --git a/src/components/ArchestTimelineComponent.js b/src/components/ArchestTimelineComponent.js
@@ -4,7 +4,7 @@ import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
 import {BACKEND_ESTIMATOR_API_URL} from "../constants";
 import ArchestHttp from "../modules/archest_http";
 import ArchestWorkEntryComponent from "./ArchestWorkEntryComponent";
-import './styles/ArchestTimeline.scss';
+import './styles/ArchestTimelineComponent.scss';
 import ArchestWorkEntryFormComponent from "./ArchestWorkEntryFormComponent";
 
 const _ = require('lodash');

diff --git a/...omponents/styles/ArchestEditEstimate.scss → .../styles/ArchestEstimateEditComponent.scss b/...omponents/styles/ArchestEditEstimate.scss → .../styles/ArchestEstimateEditComponent.scss
diff --git a/src/components/styles/ArchestPhaseEstimatesComponent.scss b/src/components/styles/ArchestPhaseEstimatesComponent.scss
@@ -0,0 +1,9 @@
+@import "../../res/archest-default-theme/variables.scss";
+
+.archest-phase-estimates-icon {
+  margin-top: 4px;
+}
+
+.archest-phase-estimates-icon:hover {
+  cursor: pointer;
+}
diff --git a/src/components/styles/ArchestTimeline.scss → ...ents/styles/ArchestTimelineComponent.scss b/src/components/styles/ArchestTimeline.scss → ...ents/styles/ArchestTimelineComponent.scss
diff --git a/src/res/archest-default-theme/index.scss b/src/res/archest-default-theme/index.scss
@@ -92,4 +92,19 @@ ol.breadcrumb > .breadcrumb-item {
   margin-bottom: 20px;
 }
 
+/* Rules for sizing the icon. */
+.material-icons.md-12 { font-size: 12px; }
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+
 @import "~bootstrap/scss/bootstrap";