upload

src/admin/client/modules/apps/account/appDetails/description.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import messages from 'lib/text';
+import style from './style.css';
+
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import Divider from 'material-ui/Divider';
+import FontIcon from 'material-ui/FontIcon';
+
+const AppDescription = ({
+	name,
+	description,
+	coverUrl,
+	developer,
+	enabled
+}) => (
+	<div style={{ maxWidth: 720, width: '100%' }}>
+		<Paper className="paper-box" zDepth={1}>
+			<div className={style.innerBox}>
+				<div className="row">
+					<div className="col-xs-4">
+						<img src={coverUrl} alt={name} className={style.cover} />
+					</div>
+					<div className="col-xs-8">
+						<h1 className={style.title}>{name}</h1>
+						<div className={style.developer}>{developer}</div>
+						{/* {!enabled &&
+              <RaisedButton label={messages.enable} primary={true} disabled={loadingEnableDisable} onClick={enableService} />
+            }
+            {enabled &&
+              <RaisedButton label={messages.disable} disabled={loadingEnableDisable} onClick={disableService} />
+            } */}
+					</div>
+				</div>
+				<div
+					className={style.description}
+					dangerouslySetInnerHTML={{ __html: description }}
+				/>
+			</div>
+		</Paper>
+	</div>
+);
+
+export default AppDescription;

src/admin/client/modules/apps/account/appDetails/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import AppDescription from './description';
+import style from './style.css';
+import Paper from 'material-ui/Paper';
+import apps from 'src/apps';
+
+const AppDetails = ({ match }) => {
+	const { appKey } = match.params;
+	const app = apps.find(a => a.Description.key === appKey);
+	const AppModule = app.App;
+	const appDescription = app.Description;
+
+	return (
+		<div className={style.detailsContainer + ' scroll col-full-height'}>
+			<AppDescription {...appDescription} />
+			<div style={{ maxWidth: 720, width: '100%' }}>
+				<Paper className="paper-box" zDepth={1}>
+					<div className={style.innerBox}>
+						<AppModule />
+					</div>
+				</Paper>
+			</div>
+		</div>
+	);
+};
+
+export default AppDetails;

src/admin/client/modules/apps/account/appDetails/style.css

@@ -0,0 +1,90 @@
+.innerBox {
+  padding: 30px;
+}
+
+.title {
+  font-size: 30px;
+  font-weight: 400;
+  line-height: 35px;
+  margin: 0 0 10px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.developer {
+  color: #616161;
+  font-size: 14px;
+  margin: 0 0 10px 0;
+}
+
+.cover {
+  width: 100%;
+}
+
+.description {
+  margin-top: 30px;
+  font-size: 14px;
+  line-height: 24px;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.description a {
+  color: #008eb4;
+}
+
+.description img {
+  width: 90%;
+  box-shadow: 0px 0px 10px #AAA;
+  border-radius: 5px;
+  display: block;
+  margin: 30px auto;
+}
+
+.description ul,
+.description ol {
+  margin: 0;
+}
+
+.detailsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logsBox {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.logsItem {
+  padding: 12px 30px;
+  font-size: 14px;
+}
+
+.logsItem:nth-child(odd) {
+  background: rgba(0,0,0,0.03);
+}
+
+.logsItem:hover {
+  background: rgba(0,0,0,0.2);
+}
+
+.logDate {
+  color: #777;
+  font-size: 11px;
+}
+
+.logMessage {
+
+}
+
+.action {
+  padding: 30px;
+  border-bottom: 1px solid rgb(224, 224, 224);
+}
+
+.action:last-child {
+  border-bottom: none
+}