mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-24 03:01:58 +01:00
mock up a sidebar for scripthaus
This commit is contained in:
sawka
parent
365e9c55a2
commit
d679ff7cf3
94
src/main.tsx
94
src/main.tsx
@ -150,7 +150,9 @@ class LineCmd extends React.Component<{line : LineType, session : Session, chang
|
||||
<div className="terminal" id={"term-" + getLineId(line)}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={this.doRefresh} className="button has-background-black has-text-white">Refresh</div>
|
||||
<div onClick={this.doRefresh} className="button refresh-button has-background-black is-small">
|
||||
<span className="icon"><i className="fa fa-refresh"/></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -209,7 +211,7 @@ class CmdInput extends React.Component<{session : Session, windowid : string}, {
|
||||
<div className="box cmd-input has-background-black">
|
||||
<div className="cmd-input-context">
|
||||
<div className="has-text-white">
|
||||
<span className="bold term-bright-green">[ mike@imac27 master ~/work/gopath/src/github.com/sawka/darktile-termutil ]</span>
|
||||
<span className="bold term-bright-green">[mike@local ~]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cmd-input-field field has-addons">
|
||||
@ -277,6 +279,87 @@ class SessionView extends React.Component<{session : SessionType}, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class MainSideBar extends React.Component<{}, {}> {
|
||||
collapsed : mobx.IObservableValue<boolean> = mobx.observable.box(false);
|
||||
|
||||
@boundMethod
|
||||
toggleCollapsed() {
|
||||
mobx.action(() => {
|
||||
this.collapsed.set(!this.collapsed.get());
|
||||
})();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={cn("main-sidebar", {"collapsed": this.collapsed.get()})}>
|
||||
<div className="collapse-container">
|
||||
<div className="arrow-container" onClick={this.toggleCollapsed}>
|
||||
<If condition={!this.collapsed.get()}><i className="fa fa-arrow-left"/></If>
|
||||
<If condition={this.collapsed.get()}><i className="fa fa-arrow-right"/></If>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu">
|
||||
<p className="menu-label">
|
||||
Shared Sessions
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
<li><a className="is-active">#default</a></li>
|
||||
<li><a>#server-status</a></li>
|
||||
<li><a className="activity">#bug-3458 <div className="tag is-link">3</div></a></li>
|
||||
<li><a>#dev-build</a></li>
|
||||
<li className="new-session"><a className="new-session"><i className="fa fa-plus"/> New Session</a></li>
|
||||
</ul>
|
||||
<p className="menu-label">
|
||||
Private Sessions
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
<li><a>#default</a></li>
|
||||
<li className="new-session"><a className="new-session"><i className="fa fa-plus"/> New Session</a></li>
|
||||
</ul>
|
||||
<p className="menu-label">
|
||||
Direct Messages
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
<li><a>
|
||||
<i className="user-status status fa fa-circle"/>
|
||||
<img className="avatar" src="https://i.pravatar.cc/48?img=4"/>
|
||||
Mike S <span className="sub-label">you</span>
|
||||
</a></li>
|
||||
<li><a>
|
||||
<i className="user-status status offline fa fa-circle"/>
|
||||
<img className="avatar" src="https://i.pravatar.cc/48?img=8"/>
|
||||
Matt P
|
||||
</a></li>
|
||||
<li><a>
|
||||
<i className="user-status status offline fa fa-circle"/>
|
||||
<img className="avatar" src="https://i.pravatar.cc/48?img=12"/>
|
||||
Adam B
|
||||
</a></li>
|
||||
<li><a className="activity">
|
||||
<i className="user-status status fa fa-circle"/>
|
||||
<img className="avatar" src="https://i.pravatar.cc/48?img=6"/>
|
||||
Michelle T <div className="tag is-link">2</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
<div className="spacer"></div>
|
||||
<p className="menu-label">
|
||||
Remotes
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
<li><a><i className="status fa fa-circle"/>local</a></li>
|
||||
<li><a><i className="status fa fa-circle"/>local-sudo</a></li>
|
||||
<li><a><i className="status offline fa fa-circle"/>mike@app01.ec2</a></li>
|
||||
<li><a><i className="status fa fa-circle"/>mike@test01.ec2</a></li>
|
||||
<li><a><i className="status offline fa fa-circle"/>root@app01.ec2</a></li>
|
||||
</ul>
|
||||
<div className="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class Main extends React.Component<{}, {}> {
|
||||
constructor(props : any) {
|
||||
@ -286,12 +369,15 @@ class Main extends React.Component<{}, {}> {
|
||||
render() {
|
||||
let session = getDefaultSession();
|
||||
return (
|
||||
<div className="main">
|
||||
<div id="main">
|
||||
<h1 className="title scripthaus-logo-small">
|
||||
<div className="title-cursor">█</div>
|
||||
ScriptHaus
|
||||
</h1>
|
||||
<SessionView session={session}/>
|
||||
<div className="main-content">
|
||||
<MainSideBar/>
|
||||
<SessionView session={session}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
174
src/sh2.less
174
src/sh2.less
@ -1,4 +1,8 @@
|
||||
.main {
|
||||
#main {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title.scripthaus-logo-small {
|
||||
padding-left: 10px;
|
||||
padding-top: 8px;
|
||||
@ -10,6 +14,7 @@
|
||||
color: rgb(0, 177, 10);
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
|
||||
.title-cursor {
|
||||
position: absolute;
|
||||
@ -22,11 +27,163 @@
|
||||
}
|
||||
}
|
||||
|
||||
.session-view {
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: black;
|
||||
flex-grow: 1;
|
||||
|
||||
.main-sidebar {
|
||||
border-right: 1px solid #aaa;
|
||||
padding: 0 5px 5px 5px;
|
||||
width: 200px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ddd;
|
||||
position: relative;
|
||||
|
||||
.menu {
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bottom-spacer {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
p.menu-label {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.menu-list li.new-session {
|
||||
a.new-session {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list li a {
|
||||
color: #bbb;
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px 5px 12px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.user-status {
|
||||
position: absolute !important;
|
||||
top: 24px !important;
|
||||
left: 32px !important;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sub-label {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.activity {
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
|
||||
.tag {
|
||||
margin-left: 4px;
|
||||
padding: 0 5px 0 5px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active:hover {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #444;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 8px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
color: #4e9a06;
|
||||
|
||||
&.offline {
|
||||
color: #cc0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
width: 50px;
|
||||
|
||||
.collapse-container {
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-container {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: -4px;
|
||||
|
||||
.arrow-container {
|
||||
color: #777;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-view {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
}
|
||||
|
||||
.line {
|
||||
padding: 10px 5px 5px 5px;
|
||||
margin: 0px 5px 5px 5px;
|
||||
@ -143,6 +300,17 @@ body .xterm .xterm-viewport {
|
||||
}
|
||||
|
||||
.line.line-cmd {
|
||||
.button.refresh-button {
|
||||
border-color: #777;
|
||||
color: #777;
|
||||
|
||||
&:hover {
|
||||
border-color: #fff;
|
||||
.icon i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line.line-invalid {
|
||||
@ -159,7 +327,7 @@ body .xterm .xterm-viewport {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-right: 15px;
|
||||
border-top: 2px solid #ddd;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.cmd-input {
|
||||
|
||||
@ -13,7 +13,7 @@ window.ScriptHausClientId = uuidv4();
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
GlobalWS.reconnect();
|
||||
let reactElem = React.createElement(Main, null, null);
|
||||
let elem = document.getElementById("main");
|
||||
let elem = document.getElementById("app");
|
||||
let root = createRoot(elem);
|
||||
root.render(reactElem);
|
||||
});
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="main"></div>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user