github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Console] Finishing design touches (#217887)

Browse source 
Fixes https://github.com/elastic/kibana/issues/200195

## Summary

This PR adds the following small design improvements:

### 1. Ensures that the bottom border of the selection doesn't overlap
with the next line by shifting the border up.

Before:
<img width="1118" alt="Screenshot 2025-04-10 at 17 50 35"
src="https://github.com/user-attachments/assets/085aa499-7842-4bcf-ba97-49706b58c9ad"
/>


Now:
<img width="1124" alt="Screenshot 2025-04-10 at 17 51 05"
src="https://github.com/user-attachments/assets/37f2a6ca-3c0b-4a00-b1cd-117334feb480"
/>

We also increase the line height a little to ensure that the action
panel box fits inside a single-line request selection box:


<img width="1136" alt="Screenshot 2025-04-10 at 18 00 07"
src="https://github.com/user-attachments/assets/3f618049-d5d0-46c4-8d1b-5098a00985f5"
/>




### 2. Ensures that the left border of the selection doesn't overlap
with the line numbers by shifting the border to the right.

Before:
<img width="740" alt="Screenshot 2025-04-10 at 17 49 30"
src="https://github.com/user-attachments/assets/184599c3-d5e8-40b4-b8f4-a2f40caa2c92"
/>


Now:
<img width="652" alt="Screenshot 2025-04-10 at 17 50 01"
src="https://github.com/user-attachments/assets/edacd4aa-9478-4d1a-8217-d6d1181e452d"
/>


### 3. Increases the contrast between the selected text and the
selection blue box by increasing the transparency of the blue selection
box:


Before:
<img width="735" alt="Screenshot 2025-04-10 at 17 51 43"
src="https://github.com/user-attachments/assets/95ff61d9-f4ef-4db9-b3d5-4ed8a64cc792"
/>

Now:
<img width="1124" alt="Screenshot 2025-04-10 at 17 51 14"
src="https://github.com/user-attachments/assets/9b80c3a7-a053-49df-bfd2-f00b7765b545"
/>

---------

Co-authored-by: Matthew Kime <matt@mattki.me>
This commit is contained in:
Elena Stoeva 2025-04-15 10:08:32 +01:00 • committed by GitHub
parent d5bceb79d0
commit 4cf7c3c5b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 6 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor.tsx
View file

@ -222,6 +222,7 @@ export const MonacoEditor = ({ localStorageValue, value, setValue }: EditorProps
hover: {
above: false,
},
lineHeight: 24,
}}
suggestionProvider={suggestionProvider}
enableFindAction={true}

1
src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor_output.tsx
View file

@ -193,6 +193,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
theme: CONSOLE_OUTPUT_THEME_ID,
automaticLayout: true,
lineHeight: 24,
}}
/>
</div>

6
src/platform/plugins/shared/console/public/styles/_app.scss
View file

@ -121,10 +121,10 @@
content: '';
position: absolute;
top: 0;
bottom: -$euiSize * .3;
left: -$euiSize * 3;
bottom: -$euiSize * .1;
left: -$euiSize * .5;
right: 0;
background: transparentize($euiColorPrimary, .9);
background: transparentize($euiColorPrimary, .95);
border: $euiBorderThin;
border-color: $euiColorPrimary;
pointer-events: none; /* Ensures the pseudo-element doesn't block interactions */

2
x-pack/test_serverless/functional/test_suites/common/console/console.ts
View file

@ -30,7 +30,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await retry.try(async () => {
const actualRequest = await PageObjects.console.getEditorText();
log.debug(actualRequest);
expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
expect(DEFAULT_INPUT_VALUE.replace(/\s/g, '')).to.contain(actualRequest.replace(/\s/g, ''));
});
});