diff --git a/gradle/changelog/focus_line_contrast.yml b/gradle/changelog/focus_line_contrast.yml new file mode 100644 index 0000000000..5968ac4e09 --- /dev/null +++ b/gradle/changelog/focus_line_contrast.yml @@ -0,0 +1,2 @@ +- type: fixed + description: Improve visibility of focused line in source view ([#2031](https://github.com/scm-manager/scm-manager/pull/2031)) diff --git a/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx b/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx index 66e6b0cb4e..a0795e212f 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx +++ b/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx @@ -34,10 +34,10 @@ const RowContainer = styled.div` .linenumber { display: inline-block; min-width: 3em; - padding-right: 1em; + padding-right: 0.75em; text-align: right; user-select: none; - color: rgb(154, 154, 154); + color: var(--scm-secondary-text); } span.linenumber:hover { cursor: pointer; @@ -45,9 +45,12 @@ const RowContainer = styled.div` span.linenumber + span > span.linenumber { display: none !important; } + &.focused > span.linenumber { + box-shadow: inset -3px 0 0 var(--scm-sh-focus-line-contrast); + } &.focused, &.focused > span:last-child { - background-color: rgb(229, 245, 252); + background: var(--scm-sh-focus-line-background); } i { visibility: hidden; @@ -62,6 +65,9 @@ const RowContainer = styled.div` .section { padding: 0; } + & > span:last-child { + margin-left: 0.75em; + } `; type CreateLinePermaLinkFn = (lineNumber: number) => string; diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 74e2f04aff..d9953f55d8 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -4641,7 +4641,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
package com.example;
import java.io.IOException;
import java.io.OutputStream;
import java.net.InetSocketAddress;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;
public class Test {
public static void main(String[] args) throws Exception {
HttpServer server = HttpServer.create(new InetSocketAddress(8000), 0);
server.createContext("/test", new MyHandler());
server.setExecutor(null); // creates a default executor
server.start();
}
static class MyHandler implements HttpHandler {
@Override
public void handle(HttpExchange t) throws IOException {
String response = "This is the response";
t.sendResponseHeaders(200, response.length());
OutputStream os = t.getResponseBody();
os.write(response.getBytes());
os.close();
}
}
} diff --git a/scm-ui/ui-styles/src/dark.scss b/scm-ui/ui-styles/src/dark.scss index 1b49ed1a33..1fae461050 100644 --- a/scm-ui/ui-styles/src/dark.scss +++ b/scm-ui/ui-styles/src/dark.scss @@ -195,6 +195,8 @@ $danger-25: scale-color($danger, $lightness: -75%); --scm-secondary-text: #{$white}; --scm-hover-color: #{$grey}; --scm-column-selection: #{$link-dark}; + --scm-sh-focus-line-background: hsl(0, 0%, 18%); + --scm-sh-focus-line-contrast: hsl(0, 0%, 60%); --sh-base-color: #{$white}; --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss index 8917ad3df6..530706d4d0 100644 --- a/scm-ui/ui-styles/src/highcontrast.scss +++ b/scm-ui/ui-styles/src/highcontrast.scss @@ -93,6 +93,8 @@ $tooltip-color: $scheme-main; --scm-secondary-text: #{$white}; --scm-hover-color: #{$grey}; --scm-column-selection: #{$link-dark}; + --scm-sh-focus-line-background: hsl(0, 0%, 10%); + --scm-sh-focus-line-contrast: hsl(0, 0%, 60%); --sh-base-color: #fff; --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss index bd8216735e..fe662578bb 100644 --- a/scm-ui/ui-styles/src/light.scss +++ b/scm-ui/ui-styles/src/light.scss @@ -58,6 +58,8 @@ $popover-background-color: $grey-light; --scm-secondary-text: #{$black}; --scm-hover-color: #{$black-ter}; --scm-column-selection: #{$link-25}; + --scm-sh-focus-line-background: hsl(0, 0%, 95%); + --scm-sh-focus-line-contrast: hsl(0, 0%, 70%); --sh-base-color: #363636; --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;