Skip to content

Add border to search results and fix layout #6957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 1, 2023
Merged

Add border to search results and fix layout #6957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 1 addition & 140 deletions lib/components/style-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,149 +3,10 @@ import {StyleSheetProps} from '../hyper';

export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
render() {
const {backgroundColor, fontFamily, foregroundColor, borderColor} = this.props;
const {borderColor} = this.props;

return (
<style jsx global>{`
.xterm {
font-family: ${fontFamily};
font-feature-settings: 'liga' 0;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
outline: none;
}

.xterm .xterm-helpers {
position: absolute;
top: 0;
/**
* The z-index of the helpers must be higher than the canvases in order for
* IMEs to appear on top.
*/
z-index: 10;
}

.xterm .xterm-helper-textarea {
/*
* HACK: to fix IE's blinking cursor
* Move textarea out of the screen to the far left, so that the cursor is not visible.
*/
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -10;
/** Prevent wrapping so the IME appears against the textarea at the correct position */
white-space: nowrap;
overflow: hidden;
resize: none;
}

.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: ${backgroundColor};
color: ${foregroundColor};
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
}

.xterm .composition-view.active {
display: block;
}

.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: ${backgroundColor};
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}

.xterm .xterm-screen {
position: relative;
}

.xterm canvas {
position: absolute;
left: 0;
top: 0;
}

.xterm .xterm-scroll-area {
visibility: hidden;
}

.xterm .xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
left: -9999em;
}

.xterm {
cursor: text;
}

.xterm.enable-mouse-events {
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
cursor: default;
}

.xterm.xterm-cursor-pointer {
cursor: pointer;
}

.xterm.xterm-cursor-crosshair {
/* Column selection mode */
cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 100;
color: transparent;
}

.xterm .xterm-accessibility-tree:focus [id^='xterm-active-item-'] {
outline: 1px solid #f80;
}

.xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}

.xterm .xterm-decoration-overview-ruler {
position: absolute;
z-index: 10;
right: 0px;
top: unset;
left: unset;
pointer-events: none;
}

::-webkit-scrollbar {
width: 5px;
}
Expand Down
5 changes: 4 additions & 1 deletion lib/components/term.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import _SearchBox from './searchBox';
import {TermProps} from '../hyper';
import {ObjectTypedKeys} from '../utils/object';
import {decorate} from '../utils/plugins';
import 'xterm/css/xterm.css';

const SearchBox = decorate(_SearchBox, 'SearchBox');

Expand Down Expand Up @@ -136,7 +137,9 @@ export default class Term extends React.PureComponent<
this.searchDecorations = {
activeMatchColorOverviewRuler: Color(this.props.cursorColor).hex(),
matchOverviewRuler: Color(this.props.borderColor).hex(),
activeMatchBackground: Color(this.props.cursorColor).hex()
activeMatchBackground: Color(this.props.cursorColor).hex(),
activeMatchBorder: Color(this.props.cursorColor).hex(),
matchBorder: Color(this.props.cursorColor).hex()
};
}

Expand Down