Skip to content
This repository was archived by the owner on Jul 30, 2025. It is now read-only.

Commit b73e002

Browse files
committed
fix(plugins/plugin-client-common): improvements to hover and click behavior for block action buttons
- improved hover effect (stop using mix-blend-mode) - restore function of "two face icon" so that checkmark is now visible upon click - in notebook replay mode, use gray color for already-rerun blocks part of #7971
1 parent f568494 commit b73e002

File tree

6 files changed

+26
-22
lines changed

6 files changed

+26
-22
lines changed

plugins/plugin-client-common/src/components/Views/Terminal/Block/Actions.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Tab, i18n, isOfflineClient, isReadOnlyClient } from '@kui-shell/core'
2020
import { InputOptions } from './Input'
2121
import { SupportedIcon } from '../../../spi/Icons'
2222
import TwoFaceIcon from '../../../spi/Icons/TwoFaceIcon'
23-
import BlockModel, { hasUUID, isOutputOnly, isReplay, isRerunable } from './BlockModel'
23+
import BlockModel, { hasUUID, isOutputOnly, isReplay, isRerunable, hasBeenRerun } from './BlockModel'
2424

2525
const strings = i18n('plugin-client-common')
2626

@@ -49,6 +49,13 @@ function Action(props: { onClick: (evt: React.SyntheticEvent) => void; icon: Sup
4949
}
5050

5151
export default class Actions extends React.PureComponent<Props> {
52+
private readonly _rerunHandler = () => {
53+
if (hasUUID(this.props.model)) {
54+
this.props.tab.REPL.reexec(this.props.command, { execUUID: this.props.model.execUUID })
55+
this.props.willUpdateExecutable()
56+
}
57+
}
58+
5259
private rerunAction(icon: 'Play' | 'Retry') {
5360
if (
5461
hasUUID(this.props.model) &&
@@ -57,17 +64,10 @@ export default class Actions extends React.PureComponent<Props> {
5764
this.props.tab &&
5865
this.props.command
5966
) {
60-
const handler = () => {
61-
if (hasUUID(this.props.model)) {
62-
this.props.tab.REPL.reexec(this.props.command, { execUUID: this.props.model.execUUID })
63-
this.props.willUpdateExecutable()
64-
}
65-
}
66-
6767
return (
6868
<Action
6969
icon={icon}
70-
onClick={handler}
70+
onClick={this._rerunHandler}
7171
title={strings(icon === 'Retry' ? 'Re-execute this command' : 'Execute this command')}
7272
/>
7373
)
@@ -150,7 +150,11 @@ export default class Actions extends React.PureComponent<Props> {
150150

151151
if (isReplay(this.props.model)) {
152152
if (this.props.isExecutable && !this.props.isSectionBreak) {
153-
return <div className="kui--block-actions-buttons">{this.rerunAction('Play')}</div>
153+
return (
154+
<div className="kui--block-actions-buttons" data-has-been-rerun={hasBeenRerun(this.props.model) || undefined}>
155+
{this.rerunAction('Play')}
156+
</div>
157+
)
154158
}
155159
} else if (!isOfflineClient()) {
156160
return (

plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -724,11 +724,9 @@ export default class Input extends InputProvider {
724724
const replayed = isReplay(this.props.model)
725725
const completed = this.props.model.startTime && isWithCompleteEvent(this.props.model)
726726
const showingDate = !replayed && completed && !this.props.isWidthConstrained
727-
const duration =
728-
!replayed &&
729-
isWithCompleteEvent(this.props.model) &&
730-
this.props.model.completeEvent.completeTime &&
731-
prettyPrintDuration(this.props.model.completeEvent.completeTime - this.props.model.startTime)
727+
728+
const now = isWithCompleteEvent(this.props.model) ? this.props.model.completeEvent.completeTime : Date.now()
729+
const duration = !replayed && now && prettyPrintDuration(Math.max(0, now - this.props.model.startTime))
732730
const noParen = !showingDate || !duration
733731
const openParen = noParen ? '' : '('
734732
const closeParen = noParen ? '' : ')'

plugins/plugin-client-common/src/components/Views/Terminal/Block/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ export default class Block extends React.PureComponent<Props, State> {
164164
if (isFinished(this.props.model) || isProcessing(this.props.model)) {
165165
return (
166166
<Output
167+
key={isEmpty(this.props.model) ? undefined : this.props.model.execUUID}
167168
uuid={this.props.uuid}
168169
tab={this.props.tab}
169170
idx={this.props.idx}

plugins/plugin-client-common/src/test/editor/edit-remove-block.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ describe(`remove command output verify editor content is preserved ${process.env
5656

5757
it('should open editor and type something', async () => {
5858
try {
59-
res2 = await CLI.command(`edit "${filepath}"}`, this.app).then(SidecarExpect.open)
59+
res2 = await CLI.command(`edit "${filepath}"`, this.app).then(SidecarExpect.open)
6060

6161
await setValue(res2, typeThis)
6262
await expectText(res2, typeThis)

plugins/plugin-client-common/web/scss/components/Terminal/Block.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,7 @@
204204
}
205205

206206
.kui--block-action:hover {
207-
background-color: var(--color-table-border2);
208-
mix-blend-mode: difference;
207+
background-color: var(--color-base02);
209208
}
210209

211210
.repl-input,

plugins/plugin-client-common/web/scss/components/Terminal/Notebook.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,16 @@ $input-padding: 1em;
4646
@include BlockActions {
4747
position: unset;
4848
background-color: transparent;
49+
50+
&[data-has-been-rerun] {
51+
@include BlockAction {
52+
color: var(--color-gray);
53+
}
54+
}
4955
}
5056
@include BlockAction {
5157
font-size: 1.375em;
5258
color: var(--color-green);
53-
54-
&:hover {
55-
filter: brightness(1.25);
56-
}
5759
}
5860
}
5961
}

0 commit comments

Comments
 (0)