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

truncate labels (#544)

Browse Source
This commit is contained in:
Red J Adaya 2024-04-04 00:55:36 +08:00 committed by GitHub
parent a139633375
commit 9de25e4869
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 137 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/workspace/screen/screenview.less
View File

@ -159,134 +159,3 @@
}
}
}
.newtab-container {
margin: 8px 16px 0 16px;
.newtab-section {
display: flex;
padding: 10px 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
&.conn-section {
gap: 8px;
}
}
.cr-help-text {
color: var(--screen-view-text-caption-color);
margin-left: 5px;
}
.newtab-spacer {
height: 1px;
background: var(--app-border-color);
}
.control-iconlist {
display: flex;
margin-left: -2px;
padding: 8px 0 8px 2px;
align-items: flex-start;
gap: 14px;
&.tabicon-list {
gap: 12px;
}
.icondiv {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
font-size: 14px;
&.tabicon {
display: flex;
align-items: center;
width: 22px;
}
.icon {
width: 20px;
height: 20px;
}
i {
padding-left: 3px;
padding-right: 3px;
}
.icon.square-icon {
position: relative;
top: 3px;
width: 16px;
height: 16px;
}
.check-icon {
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
path {
fill: black;
}
}
.status-div {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 3px;
svg.status-icon {
width: 10px;
height: 10px;
}
}
.add-div {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
svg.add-icon {
width: 16px;
height: 16px;
path {
fill: var(--app-text-primary-color);
}
}
}
.text-standard {
color: var(--app-text-secondary-color);
}
.ellipsis {
text-overflow: ellipsis;
}
&:hover {
background-color: rgba(241, 246, 243, 0.08);
}
.icon.color-white + .check-icon {
path {
fill: black;
}
}
}
}
}

135
src/app/workspace/workspace.less
View File

@ -53,3 +53,138 @@
}
}
}
.newtab-container {
margin: 8px 16px 0 16px;
.newtab-section {
display: flex;
padding: 10px 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
.truncate {
max-width: 100%;
}
&.conn-section {
gap: 8px;
}
}
.cr-help-text {
color: var(--screen-view-text-caption-color);
margin-left: 5px;
}
.newtab-spacer {
height: 1px;
background: var(--app-border-color);
}
.control-iconlist {
display: flex;
margin-left: -2px;
padding: 8px 0 8px 2px;
align-items: flex-start;
gap: 14px;
&.tabicon-list {
gap: 12px;
}
.icondiv {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
font-size: 14px;
&.tabicon {
display: flex;
align-items: center;
width: 22px;
}
.icon {
width: 20px;
height: 20px;
}
i {
padding-left: 3px;
padding-right: 3px;
}
.icon.square-icon {
position: relative;
top: 3px;
width: 16px;
height: 16px;
}
.check-icon {
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
path {
fill: black;
}
}
.status-div {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 3px;
svg.status-icon {
width: 10px;
height: 10px;
}
}
.add-div {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
svg.add-icon {
width: 16px;
height: 16px;
path {
fill: var(--app-text-primary-color);
}
}
}
.text-standard {
color: var(--app-text-secondary-color);
}
.ellipsis {
text-overflow: ellipsis;
}
&:hover {
background-color: rgba(241, 246, 243, 0.08);
}
.icon.color-white + .check-icon {
path {
fill: black;
}
}
}
}
}

4
src/app/workspace/workspaceview.tsx
View File

@ -162,13 +162,13 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
</div>
<div className="newtab-spacer" />
<div className="newtab-section conn-section">
<div className="unselectable">
<div className="unselectable truncate">
You're connected to "{getRemoteStrWithAlias(rptr)}". Do you want to change it?
</div>
<div>
<TabRemoteSelector screen={screen} errorMessage={this.errorMessage} />
</div>
<div className="text-caption cr-help-text">
<div className="text-caption cr-help-text truncate">
To change connection from the command line use `cr [alias|user@host]`
</div>
</div>