Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

working on bookmarks, fix hover issue

Browse Source
This commit is contained in:
sawka 2023-02-21 11:29:54 -08:00
parent c507769421
commit aadf9d854d
2 changed files with 79 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/main.tsx
View File

@ -215,7 +215,7 @@ class LineText extends React.Component<{sw : ScreenWindow, line : LineType}, {}>
let isSelected = mobx.computed(() => (sw.selectedLine.get() == line.linenum), {name: "computed-isSelected"}).get();
let isFocused = mobx.computed(() => (sw.focusType.get() == "cmd"), {name: "computed-isFocused"}).get();
return (
<div className="line line-text top-border" data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} onClick={this.clickHandler}>
<div className="line line-text top-border focus-parent" data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} onClick={this.clickHandler}>
<div className={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused})}/>
<LineAvatar line={line} cmd={null}/>
<div className="line-content">
@ -744,8 +744,8 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
</div>
<div key="meta" className="meta-wrap">
<div key="meta1" className="meta meta-line1">
<div className="user" style={{display: "none"}}>{line.userid}</div>
<div className="ts">{formattedTime}</div>
<div>&nbsp;</div>
<div className="termopts">
({termOpts.rows}x{termOpts.cols})
<If condition={cmd.isRunning() && false}><i onClick={this.handleResizeButton} className="resize-button fa fa-arrows-alt"/></If>
@ -2775,6 +2775,23 @@ class HistoryView extends React.Component<{}, {}> {
}
}
@mobxReact.observer
class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
render() {
let bm = this.props.bookmark;
let isSelected = false;
return (
<div className="bookmark focus-parent">
<div className={cn("focus-indicator", {"active": isSelected})}/>
<div>bookmark - {bm.bookmarkid}</div>
<div>
<code>{bm.cmdstr}</code>
</div>
</div>
);
}
}
@mobxReact.observer
class BookmarksView extends React.Component<{}, {}> {
render() {
@ -2784,10 +2801,13 @@ class BookmarksView extends React.Component<{}, {}> {
let bookmark : BookmarkType = null;
return (
<div className={cn("bookmarks-view", {"is-hidden": isHidden})}>
<div className="bookmarks-title">BOOKMARKS</div>
<div>
<div className="bookmarks-title">
<i className="fa fa-bookmark" style={{marginRight: 10}}/>
BOOKMARKS
</div>
<div className="bookmarks-list">
<For index="idx" each="bookmark" of={bookmarks}>
<div>bookmark {idx} -- {JSON.stringify(bookmark)}</div>
<Bookmark key={bookmark.bookmarkid} bookmark={bookmark}/>
</For>
</div>
</div>

99
src/sh2.less
View File

@ -119,9 +119,26 @@ html, body, #main {
.bookmarks-view {
.bookmarks-title {
margin: 10px 0 10px 15px;
margin: 20px 10px 10px 15px;
padding-bottom: 12px;
.mono-font(1.5rem);
color: @term-bright-white;
border-bottom: 1px solid white;
}
.bookmarks-list {
color: white;
margin-left: 20px;
}
.bookmark {
border-top: 1px solid #ccc;
padding: 5px 5px 5px 0;
margin-bottom: 5px;
}
.bookmark:first-child {
border-top: 0;
}
}
@ -680,41 +697,10 @@ html, body, #main {
border-top: none;
}
&:hover .focus-indicator {
display: block;
background-color: #222;
}
&:hover .meta .termopts {
display: block;
}
.focus-indicator {
position: absolute;
display: none;
width: 5px;
border-radius: 3px;
height: calc(100% - 20px);
top: 10px;
left: 0;
z-index: 8;
&.selected {
display: block;
background-color: #666;
}
&.active, &.active.selected {
display: block;
background-color: @tab-blue;
}
&.active.selected.fg-focus {
display: block;
background-color: @tab-green;
}
}
.avatar {
max-height: 38px;
width: 38px;
@ -817,18 +803,18 @@ html, body, #main {
margin-right: 10px;
}
.ts {
.ts, .termopts {
display: flex;
color: #aaa;
margin-top: 5px;
.mono-font(11px);
}
.termopts {
margin-left: 10px;
display: flex;
color: #aaa;
margin-top: 7px;
font-size: 12px;
.mono-font(10px);
margin-top: 5px;
.mono-font(11px);
display: none;
.resize-button {
@ -987,17 +973,9 @@ body .xterm .xterm-viewport {
}
.focus-indicator {
position: absolute;
background-color: #666;
width: 5px;
border-radius: 3px;
height: 90%;
top: 5%;
left: 4px;
&.active {
background-color: @tab-blue;
}
}
&.has-history {
@ -1731,6 +1709,37 @@ input[type=checkbox] {
}
}
.focus-parent:hover .focus-indicator {
display: block;
background-color: #222;
}
.focus-indicator {
position: absolute;
display: none;
width: 5px;
border-radius: 3px;
height: calc(100% - 20px);
top: 10px;
left: 0;
z-index: 8;
&.selected {
display: block;
background-color: #666;
}
&.active, &.active.selected {
display: block;
background-color: @tab-blue;
}
&.active.selected.fg-focus {
display: block;
background-color: @tab-green;
}
}
@keyframes loader-ring {
0% {
transform: rotate(0deg);