diff --git a/components/core/ApplicationControlMenu.js b/components/core/ApplicationControlMenu.js index dab65feb..4e4a546e 100644 --- a/components/core/ApplicationControlMenu.js +++ b/components/core/ApplicationControlMenu.js @@ -1,18 +1,26 @@ import * as React from "react"; import * as Constants from "~/common/constants"; +import * as OldSVG from "~/components/system/svg"; import { css } from "@emotion/react"; +import { Tooltip } from "react-tippy"; import Dismissible from "~/components/core/Dismissible"; -const STYLES_AVATAR = css` +const STYLES_ANCHOR = css` + position: relative; +`; + +const STYLES_BUTTON = css` + background-color: ${Constants.system.black}; + color: ${Constants.system.white}; display: inline-flex; + width: 36px; + height: 36px; + border-radius: 36px; background-size: cover; background-position: 50% 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - position: relative; - background-color: ${Constants.system.black}; - color: ${Constants.system.white}; transition: 100ms ease all; align-items: center; justify-content: center; @@ -22,17 +30,6 @@ const STYLES_AVATAR = css` } `; -const STYLES_AVATAR_ONLINE = css` - height: 16px; - width: 16px; - background-color: ${Constants.system.green}; - border: 2px solid ${Constants.system.white}; - position: absolute; - bottom: -4px; - right: -4px; - border-radius: 16px; -`; - export default class ApplicationControlMenu extends React.Component { state = {}; @@ -51,27 +48,32 @@ export default class ApplicationControlMenu extends React.Component { }; render() { + const title = this.state.visible ? "Close menu" : "Open settings menu"; + return ( - {this.props.icon ? this.props.icon : null} + + + + + + {this.state.visible ? this.props.popover : null} - {this.props.online ? : null} ); } diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js index 0a49ed54..2fbed747 100644 --- a/components/core/ApplicationHeader.js +++ b/components/core/ApplicationHeader.js @@ -186,27 +186,22 @@ export default class ApplicationHeader extends React.Component { - - {}} - size={36} - icon={} - popover={ - - } - /> - + + } + /> ); diff --git a/scenes/SceneFilesFolder.js b/scenes/SceneFilesFolder.js index 6611ec8d..b089f380 100644 --- a/scenes/SceneFilesFolder.js +++ b/scenes/SceneFilesFolder.js @@ -68,7 +68,7 @@ export default class SceneFilesFolder extends React.Component { const data = { columns: [ - { key: "name", name: "File", type: "FILE_LINK", width: "328px" }, + { key: "name", name: "Data", type: "FILE_LINK", width: "328px" }, { key: "size", name: "Size",