From 51aa5e5305d059596cee8ef9c98d8f7ca58a316a Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Fri, 6 Oct 2017 02:57:30 +0530 Subject: [PATCH] Redesigned the Platform listing based on material-design specs. --- .../public/themes/default/default-theme.css | 101 ++++++++++++------ .../src/components/Platform/Platform.jsx | 68 +++++++++--- 2 files changed, 125 insertions(+), 44 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css index 68cfce5d998..286bd028d69 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css @@ -109,6 +109,12 @@ background-color: rgba(0, 0, 0, 0.40) !important; } +.circle-button { + border-radius: 100% !important; + height: 36px !important; + width: 36px; +} + /* ==================================================================== */ /* Body Styling */ @@ -188,17 +194,13 @@ body { } /* Base layout container */ -#container { - background-color: #ededed; - padding: 0; -} /* Base layout header content*/ -#header-content { - height: 128px; - width: 100%; +.header-content { + height: 128px !important; + width: 100% !important; margin: 0 10px 0 0; - background-color: #3f50b5; + background-color: #3f50b5 !important; position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ z-index: 2; @@ -206,8 +208,8 @@ body { } /* Contains the header styles.*/ -#header { - padding: 24px; +.header { + padding: 24px 24px 10px 24px; /*margin: 16px 16px 20px 16px;*/ position: relative; } @@ -221,8 +223,16 @@ body { } /* The buttons in the header (User and Notification)*/ -#header-btn-container { - float: right; +.header-button-container { + display: flex; + justify-content: flex-end; +} + +.header-user-name { + font-family: Roboto-Medium; + font-size: 14px; + padding-top: 15px; + color: white; } .header-image { @@ -268,20 +278,15 @@ body { } /* Search box styles */ -.search-icon { - position: absolute; - top: 5px; - left: 5px; -} - -#search-box { +.search-box { display: flex; - color: #a8a8a8; - position: relative; float: right; - top: 75px; - left: 150px; - margin-right: 40px; +} + +.search-box i { + position: absolute; + top: 5px; + color: #BaBaBa; } #search { @@ -496,6 +501,7 @@ body { #app-create-modal { max-width: 700px; overflow-x: auto; + border-radius: 0% !important; } #store { @@ -765,32 +771,63 @@ div.tab button.active { } .platform-content { - width: 500px; margin: 10px; - padding: 24px; + padding-top: 16px; box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } +.platform-content .row { + margin: 0; +} + +.platform-content .col { + padding: 0; +} + +.platform-content-basic { + padding: 0 16px 0 16px; + display: flex; +} + +.platform-content-more-outer { + +} + +.platform-content-more { + padding: 16px 16px 24px 16px; +} + +.platform-content-footer { + display: flex; + padding: 8px 8px 8px 8px; +} + +.platform-text-container { + padding: 8px 16px 0 16px; +} + +.circle-button { + float: right; +} + .platform-icon-letter { text-align: center; text-transform: uppercase; font-family: Roboto-Medium; - font-size: 50px; + font-size: 70px; color: white; padding-top: 15px; } .platform-icon-container { - height: 100px; - width: 100px; - border-radius: 50%; - background-color: #3f50b5; + height: 120px; + width: 120px; + background-color: #01579B; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; } .platform-content:hover { - background-color: #f2f2f2; } .data-table-row-cell { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx index e6c929abc7c..fc1ada106fc 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx @@ -15,8 +15,9 @@ * specific language governing permissions and limitations * under the License. */ + import React, {Component} from 'react'; -import {Button, Col, Row} from "reactstrap"; +import {Button, Col, Collapse, Row} from "reactstrap"; /** * Platform component. @@ -26,6 +27,15 @@ class Platform extends Component { constructor() { super(); + this.unFold = this.unFold.bind(this); + this.state = { + isOpen: false + } + } + + unFold() { + let isOpen = this.state.isOpen; + this.setState({isOpen: !isOpen}) } render() { @@ -33,25 +43,59 @@ class Platform extends Component { return (
- -
-

{platform.name.charAt(0)}

-
-

{platform.name}

{platform.enabled ? "Active" : "Disabled"}

- + +
+

{platform.name.charAt(0)}

+
+ -
- - - - + +
+ + + +
+
+ + + +
+ + +

Description

+ +

{platform.description}

+ + + +

File Based

+ + +

{platform.fileBased ? "Yes" : "No"}

+ + + +

Tags

+ +

+ {platform.tags.length > 0 ? platform.tags : "No Platform Tags"} +

+ + +
+ + + +
); }