}
}
diff --git a/maubot/management/frontend/src/pages/dashboard/instance/ListEntry.js b/maubot/management/frontend/src/pages/dashboard/Instance.js
similarity index 67%
rename from maubot/management/frontend/src/pages/dashboard/instance/ListEntry.js
rename to maubot/management/frontend/src/pages/dashboard/Instance.js
index 9b36817..d64d648 100644
--- a/maubot/management/frontend/src/pages/dashboard/instance/ListEntry.js
+++ b/maubot/management/frontend/src/pages/dashboard/Instance.js
@@ -13,15 +13,23 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React from "react"
-import { Link } from "react-router-dom"
-import { ReactComponent as ChevronRight } from "../../../res/chevron-right.svg"
+import React, { Component } from "react"
+import { NavLink } from "react-router-dom"
+import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
const InstanceListEntry = ({ instance }) => (
-
+ {instance.id}
-
+
)
-export default InstanceListEntry
+class Instance extends Component {
+ static ListEntry = InstanceListEntry
+
+ render() {
+ return
{this.props.id}
+ }
+}
+
+export default Instance
diff --git a/maubot/management/frontend/src/pages/dashboard/plugin/ListEntry.js b/maubot/management/frontend/src/pages/dashboard/Plugin.js
similarity index 68%
rename from maubot/management/frontend/src/pages/dashboard/plugin/ListEntry.js
rename to maubot/management/frontend/src/pages/dashboard/Plugin.js
index d7563df..eae4022 100644
--- a/maubot/management/frontend/src/pages/dashboard/plugin/ListEntry.js
+++ b/maubot/management/frontend/src/pages/dashboard/Plugin.js
@@ -13,15 +13,24 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React from "react"
-import { Link } from "react-router-dom"
-import { ReactComponent as ChevronRight } from "../../../res/chevron-right.svg"
+import React, { Component } from "react"
+import { NavLink } from "react-router-dom"
+import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
const PluginListEntry = ({ plugin }) => (
-
+ {plugin.id}
-
+
)
-export default PluginListEntry
+
+class Plugin extends Component {
+ static ListEntry = PluginListEntry
+
+ render() {
+ return
{this.props.id}
+ }
+}
+
+export default Plugin
diff --git a/maubot/management/frontend/src/pages/dashboard/index.js b/maubot/management/frontend/src/pages/dashboard/index.js
index 2ca434f..8196f60 100644
--- a/maubot/management/frontend/src/pages/dashboard/index.js
+++ b/maubot/management/frontend/src/pages/dashboard/index.js
@@ -17,11 +17,9 @@ import React, { Component } from "react"
import { Route, Switch, Link } from "react-router-dom"
import api from "../../api"
import { ReactComponent as Plus } from "../../res/plus.svg"
-import InstanceListEntry from "./instance/ListEntry"
-import InstanceView from "./instance/View"
+import Instance from "./Instance"
import Client from "./Client"
-import PluginListEntry from "./plugin/ListEntry"
-import PluginView from "./plugin/View"
+import Plugin from "./Plugin"
class Dashboard extends Component {
constructor(props) {
@@ -99,7 +97,7 @@ class Dashboard extends Component {
"Hello, World!"}/>
- }/>
+ this.add("instances", newEntry)}/>}/>
this.add("clients", newEntry)}/>}/>
- }/>
+ this.add("plugins", newEntry)}/>}/>
- this.renderView("instance", InstanceView, match.params.id)}/>
+ this.renderView("instance", Instance, match.params.id)}/>
this.renderView("client", Client, match.params.id)}/>
- this.renderView("plugin", PluginView, match.params.id)}/>
+ this.renderView("plugin", Plugin, match.params.id)}/>
"Not found :("}/>
diff --git a/maubot/management/frontend/src/style/lib/switch.sass b/maubot/management/frontend/src/style/lib/switch.sass
index c087da4..570320c 100644
--- a/maubot/management/frontend/src/style/lib/switch.sass
+++ b/maubot/management/frontend/src/style/lib/switch.sass
@@ -29,6 +29,7 @@
box-sizing: border-box
> .box
+ display: flex
box-sizing: border-box
width: 50%
height: 100%
diff --git a/maubot/management/frontend/src/style/pages/client.sass b/maubot/management/frontend/src/style/pages/client.sass
deleted file mode 100644
index e0ffb66..0000000
--- a/maubot/management/frontend/src/style/pages/client.sass
+++ /dev/null
@@ -1,145 +0,0 @@
-// maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2018 Tulir Asokan
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see .
-
-> .client
- margin: 1rem
- display: flex
-
- > div.sidebar
- vertical-align: top
- text-align: center
- width: 8rem
-
- > div
- margin-bottom: 1rem
-
- > div.avatar-container
- position: relative
- width: 8rem
- height: 8rem
- border-radius: 50%
- overflow: hidden
-
- display: flex
- align-items: center
- justify-content: center
-
- > img.avatar
- position: absolute
- display: block
- max-width: 8rem
- max-height: 8rem
- user-select: none
-
- > svg.upload
- position: absolute
- display: block
- visibility: hidden
-
- width: 6rem
- height: 6rem
-
- padding: 1rem
- user-select: none
-
- > input.file-selector
- position: absolute
- width: 8rem
- height: 8rem
- user-select: none
- opacity: 0
-
- > div.spinner
- +thick-spinner
-
- &:not(.uploading)
- > input.file-selector
- cursor: pointer
-
- &:hover, &.drag
- > img.avatar
- opacity: .25
-
- > svg.upload
- visibility: visible
-
- &.no-avatar
- > img.avatar
- visibility: hidden
-
- > svg.upload
- visibility: visible
- opacity: .5
-
- &.uploading
- > img.avatar
- opacity: .25
-
- > div.started-container
- display: inline-flex
-
- > span.started
- display: inline-block
- height: 0
- width: 0
- border-radius: 50%
- margin: .5rem
-
- &.true
- background-color: $primary
- box-shadow: 0 0 .75rem .75rem $primary
-
- &.false
- background-color: $error-light
- box-shadow: 0 0 .75rem .75rem $error-light
-
- &.disabled
- background-color: $border-color
- box-shadow: 0 0 .75rem .75rem $border-color
-
- > span.text
- display: inline-block
- margin-left: 1rem
-
- > div.info-container
- vertical-align: top
-
- margin: 0 1rem
- flex: 1
-
- > .buttons
- display: flex
-
- +button-group
-
- > .error
- margin-top: 1rem
- +notification($error)
-
- &:empty
- display: none
-
- button.save, button.delete
- +button
- +main-color-button
- width: 100%
- height: 2.5rem
- padding: 0
-
- > .spinner
- +thick-spinner
- +white-spinner
- width: 2rem
diff --git a/maubot/management/frontend/src/style/pages/client/avatar.sass b/maubot/management/frontend/src/style/pages/client/avatar.sass
new file mode 100644
index 0000000..9174ba8
--- /dev/null
+++ b/maubot/management/frontend/src/style/pages/client/avatar.sass
@@ -0,0 +1,77 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+> div.avatar-container
+ position: relative
+ width: 8rem
+ height: 8rem
+ border-radius: 50%
+ overflow: hidden
+
+ display: flex
+ align-items: center
+ justify-content: center
+
+ > img.avatar
+ position: absolute
+ display: block
+ max-width: 8rem
+ max-height: 8rem
+ user-select: none
+
+ > svg.upload
+ position: absolute
+ display: block
+ visibility: hidden
+
+ width: 6rem
+ height: 6rem
+
+ padding: 1rem
+ user-select: none
+
+ > input.file-selector
+ position: absolute
+ width: 8rem
+ height: 8rem
+ user-select: none
+ opacity: 0
+
+ > div.spinner
+ +thick-spinner
+
+ &:not(.uploading)
+ > input.file-selector
+ cursor: pointer
+
+ &:hover, &.drag
+ > img.avatar
+ opacity: .25
+
+ > svg.upload
+ visibility: visible
+
+ &.no-avatar
+ > img.avatar
+ visibility: hidden
+
+ > svg.upload
+ visibility: visible
+ opacity: .5
+
+ &.uploading
+ > img.avatar
+ opacity: .25
diff --git a/maubot/management/frontend/src/style/pages/client/index.sass b/maubot/management/frontend/src/style/pages/client/index.sass
new file mode 100644
index 0000000..f34e43a
--- /dev/null
+++ b/maubot/management/frontend/src/style/pages/client/index.sass
@@ -0,0 +1,61 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+> div.client
+ display: flex
+ margin: 2rem
+
+
+ > div.sidebar
+ vertical-align: top
+ text-align: center
+ width: 8rem
+
+ > div
+ margin-bottom: 1rem
+
+ @import avatar
+ @import started
+
+ > div.info
+ vertical-align: top
+ margin-left: 1rem
+ flex: 1
+
+ @import instances
+
+ > .buttons
+ display: flex
+ +button-group
+
+ > .error
+ margin-top: 1rem
+ +notification($error)
+
+ &:empty
+ display: none
+
+ button.save, button.delete
+ +button
+ +main-color-button
+ width: 100%
+ height: 2.5rem
+ padding: 0
+
+ > .spinner
+ +thick-spinner
+ +white-spinner
+ width: 2rem
diff --git a/maubot/management/frontend/src/pages/dashboard/instance/View.js b/maubot/management/frontend/src/style/pages/client/instances.sass
similarity index 62%
rename from maubot/management/frontend/src/pages/dashboard/instance/View.js
rename to maubot/management/frontend/src/style/pages/client/instances.sass
index 9a82cba..7d5fb3c 100644
--- a/maubot/management/frontend/src/pages/dashboard/instance/View.js
+++ b/maubot/management/frontend/src/style/pages/client/instances.sass
@@ -13,12 +13,24 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React, { Component } from "react"
-class InstanceView extends Component {
- render() {
- return
{this.props.id}
- }
-}
+> div.instances
+ margin-top: 1rem
-export default InstanceView
+ > h3
+ margin-bottom: .5rem
+
+ > a.instance
+ display: block
+ width: 100%
+ padding: .375rem .5rem
+ background-color: white
+ border-radius: .25rem
+ color: $text-color
+ text-decoration: none
+ box-sizing: border-box
+ border: 1px solid $primary
+
+ &:hover
+ color: $inverted-text-color
+ background-color: $primary
diff --git a/maubot/management/frontend/src/pages/dashboard/plugin/View.js b/maubot/management/frontend/src/style/pages/client/started.sass
similarity index 55%
rename from maubot/management/frontend/src/pages/dashboard/plugin/View.js
rename to maubot/management/frontend/src/style/pages/client/started.sass
index fbcf2c3..0f63095 100644
--- a/maubot/management/frontend/src/pages/dashboard/plugin/View.js
+++ b/maubot/management/frontend/src/style/pages/client/started.sass
@@ -13,12 +13,29 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React, { Component } from "react"
-class PluginView extends Component {
- render() {
- return