From 9296c5ca7567b460143ac9f73e176f6386d71f53 Mon Sep 17 00:00:00 2001 From: ArunaTebel Date: Sun, 20 Oct 2019 18:20:10 +0530 Subject: [PATCH] styling and other refactorings to the phase estimate list component --- src/components/ArchestCalendarComponent.js | 2 +- .../ArchestEstimateEditComponent.js | 2 +- .../ArchestEstimateProgressComponent.js | 2 +- .../ArchestPhaseEstimatesComponent.js | 91 +++++++++++-------- src/components/ArchestTimelineComponent.js | 2 +- ...scss => ArchestEstimateEditComponent.scss} | 0 .../ArchestPhaseEstimatesComponent.scss | 9 ++ ...ine.scss => ArchestTimelineComponent.scss} | 0 src/res/archest-default-theme/index.scss | 15 +++ 9 files changed, 79 insertions(+), 44 deletions(-) rename src/components/styles/{ArchestEditEstimate.scss => ArchestEstimateEditComponent.scss} (100%) create mode 100644 src/components/styles/ArchestPhaseEstimatesComponent.scss rename src/components/styles/{ArchestTimeline.scss => ArchestTimelineComponent.scss} (100%) diff --git a/src/components/ArchestCalendarComponent.js b/src/components/ArchestCalendarComponent.js index 2ca560e..f32d496 100644 --- 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 index 40e99c2..1cdb4e9 100644 --- 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 index 14d4359..dda7cb3 100644 --- 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 index 70b8354..47418bf 100644 --- 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 ( -
-
{estimate.name}
- Delete - }> - - - View - }> - - - Progress - }> - - - Edit - }> - - -
- {estimate.owner.full_name} + + + +

{estimate.name}

+ + + + + + Progress}> + this.handleEstimateNavigationBtnClick(estimate, 'progress')} + className="material-icons md-18 archest-phase-estimates-icon">view_list + + + + + Sheet View}> + this.handleEstimateNavigationBtnClick(estimate, 'view')} + className="material-icons md-18 archest-phase-estimates-icon">grid_on + + + + + Edit}> + this.handleEstimateNavigationBtnClick(estimate, 'edit')} + className="material-icons md-18 archest-phase-estimates-icon">edit + + + + Share}> + this.handleEstimateNavigationBtnClick(estimate, 'share')} + className="material-icons md-18 archest-phase-estimates-icon">folder_shared + + + + Delete}> + this.showDeleteEstimateModal(estimate.id)} + className="material-icons md-18 archest-phase-estimates-icon">delete + + + + + + + + {estimate.owner.full_name} + + + ); } diff --git a/src/components/ArchestTimelineComponent.js b/src/components/ArchestTimelineComponent.js index 935ff56..a9c45a1 100644 --- 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/src/components/styles/ArchestEditEstimate.scss b/src/components/styles/ArchestEstimateEditComponent.scss similarity index 100% rename from src/components/styles/ArchestEditEstimate.scss rename to src/components/styles/ArchestEstimateEditComponent.scss diff --git a/src/components/styles/ArchestPhaseEstimatesComponent.scss b/src/components/styles/ArchestPhaseEstimatesComponent.scss new file mode 100644 index 0000000..85098bb --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/components/styles/ArchestTimeline.scss b/src/components/styles/ArchestTimelineComponent.scss similarity index 100% rename from src/components/styles/ArchestTimeline.scss rename to src/components/styles/ArchestTimelineComponent.scss diff --git a/src/res/archest-default-theme/index.scss b/src/res/archest-default-theme/index.scss index 279cc8f..a1886cc 100644 --- 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"; \ No newline at end of file