mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-07 19:28:44 +01:00
da2291f889
This adds support for searching the terminal buffer using the `@xterm/addon-search` library. It also adds three options for searching: regex, case-sensitive, and whole-word. These can be included or excluded from the search options for `useSearch` depending on whether the search backend supports it.  I didn't like any of the Font Awesome icons for these toggles so until we have time to make some of our own icons that better match the Font Awesome style, I've appropriated VSCode's icons from their [codicons font](https://github.com/microsoft/vscode-codicons). To implement the toggle-able buttons for these options, I've introduced a new HeaderElem component, `ToggleIconButton`. This is styled similarly to `IconButton`, but when you hover over it, it also shows a highlighted background and when active, it shows as fully-opaque and with an accented border. Also removes the `useDismiss` behavior for the search box to better match behavior in other apps. Also fixes the scrollbar observer from my previous PR so it's wider.
183 lines
3.9 KiB
SCSS
183 lines
3.9 KiB
SCSS
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.connection-btn {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
line-height: 1;
|
|
display: flex;
|
|
background-color: orangered;
|
|
justify-content: flex-start;
|
|
width: 200px;
|
|
}
|
|
|
|
.view-term {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.term-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 4px 10px;
|
|
height: 35px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.term-toolbar {
|
|
height: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.term-cmd-toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
align-items: center;
|
|
|
|
.term-cmd-toolbar-text {
|
|
font: var(--fixed-font);
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
.term-connectelem {
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
line-height: 1;
|
|
margin: 5px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.term-htmlelem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
|
|
.block-content {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&.term-mode-term {
|
|
.term-connectelem {
|
|
display: flex;
|
|
}
|
|
.term-htmlelem {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.term-mode-vdom {
|
|
.term-connectelem {
|
|
display: none;
|
|
}
|
|
.term-htmlelem {
|
|
display: flex;
|
|
}
|
|
|
|
.ijson iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.term-stickers {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: var(--zindex-termstickers);
|
|
pointer-events: none;
|
|
|
|
.term-sticker-image {
|
|
img {
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.term-sticker-svg {
|
|
svg {
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// The 18px width is the width of the scrollbar plus the margin
|
|
.term-scrollbar-show-observer {
|
|
z-index: calc(var(--zindex-xterm-viewport-overlay) - 1);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 18px;
|
|
}
|
|
|
|
.term-scrollbar-hide-observer {
|
|
z-index: calc(var(--zindex-xterm-viewport-overlay) + 1);
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: calc(100% - 18px);
|
|
}
|
|
|
|
.terminal {
|
|
.xterm-viewport {
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: var(--scrollbar-background-color);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
background-color: var(--scrollbar-thumb-color);
|
|
border-radius: 4px;
|
|
margin: 0 1px 0 1px;
|
|
|
|
&:hover {
|
|
background-color: var(--scrollbar-thumb-hover-color);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--scrollbar-thumb-active-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.xterm-viewport::-webkit-scrollbar-thumb {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|