Merge pull request #1001 from menakaj/application-mgt
WSO2 Font integration and Custom components.merge-requests/7/head
sinthuja
7 years ago
committed by
GitHub
commit
c0609887b6
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 443 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -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;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,483 @@
|
|||||||
|
/*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Body Styling */
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
font-family: Roboto sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Login page styles*/
|
||||||
|
#userName {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#password {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-btn {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: navy;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-container {
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 auto
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-card {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: #BaBaBa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base layout container */
|
||||||
|
#container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base layout header content*/
|
||||||
|
#header-content {
|
||||||
|
height: 125px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
background-color: #3b33bd;
|
||||||
|
position: fixed; /* Set the navbar to fixed position */
|
||||||
|
top: 0; /* Position the navbar at the top of the page */
|
||||||
|
z-index: 2;
|
||||||
|
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 {
|
||||||
|
margin: 16px 16px 20px 16px;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 25px;
|
||||||
|
top: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The buttons in the header (User and Notification)*/
|
||||||
|
#header-btn-container {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search box styles */
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-box {
|
||||||
|
display: flex;
|
||||||
|
color: #a8a8a8;
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
top: 75px;
|
||||||
|
left: 80px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
background-color: transparent;
|
||||||
|
left: 15px;
|
||||||
|
top: 0px;
|
||||||
|
height: 25px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
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 {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: solid 1px cornflowerblue;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-link-placeholder {
|
||||||
|
color: #888888;
|
||||||
|
float: right;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#application-list {
|
||||||
|
margin-top: 20px;
|
||||||
|
transition: margin-right .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-image-screenshot {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-image-icon {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-image-banner {
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-banner-dropzone {
|
||||||
|
width: 300px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 5%;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(157, 159, 157, 0.53);
|
||||||
|
border: dashed #888888 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-banner-dropzone i {
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
left: 145px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-screenshot-dropzone {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin: 0 5px 0 5px;
|
||||||
|
border-radius: 10%;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(157, 159, 157, 0.53);
|
||||||
|
border: dashed #888888 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-screenshot-dropzone i {
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
left: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-icon-dropzone {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 10%;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(157, 159, 157, 0.53);
|
||||||
|
border: dashed #888888 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-create-icon-dropzone i {
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
left: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#screenshot-container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-icon-container {
|
||||||
|
height: 300px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#modal-body-content {
|
||||||
|
max-height: 700px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-btn-screenshot {
|
||||||
|
margin: 0 5px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-create-modal {
|
||||||
|
max-width: 700px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#store {
|
||||||
|
border: none;
|
||||||
|
border-bottom: solid #BDBDBD 1px;
|
||||||
|
border-radius: 0px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#version {
|
||||||
|
border: none;
|
||||||
|
border-bottom: solid #BDBDBD 1px;
|
||||||
|
border-radius: 0px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-release-switch-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-release-switch-label {
|
||||||
|
position: absolute;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-release-switch-switch {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-sub-title {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 12px;
|
||||||
|
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;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.middle-content {
|
|
||||||
width: 95%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 1% 0 0 0;
|
|
||||||
}
|
|
||||||
@ -1,111 +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-base {
|
|
||||||
width: 70%;
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
border: solid 1px #828282;
|
|
||||||
}
|
|
||||||
|
|
||||||
#application-edit-header {
|
|
||||||
height: 50px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
background-color: #9a9a9a;
|
|
||||||
border: solid 1px #a2a2a2;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 1px solid #ccc;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
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: #ddd;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Create an active/current "tab button" class */
|
|
||||||
div.tab button.active {
|
|
||||||
background-color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
/*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import {Badge, Button, FormGroup, Input, Label, Row} from 'reactstrap';
|
||||||
|
import Dropzone from 'react-dropzone';
|
||||||
|
|
||||||
|
class GeneralInfo extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
defValue: "",
|
||||||
|
tags: [],
|
||||||
|
screenshots: [],
|
||||||
|
icon: [],
|
||||||
|
banner: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//TODO: Remove Console logs.
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="app-edit-general-info">
|
||||||
|
<Row>
|
||||||
|
<form>
|
||||||
|
<FormGroup>
|
||||||
|
<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>
|
||||||
|
<Label for="app-screenshots">Screenshots*</Label>
|
||||||
|
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
|
||||||
|
<div id="screenshot-container">
|
||||||
|
{this.state.screenshots.map((tile) => (
|
||||||
|
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
console.log("Mouse Entered")
|
||||||
|
}}>
|
||||||
|
{console.log(tile[0].preview)}
|
||||||
|
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{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>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex'}}>
|
||||||
|
<div style={{float: 'left', marginRight: '15px'}}>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="app-icon">Icon*</Label>
|
||||||
|
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||||
|
<div id="app-icon-container">
|
||||||
|
{this.state.icon.map((tile) => (
|
||||||
|
<button onMouseEnter={() => {
|
||||||
|
console.log("Mouse Entered")
|
||||||
|
}}>
|
||||||
|
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{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>
|
||||||
|
</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>
|
||||||
|
</form>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GeneralInfo;
|
||||||
|
|
||||||
@ -1,200 +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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
|
||||||
import {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
|
|
||||||
import Dropzone from 'react-dropzone';
|
|
||||||
import './generalInfo.css';
|
|
||||||
|
|
||||||
class GeneralInfo extends Component {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.state = {
|
|
||||||
defValue: "",
|
|
||||||
tags: [],
|
|
||||||
screenshots: [],
|
|
||||||
icon: [],
|
|
||||||
banner: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="app-edit-general-info">
|
|
||||||
<form>
|
|
||||||
<FormGroup>
|
|
||||||
<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>
|
|
||||||
<Label for="app-screenshots">Screenshots*</Label>
|
|
||||||
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
|
|
||||||
<div id="screenshot-container">
|
|
||||||
{this.state.screenshots.map((tile) => (
|
|
||||||
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
|
|
||||||
onMouseEnter={() => {
|
|
||||||
console.log("Mouse Entered")
|
|
||||||
}}>
|
|
||||||
{console.log(tile[0].preview)}
|
|
||||||
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
{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>
|
|
||||||
</FormGroup>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex'}}>
|
|
||||||
<div style={{float: 'left', marginRight: '15px'}}>
|
|
||||||
<FormGroup>
|
|
||||||
<Label for="app-icon">Icon*</Label>
|
|
||||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
|
||||||
<div id="app-icon-container">
|
|
||||||
{this.state.icon.map((tile) => (
|
|
||||||
<button onMouseEnter={() => {
|
|
||||||
console.log("Mouse Entered")
|
|
||||||
}}>
|
|
||||||
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
{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>
|
|
||||||
</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="applicationCreateBannerDropZone"
|
|
||||||
accept="image/jpeg, image/png"
|
|
||||||
onDrop={(banner, rejected) => {
|
|
||||||
this.setState({banner, rejected});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p className="applicationCreateBannerp">+</p>
|
|
||||||
</Dropzone> : <div/>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</FormGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="save-info">
|
|
||||||
<Button>Save</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default GeneralInfo;
|
|
||||||
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
67
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
67
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
38
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
38
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
@ -1,238 +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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userName {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#password {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#login-btn {
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: navy;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#login-container {
|
|
||||||
width: 50%;
|
|
||||||
margin: 0 auto
|
|
||||||
}
|
|
||||||
|
|
||||||
#login-card {
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: #BaBaBa;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-content {
|
|
||||||
height: 100px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
background-color: #BDBDBD;
|
|
||||||
border-bottom: solid 2px;
|
|
||||||
position: fixed; /* Set the navbar to fixed position */
|
|
||||||
top: 0; /* Position the navbar at the top of the page */
|
|
||||||
z-index: 2;
|
|
||||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
#application-content {
|
|
||||||
max-height: 800px;
|
|
||||||
margin-top: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#add-btn {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: solid 2px;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #BDBDBD;
|
|
||||||
left: 15px;
|
|
||||||
top: 75px;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 50px;
|
|
||||||
width: 50px;
|
|
||||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-btn.div {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fw-api:before {
|
|
||||||
content: '\e601';
|
|
||||||
}
|
|
||||||
|
|
||||||
#btn {
|
|
||||||
background-color: #BDBDBD;
|
|
||||||
border-color: #BDBDBD;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-text {
|
|
||||||
font-size: 25px;
|
|
||||||
top: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-btn {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-box {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search {
|
|
||||||
background-color: #BDBDBD;
|
|
||||||
left: 110px;
|
|
||||||
top: 20px;
|
|
||||||
height: 25px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
border-bottom: solid 1px black;
|
|
||||||
border-radius: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#application-list {
|
|
||||||
margin-top: 20px;
|
|
||||||
transition: margin-right .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-image-screenshot {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-image-icon {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-image-banner {
|
|
||||||
width: 400px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.applicationCreateBannerDropZone {
|
|
||||||
width: 300px;
|
|
||||||
height: 150px;
|
|
||||||
border-radius: 5%;
|
|
||||||
background-color: rgba(157, 159, 157, 0.53);
|
|
||||||
border: dashed #888888 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.applicationCreateBannerp {
|
|
||||||
margin: 70px 40px 40px 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.applicationCreateScreenshotDropZone {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
border-radius: 10%;
|
|
||||||
background-color: rgba(157, 159, 157, 0.53);
|
|
||||||
border: dashed #888888 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.applicationCreateIconDropZone {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border-radius: 10%;
|
|
||||||
background-color: rgba(157, 159, 157, 0.53);
|
|
||||||
border: dashed #888888 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.applicationCreateIconp {
|
|
||||||
margin: 70px 40px 70px 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.applicationCreateScreenshotp {
|
|
||||||
margin: 70px 40px 70px 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#screenshot-container {
|
|
||||||
display: flex;
|
|
||||||
overflow-x: auto;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-icon-container {
|
|
||||||
height: 300px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modal-body-content {
|
|
||||||
max-height: 700px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img-btn-screenshot {
|
|
||||||
margin: 0 5px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-create-modal {
|
|
||||||
max-width: 700px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#store {
|
|
||||||
border: none;
|
|
||||||
border-bottom: solid #BDBDBD 1px;
|
|
||||||
border-radius: 0px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#version {
|
|
||||||
border: none;
|
|
||||||
border-bottom: solid #BDBDBD 1px;
|
|
||||||
border-radius: 0px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-release-switch-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-release-switch-label {
|
|
||||||
position: absolute;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-release-switch-switch {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-sub-title {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #818181;
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue