Moved internal CSS files to a single common CSS and imported in index.html.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent f7d6bbd639
commit 426dea0afc

@ -22,7 +22,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<link rel="stylesheet" type="text/css" href="/css/font-wso2.css"> <link rel="stylesheet" type="text/css" href="/css/font-wso2.css">
<link rel="stylesheet" type="text/css" href="/themes/index.css"> <link rel="stylesheet" type="text/css" href="/themes/default/default-theme.css">
<!-- <!--
manifest.json provides metadata used when your web app is added to the manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

@ -1,25 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.creatediv {
margin: 0 16px;
}
.nextButton {
margin-top: 12px;
}

@ -1,120 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.applicationCreateChip {
margin: 4px;
}
.createStep2Content {
margin: 0 16px;
}
.applicationCreateWrapper {
display: flex;
flex-wrap: wrap;
}
.platformSpecificPropertyDiv {
border: solid #BDBDBD 1px;
}
.platformSpecificPropertyP {
color: #BDBDBD;
}
.applicationCreateBannerError {
color: #f44336;
}
.applicationCreateBannerTitle {
color: #BDBDBD;
}
.applicationCreateGrid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.applicationCreateBannerDropZone {
width: 300px;
height: 150px;
border: dashed #BDBDBD 1px
}
.applicationCreateBannerp {
margin: 70px 40px 40px 150px;
}
.applicationCreateScreenshotError {
color: #f44336;
}
.applicationCreateScreenshotTitle {
color: #BDBDBD;
}
.applicationCreateScreenshotGrid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.applicationCreateScreenshotDropZone {
width: 150px;
height: 150px;
border: dashed #BDBDBD 1px;
}
.applicationCreateScreenshotp {
margin: 70px 40px 70px 70px;
}
.applcationCreateIconError {
color: #f44336;
}
.applicationCreateIconTitle {
color: #BDBDBD;
}
.applicationCreateIconGrid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.applicationCreateIconDropZone {
width: 150px;
height: 150px;
border: dashed #BDBDBD 1px;
}
.applicationCreateIconp {
margin: 70px 40px 70px 70px;
}
.applicationCreateBackAndNext {
margin-top: 12px;
}
.applicationCreateBack {
margin-right: 12px;
}

@ -1,29 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.applicationCreateStepMiddle {
margin: 0 16px;
}
.applicationCreateBackAndFinish {
margin-top: 12px;
}
.applicationCreateFinish {
margin-right: 12px;
}

@ -1,36 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.createapplicationmiddle {
width: 95%;
height: 100%;
margin-top: 1%;
}
.creataapplicationcard {
max-height: 700px;
overflow: auto;
}
.createapplicationcardaction {
width: 100%;
margin: auto;
}
.createapplicationcontent {
margin: 0 16px;
}

@ -1,38 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.applicationListingMiddle {
width: 95%;
height: 100%;
margin-top: 1%;
}
.applicationListingCard {
display: flex;
flex-wrap: wrap;
}
.applicationListingSearch {
float:right;
padding-right: 2px;
}
.applicationListTitle {
display: flex;
flex-wrap: wrap;
}

@ -1,25 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.basicLayoutDiv {
height: calc(100% - 64px);
margin-left: 16%;
width: calc(100% - 15%);
top: 64px;
left: -100px;
}

@ -1,43 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.tableRow {
display: flex;
}
.datatableRowColumn {
align-items: center;
}
.sortableHeaderCell {
color: #bdbdbd;
}
.notsortableHeaderCell {
position: relative;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-weight: normal;
color: #bdbdbd;
font-size: 14px;
}
.datatableHeaderColumn {
padding-left: 0;
}

@ -16,11 +16,13 @@
* under the License. * under the License.
*/ */
/* Body Styling */
body { body {
width: 100%; width: 100%;
font-family: Roboto sans-serif; font-family: Roboto sans-serif;
} }
/* Login page styles*/
#userName { #userName {
border-radius: 0; border-radius: 0;
} }
@ -46,11 +48,13 @@ body {
background-color: #BaBaBa; background-color: #BaBaBa;
} }
/* Base layout container */
#container { #container {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* Base layout header content*/
#header-content { #header-content {
height: 125px; height: 125px;
width: 100%; width: 100%;
@ -62,32 +66,13 @@ body {
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
/* Contains the header styles.*/
#header { #header {
margin: 16px 16px 20px 16px; margin: 16px 16px 20px 16px;
height: 100%; height: 100%;
position: relative; position: relative;
} }
#application-content {
height: auto;
width: 80%;
margin: 150px auto;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px 10px 10px 10px;
}
#add-btn-container {
position: absolute;
left: 12%;
top: 100px;
}
.btn-header {
margin-top: 15px;
margin-right: 20px;
color: white;
}
#header-text { #header-text {
color: #ffffff; color: #ffffff;
font-size: 25px; font-size: 25px;
@ -95,10 +80,18 @@ body {
margin-left: 10px; margin-left: 10px;
} }
#header-btn { /* The buttons in the header (User and Notification)*/
#header-btn-container {
float: right; float: right;
} }
.btn-header {
margin-top: 15px;
margin-right: 20px;
color: white;
}
/* Search box styles */
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -127,6 +120,22 @@ body {
border-radius: 0%; border-radius: 0%;
} }
/* Application Add button */
#add-btn-container {
position: absolute;
left: 12%;
top: 100px;
}
/* Holds the app publisher pages. */
#application-content {
height: auto;
width: 80%;
margin: 150px auto;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px 10px 10px 10px;
}
.stepper-header { .stepper-header {
width: 100%; width: 100%;
border-bottom: solid 1px cornflowerblue; border-bottom: solid 1px cornflowerblue;
@ -161,41 +170,50 @@ body {
height: 300px; height: 300px;
} }
.applicationCreateBannerDropZone { .application-create-banner-dropzone {
width: 300px; width: 300px;
height: 150px; height: 150px;
border-radius: 5%; border-radius: 5%;
position: relative;
background-color: rgba(157, 159, 157, 0.53); background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px; border: dashed #888888 2px;
} }
.applicationCreateBannerp { .application-create-banner-dropzone i {
margin: 70px 40px 40px 150px; position: absolute;
top: 65px;
left: 145px;
} }
.applicationCreateScreenshotDropZone { .application-create-screenshot-dropzone {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
border-radius: 10%; border-radius: 10%;
position: relative;
background-color: rgba(157, 159, 157, 0.53); background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px; border: dashed #888888 2px;
} }
.applicationCreateIconDropZone { .application-create-screenshot-dropzone i {
position: absolute;
top: 65px;
left: 65px;
}
.application-create-icon-dropzone {
width: 150px; width: 150px;
height: 150px; height: 150px;
border-radius: 10%; border-radius: 10%;
position: relative;
background-color: rgba(157, 159, 157, 0.53); background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px; border: dashed #888888 2px;
} }
.applicationCreateIconp { .application-create-icon-dropzone i {
margin: 70px 40px 70px 70px; position: absolute;
} top: 65px;
left: 65px;
.applicationCreateScreenshotp {
margin: 70px 40px 70px 70px;
} }
#screenshot-container { #screenshot-container {
@ -256,3 +274,210 @@ body {
font-size: 12px; font-size: 12px;
color: #818181; color: #818181;
} }
/* Application View */
#application-view-content {
width: 100%;
}
#application-view-row {
margin: 10px 10px 20px 20px;
}
#app-icon {
height: 100px;
width: 100px;
border: solid 1px black;
border-radius: 50%;
}
.app-updated-date {
color: #888888;
font-style: italic;
}
.app-install-count {
font-style: italic;
}
.app-details-tbl {
outline: none;
border-color: #2196F3;
}
.app-details-tbl tr {
margin: 20px 0 0 0;
}
.app-details-tbl td {
margin-left: 10px;
max-width: 400px;
}
/* Application Edit Base Layout */
#application-edit-header {
height: 50px;
width: 100%;
margin: 0;
font-size: 20px;
border-bottom: solid 1px #d8d8d8;
}
.application-header-text {
margin: 10px 0px 0px 10px;
}
#save-btn-content {
float: right;
}
#app-save-btn {
border-radius: 0%;
}
.save-btn {
margin: 5px 5px 5px 0px;
height: 70%;
width: 50%;
float: right;
}
.save-btn:hover {
cursor: pointer;
}
/*Tab styling*/
div.tab {
float: left;
border-right: 1px solid #d8d8d8;
height: 100%;
}
/* Style the tab buttons */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 15px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd6d7;
cursor: pointer;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #1b3bcc;
color: white;
}
#application-edit-main-container {
display: flex;
}
#application-edit-outer-content {
height: auto;
width: 100%;
}
#application-edit-content {
margin: 5px 10px 5px 10px;
width: 90%;
}
#app-edit-content {
height: 100%;
position: relative;
}
.back-to-app {
position: absolute;
height: 40px;
width: 40px;
border-radius: 50%;
}
.back-to-app i {
padding: 10px 10px 10px 10px;
}
.back-to-app:hover {
cursor: pointer;
background-color: #dedede;
transition: .5s;
}
/* Create Release and Release management */
.release-header {
margin-top: 20px;
margin-bottom: 20px;
}
.release-create {
height: 150px;
margin-bottom: 20px;
}
.release-detail-content {
width: 100%;
margin-top: 20%;
height: 300px;
}
.form-btn {
float: right;
margin-bottom: 10px;
}
.release-content {
height: 180px;
width: 95%;
border: dashed 1px #626262;
border-radius: 2%;
position: relative;
background-color: #e8e8e8;
}
.release-content:after {
content: "";
letter-spacing: 4px;
}
.release {
margin: 30px 10px 20px 30px;
}
.no-release-content {
position: absolute;
margin-top: 10px;
left: 40%;
}
.button-add:hover {
cursor: pointer;
}
.release-inner {
margin-top: 5%;
}
/* Application Edit General Info */
.app-edit-general-info {
margin-top: 20px;
max-width: 100%;
}
.save-info {
float: right;
margin-bottom: 10px;
}

@ -1,73 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.createplatformmiddle {
width: 95%;
height: 100%;
margin-top: 1%
}
.createplatformcardaction {
width: 100%;
margin: auto;
padding-left: 10px;
}
.createplatformproperties {
color: #BaBaBa;
}
.createplatformpropertyclose {
height: 10px;
width: 10px;
}
.createplatformproperty {
display: flex;
}
.createplatformpropertyselect {
flex: 1 1 23% 1;
margin: 0 1%
}
.createplatformicon {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.createplatformiconp {
color: #BDBDBD;
}
.createplatformdropzone {
width: 150px;
height: 150px;
border: dashed #BDBDBD 1px;
}
.createplatformdropzonep {
margin: 70px 40px 70px 70px
}
.createPlatformTagWrapper {
display: flex;
flex-wrap: wrap;
}

@ -1,39 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.listingplatformmiddle {
width: 95%;
height: 100%;
margin-top: 1%;
}
.listingplatformcard {
display: flex;
flex-wrap: wrap;
}
.listingplatformsearch {
float:right;
padding-right: 2px;
}
.listingplatformTitle {
display: flex;
flex-wrap: wrap;
}

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import './App.css';
import Theme from './theme'; import Theme from './theme';
import React, {Component} from 'react'; import React, {Component} from 'react';
import AuthHandler from './api/authHandler'; import AuthHandler from './api/authHandler';

@ -77,7 +77,7 @@ class BaseLayout extends Component {
<span id="header-text"> <span id="header-text">
WSO2 IoT App Publisher WSO2 IoT App Publisher
</span> </span>
<div id="header-btn"> <div id="header-btn-container">
<i className="fw fw-notification btn-header"></i> <i className="fw fw-notification btn-header"></i>
<i className="fw fw-user btn-header"></i> <i className="fw fw-user btn-header"></i>
</div> </div>

@ -230,7 +230,6 @@ class Step1 extends Component {
}; };
render() { render() {
console.log(this.state.visibilityComponent);
return ( return (
<div className="createStep2Content"> <div className="createStep2Content">
<div> <div>

@ -296,85 +296,81 @@ class Step3 extends Component {
return ( return (
<div className="createStep2Content"> <div className="createStep2Content">
<div> <div>
<div> <FormGroup>
<div> <Label for="app-screenshots">Screenshots*</Label>
<FormGroup> <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
<Label for="app-screenshots">Screenshots*</Label> <div id="screenshot-container">
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span> {this.state.screenshots.map((tile) => (
<div id="screenshot-container"> <div id="app-image-screenshot">
{this.state.screenshots.map((tile) => ( <AppImage image={tile[0].preview}/>
<div id="app-image-screenshot">
<AppImage image={tile[0].preview}/>
</div>
))}
{this.state.screenshots.length < 3 ?
<Dropzone
className="applicationCreateScreenshotDropZone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
console.log(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}}
>
<p className="applicationCreateScreenshotp">+</p>
</Dropzone> : <div/>}
</div> </div>
</FormGroup> ))}
{this.state.screenshots.length < 3 ?
<Dropzone
className="application-create-screenshot-dropzone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
console.log(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}}
>
<i className="fw fw-add"></i>
</Dropzone> : <div/>}
</div> </div>
<div style={{display: 'flex'}}> </FormGroup>
<div style={{float: 'left', marginRight: '15px'}}> </div>
<FormGroup> <div style={{display: 'flex'}}>
<Label for="app-icon">Icon*</Label> <div style={{float: 'left', marginRight: '15px'}}>
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span> <FormGroup>
<div id="app-icon-container"> <Label for="app-icon">Icon*</Label>
{this.state.icon.map((tile) => ( <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
<div id="app-image-icon"> <div id="app-icon-container">
<AppImage image={tile.preview}/> {this.state.icon.map((tile) => (
</div> <div id="app-image-icon">
))} <AppImage image={tile.preview}/>
{this.state.icon.length === 0 ?
<Dropzone
className="applicationCreateIconDropZone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {
this.setState({icon, rejected});
}}
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</div> </div>
</FormGroup> ))}
{this.state.icon.length === 0 ?
<Dropzone
className="application-create-icon-dropzone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {
this.setState({icon, rejected});
}}
>
<i className="fw fw-add"></i>
</Dropzone> : <div/>}
</div> </div>
<div style={{marginLeft: '15px'}}> </FormGroup>
<FormGroup> </div>
<Label for="app-banner">Banner*</Label> <div style={{marginLeft: '15px'}}>
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span> <FormGroup>
<div id="app-banner-container"> <Label for="app-banner">Banner*</Label>
{this.state.banner.map((tile) => ( <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
<div id="app-image-banner"> <div id="app-banner-container">
<AppImage image={tile.preview}/> {this.state.banner.map((tile) => (
</div> <div id="app-image-banner">
))} <AppImage image={tile.preview}/>
{this.state.banner.length === 0 ?
<Dropzone
className="applicationCreateBannerDropZone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<p className="applicationCreateBannerp">+</p>
</Dropzone> : <div/>
}
</div> </div>
</FormGroup> ))}
{this.state.banner.length === 0 ?
<Dropzone
className="application-create-banner-dropzone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<i className="fw fw-add"></i>
</Dropzone> : <div/>
}
</div> </div>
</div> </FormGroup>
</div> </div>
</div> </div>
</div> </div>

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import './baseLayout.css';
import {Col, Row} from "reactstrap"; import {Col, Row} from "reactstrap";
import React, {Component} from 'react'; import React, {Component} from 'react';
import GeneralInfo from "../GenenralInfo/GeneralInfo"; import GeneralInfo from "../GenenralInfo/GeneralInfo";
@ -35,7 +34,7 @@ class ApplicationEdit extends Component {
} }
} }
handleClick(event) { handleTabClick(event) {
event.stopPropagation(); event.stopPropagation();
console.log(typeof event.target.value); console.log(typeof event.target.value);
const key = event.target.value; const key = event.target.value;
@ -74,13 +73,17 @@ class ApplicationEdit extends Component {
} }
} }
handleOnBackClick() {
window.location.href = "/publisher/assets/apps"
}
render() { render() {
console.log(this.state); console.log(this.state);
return ( return (
<div id="application-edit-base"> <div id="application-edit-base">
<Row id="application-edit-header"> <Row id="application-edit-header">
<Col xs="3"> <Col xs="3">
<a className="back-to-app"><i className="fw fw-left"></i></a> <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}><i className="fw fw-left-arrow"></i></a>
</Col> </Col>
<Col> <Col>
Application Name Application Name
@ -89,14 +92,14 @@ class ApplicationEdit extends Component {
<Row id="application-edit-main-container"> <Row id="application-edit-main-container">
<Col xs="3"> <Col xs="3">
<div className="tab"> <div className="tab">
<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}> <button className={this.state.general} value={1} onClick={this.handleTabClick.bind(this)}>
General General
</button> </button>
<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}> <button className={this.state.release} value={2} onClick={this.handleTabClick.bind(this)}>
App App
Releases Releases
</button> </button>
<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}> <button className={this.state.pkgmgt} value={3} onClick={this.handleTabClick.bind(this)}>
Package Manager Package Manager
</button> </button>
</div> </div>

@ -1,112 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
#application-edit-header {
height: 50px;
width: 100%;
margin: 0;
font-size: 20px;
border-bottom: solid 1px #d8d8d8;
}
.application-header-text {
margin: 10px 0px 0px 10px;
}
#save-btn-content {
float: right;
}
#app-save-btn {
border-radius: 0%;
}
.save-btn {
margin: 5px 5px 5px 0px;
height: 70%;
width: 50%;
float: right;
}
.save-btn:hover {
cursor: pointer;
}
/*Tab styling*/
div.tab {
float: left;
border-right: 1px solid #d8d8d8;
height: 100%;
}
/* Style the tab buttons */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 15px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd6d7;
cursor: pointer;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #1b3bcc;
color: white;
}
#application-edit-main-container {
display: flex;
}
#application-edit-outer-content {
height: auto;
width: 100%;
}
#application-edit-content {
margin: 5px 10px 5px 10px;
width: 90%;
}
#app-edit-content {
height: 100%;
position: relative;
}
.back-to-app {
position: absolute;
}
.back-to-app:hover {
cursor: pointer;
background-color: #888888;
}

@ -17,9 +17,8 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Badge, Button, FormGroup, Input, Label} from 'reactstrap'; import {Badge, Button, FormGroup, Input, Label, Row} from 'reactstrap';
import Dropzone from 'react-dropzone'; import Dropzone from 'react-dropzone';
import './generalInfo.css';
class GeneralInfo extends Component { class GeneralInfo extends Component {
@ -37,160 +36,162 @@ class GeneralInfo extends Component {
render() { render() {
return ( return (
<div className="app-edit-general-info"> <div className="app-edit-general-info">
<form> <Row>
<FormGroup> <form>
<Label for="app-title">Title*</Label>
<Input
required
type="text"
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-title">Description*</Label>
<Input
required
type="textarea"
multiline
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-category">Category</Label>
<Input
type="select"
name="category"
id="app-category"
>
<option>Business</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
>
{tag.value}
</Badge>
)
}
)}
</div>
</FormGroup>
<div>
<FormGroup> <FormGroup>
<Label for="app-screenshots">Screenshots*</Label> <Label for="app-title">Title*</Label>
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span> <Input
<div id="screenshot-container"> required
{this.state.screenshots.map((tile) => ( type="text"
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}} name="appName"
onMouseEnter={() => { id="app-title"
console.log("Mouse Entered") />
}}> </FormGroup>
{console.log(tile[0].preview)} <FormGroup>
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/> <Label for="app-title">Description*</Label>
</button> <Input
))} required
{this.state.screenshots.length < 3 ? type="textarea"
<Dropzone multiline
className="applicationCreateScreenshotDropZone" name="appName"
accept="image/jpeg, image/png" id="app-title"
onDrop={(screenshots, rejected) => { />
let tmpScreenshots = this.state.screenshots; </FormGroup>
tmpScreenshots.push(screenshots); <FormGroup>
console.log(screenshots); <Label for="app-category">Category</Label>
this.setState({ <Input
screenshots: tmpScreenshots type="select"
}); name="category"
}} id="app-category"
> >
<p className="applicationCreateScreenshotp">+</p> <option>Business</option>
</Dropzone> : <div/>} </Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
>
{tag.value}
</Badge>
)
}
)}
</div> </div>
</FormGroup> </FormGroup>
</div> <div>
<div style={{display: 'flex'}}>
<div style={{float: 'left', marginRight: '15px'}}>
<FormGroup> <FormGroup>
<Label for="app-icon">Icon*</Label> <Label for="app-screenshots">Screenshots*</Label>
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span> <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
<div id="app-icon-container"> <div id="screenshot-container">
{this.state.icon.map((tile) => ( {this.state.screenshots.map((tile) => (
<button onMouseEnter={() => { <button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
console.log("Mouse Entered") onMouseEnter={() => {
}}> console.log("Mouse Entered")
<img style={{height: '200px', width: '200px'}} src={tile.preview}/> }}>
{console.log(tile[0].preview)}
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
</button> </button>
))} ))}
{this.state.icon.length === 0 ? {this.state.screenshots.length < 3 ?
<Dropzone <Dropzone
className="applicationCreateIconDropZone" className="application-create-screenshot-dropzone"
accept="image/jpeg, image/png" accept="image/jpeg, image/png"
onDrop={(icon, rejected) => { onDrop={(screenshots, rejected) => {
this.setState({icon, rejected}); let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
console.log(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}} }}
> >
<p className="applicationCreateIconp">+</p> <i className="fw fw-add"></i>
</Dropzone> : <div/>} </Dropzone> : <div/>}
</div> </div>
</FormGroup> </FormGroup>
</div> </div>
<div style={{marginLeft: '15px'}}> <div style={{display: 'flex'}}>
<FormGroup> <div style={{float: 'left', marginRight: '15px'}}>
<Label for="app-banner">Banner*</Label> <FormGroup>
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span> <Label for="app-icon">Icon*</Label>
<div id="app-banner-container"> <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
{this.state.banner.map((tile) => ( <div id="app-icon-container">
<button onMouseEnter={() => { {this.state.icon.map((tile) => (
console.log("Mouse Entered") <button onMouseEnter={() => {
}}> console.log("Mouse Entered")
<img style={{height: '200px', width: '400px'}} src={tile.preview}/> }}>
</button> <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
))} </button>
{this.state.banner.length === 0 ? ))}
<Dropzone {this.state.icon.length === 0 ?
className="applicationCreateBannerDropZone" <Dropzone
accept="image/jpeg, image/png" className="application-create-icon-dropzone"
onDrop={(banner, rejected) => { accept="image/jpeg, image/png"
this.setState({banner, rejected}); onDrop={(icon, rejected) => {
}} this.setState({icon, rejected});
> }}
<p className="applicationCreateBannerp">+</p> >
</Dropzone> : <div/> <i className="fw fw-add"></i>
} </Dropzone> : <div/>}
</div> </div>
</FormGroup> </FormGroup>
</div>
<div style={{marginLeft: '15px'}}>
<FormGroup>
<Label for="app-banner">Banner*</Label>
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
<div id="app-banner-container">
{this.state.banner.map((tile) => (
<button onMouseEnter={() => {
console.log("Mouse Entered")
}}>
<img style={{height: '200px', width: '400px'}} src={tile.preview}/>
</button>
))}
{this.state.banner.length === 0 ?
<Dropzone
className="application-create-banner-dropzone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<i className="fw fw-add"></i>
</Dropzone> : <div/>
}
</div>
</FormGroup>
</div>
</div>
<div className="save-info">
<Button>Save</Button>
</div> </div>
</div> </form>
<div className="save-info"> </Row>
<Button>Save</Button>
</div>
</form>
</div> </div>
) )
} }

@ -1,26 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.app-edit-general-info {
margin-top: 20px;
}
.save-info {
float: right;
margin-bottom: 10px;
}

@ -18,7 +18,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './createRelease.css';
import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap"; import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
import UploadPackage from "./UploadPackage"; import UploadPackage from "./UploadPackage";

@ -18,7 +18,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './createRelease.css';
import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap"; import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
class UploadPackage extends Component { class UploadPackage extends Component {

@ -1,38 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.release-header {
margin-top: 20px;
margin-bottom: 20px;
}
.release-create {
height: 150px;
margin-bottom: 20px;
}
.release-detail-content {
width: 100%;
margin-top: 20%;
height: 300px;
}
.form-btn {
float: right;
margin-bottom: 10px;
}

@ -18,7 +18,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './release-mgt.css';
import {Button, Col, Row} from "reactstrap"; import {Button, Col, Row} from "reactstrap";
import CreateRelease from "../Create/CreateRelease"; import CreateRelease from "../Create/CreateRelease";

@ -1,50 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.release-content {
height: 180px;
width: 95%;
border: dashed 1px #626262;
border-radius: 2%;
position: relative;
background-color: #e8e8e8;
}
.release-content:after {
content: "";
letter-spacing: 4px;
}
.release {
margin: 30px 10px 20px 30px;
}
.no-release-content {
position: absolute;
margin-top: 10px;
left: 40%;
}
.button-add:hover {
cursor: pointer;
}
.release-inner {
margin-top: 5%;
}

@ -19,7 +19,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'; import {withRouter} from 'react-router-dom';
import {Col, Row} from "reactstrap"; import {Col, Row} from "reactstrap";
import './applicationView.css';
/** /**
* Application view component. * Application view component.

@ -1,56 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
#application-view-content {
width: 100%;
}
#application-view-row {
margin: 10px 10px 20px 20px;
}
#app-icon {
height: 100px;
width: 100px;
border: solid 1px black;
border-radius: 50%;
}
.app-updated-date {
color: #888888;
font-style: italic;
}
.app-install-count {
font-style: italic;
}
.app-details-tbl {
outline: none;
border-color: #2196F3;
}
.app-details-tbl tr {
margin: 20px 0 0 0;
}
.app-details-tbl td {
margin-left: 10px;
max-width: 400px;
}

@ -20,10 +20,12 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './floatingButton.css'; import './floatingButton.css';
/**
* Floating Action button.
* */
class FloatingButton extends Component { class FloatingButton extends Component {
handleClick(event) { handleClick(event) {
console.log("click");
this.props.onClick(event); this.props.onClick(event);
} }

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import './index.css';
import React from 'react'; import React from 'react';
import Publisher from './App'; import Publisher from './App';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';

Loading…
Cancel
Save