From f33bbed8a3824ffc57128ba04bd736a57d09ab99 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 11:24:25 +0200 Subject: [PATCH 1/6] Make wavy underline markings smaller --- .../components/annotations/annotation_marker.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts index 8032b97f68..dbc38fd181 100644 --- a/app/assets/javascripts/components/annotations/annotation_marker.ts +++ b/app/assets/javascripts/components/annotations/annotation_marker.ts @@ -34,13 +34,16 @@ export class AnnotationMarker extends LitElement { static getStyle(annotation: Annotation): string { if (["error", "warning", "info"].includes(annotation.type)) { - // shorthand notation does not work in safari + const strokeWidth = annotation.isHovered ? 1.7 : 0.7; + // -webkit is required for chrome return ` - text-decoration-line: underline; - text-decoration-color: ${AnnotationMarker.colors[annotation.type]}; - text-decoration-thickness: ${annotation.isHovered ? 2 : 1}px; - text-decoration-style: wavy; - text-decoration-skip-ink: none; + -webkit-mask-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E'); + mask-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E'); + -webkit-mask-position: left bottom; + mask-position: left bottom; + -webkit-mask-repeat: repeat-x; + mask-repeat: repeat-x; + background-color: ${AnnotationMarker.colors[annotation.type]}; `; } else { const key = annotation.isHovered ? `${annotation.type}-intense` : annotation.type; From 92a1ce35517165f3ff925a998c2ee28fd67ed982 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 15:38:21 +0200 Subject: [PATCH 2/6] Improve speed --- .../annotations/annotation_marker.ts | 68 ++++++++++--------- app/assets/stylesheets/base.css.scss | 2 +- .../components/code_listing.css.scss | 3 - app/assets/stylesheets/mixins.css.scss | 10 +++ .../stylesheets/theme/m3-theme-dark.css.scss | 9 +++ .../stylesheets/theme/m3-theme-light.css.scss | 8 +++ 6 files changed, 63 insertions(+), 37 deletions(-) diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts index dbc38fd181..cefec1f81d 100644 --- a/app/assets/javascripts/components/annotations/annotation_marker.ts +++ b/app/assets/javascripts/components/annotations/annotation_marker.ts @@ -1,5 +1,5 @@ import { customElement, property } from "lit/decorators.js"; -import { html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult, CSSResultGroup, unsafeCSS } from "lit"; import { Annotation, compareAnnotationOrders, @@ -22,37 +22,44 @@ export class AnnotationMarker extends LitElement { state = new StateController(this); + static get styles(): CSSResultGroup { + // order matters here, the last defined class determines the color if multiple apply + const machineClasses = [unsafeCSS`info`, unsafeCSS`warning`, unsafeCSS`error`]; + const userClasses = [unsafeCSS`annotation`, unsafeCSS`question`]; + return [ + ...machineClasses.map(x => css` + .${x} { + background-image: var(--d-annotation-${x}-background); + background-position: left bottom; + background-repeat: repeat-x; + } + .${x}-intense { + background-image: var(--d-annotation-${x}-background-intense); + background-position: left bottom; + background-repeat: repeat-x; + } + `), + ...userClasses.map(x => css` + .${x} { background-color: var(--${x}-color)} + .${x}-intense {background-color: var(--${x}-intense-color)} + `), + ]; + } + + static getClass(annotation: Annotation): string { + return annotation.isHovered ? `${annotation.type}-intense` : annotation.type; + } + static colors = { - "error": "var(--error-color, red)", - "warning": "var(--warning-color, yellow)", - "info": "var(--info-color, blue)", + "error": "var(--d-annotation-error, red)", + "warning": "var(--d-annotation-warning, yellow)", + "info": "var(--d-annotation-info, blue)", "annotation": "var(--annotation-color, green)", "question": "var(--question-color, orange)", "annotation-intense": "var(--annotation-intense-color, green)", "question-intense": "var(--question-intense-color, orange)", }; - static getStyle(annotation: Annotation): string { - if (["error", "warning", "info"].includes(annotation.type)) { - const strokeWidth = annotation.isHovered ? 1.7 : 0.7; - // -webkit is required for chrome - return ` - -webkit-mask-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E'); - mask-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E'); - -webkit-mask-position: left bottom; - mask-position: left bottom; - -webkit-mask-repeat: repeat-x; - mask-repeat: repeat-x; - background-color: ${AnnotationMarker.colors[annotation.type]}; - `; - } else { - const key = annotation.isHovered ? `${annotation.type}-intense` : annotation.type; - return ` - background: ${AnnotationMarker.colors[key]}; - `; - } - } - /** * Returns the annotations sorted in order of importance. * Hovered annotations are prioritized over non-hovered annotations. @@ -82,16 +89,11 @@ export class AnnotationMarker extends LitElement { `; } - get annotationStyles(): string { - return this.sortedAnnotations.reverse().map(a => AnnotationMarker.getStyle(a)).join(" "); + get annotationClasses(): string { + return this.annotations.map(a => AnnotationMarker.getClass(a)).join(" "); } render(): TemplateResult { - return html`${this.machineAnnotationMarkerSVG}`; + return html`${this.machineAnnotationMarkerSVG}`; } } diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index a6a822661b..4bd3144e4f 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/app/assets/stylesheets/base.css.scss @@ -2,10 +2,10 @@ @import "../../../node_modules/bootstrap/scss/functions"; // 2. Include any default variable overrides here +@import "mixins.css.scss"; @import "theme/m3-theme-light.css.scss"; @import "theme/m3-theme-dark.css.scss"; @import "bootstrap_variable_overrides.css.scss"; -@import "mixins.css.scss"; @import "theme/rouge.css.scss"; @import "theme/ace.css.scss"; diff --git a/app/assets/stylesheets/components/code_listing.css.scss b/app/assets/stylesheets/components/code_listing.css.scss index f7b3b27d00..aa63b57535 100644 --- a/app/assets/stylesheets/components/code_listing.css.scss +++ b/app/assets/stylesheets/components/code_listing.css.scss @@ -527,9 +527,6 @@ d-annotation-marker, d-selection-marker { - --info-color: var(--d-annotation-info); - --warning-color: var(--d-annotation-warning); - --error-color: var(--d-annotation-error); --question-color: var(--d-annotation-question-background); --annotation-color: var(--d-annotation-user-background); --question-intense-color: var(--d-annotation-question-background-intense); diff --git a/app/assets/stylesheets/mixins.css.scss b/app/assets/stylesheets/mixins.css.scss index dd58029260..c150a79812 100644 --- a/app/assets/stylesheets/mixins.css.scss +++ b/app/assets/stylesheets/mixins.css.scss @@ -1,3 +1,6 @@ +@use "sass:string"; +@use "sass:color"; + @mixin shadow-z0 { box-shadow: none; } @@ -27,3 +30,10 @@ 0 16px 24px 2px rgba(0, 0, 0, 0.098), 0 6px 30px 5px rgba(0, 0, 0, 0.084); } + +// sets the variable equal to the url of a wavy svg with the specified color and stroke-width +@mixin wavy-underline($variable, $color, $stroke-width) { + // this is a custom wavy svg that can be used as a background image + // the color is slightly hacked to get a proper url encode version of the color + #{$variable}: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23#{string.slice(color.ie-hex-str($color), 4)}%22%20fill%3D%22none%22%20stroke-width%3D%22#{$stroke-width}%22%2F%3E'); +} diff --git a/app/assets/stylesheets/theme/m3-theme-dark.css.scss b/app/assets/stylesheets/theme/m3-theme-dark.css.scss index 40bdba365a..188adb066b 100644 --- a/app/assets/stylesheets/theme/m3-theme-dark.css.scss +++ b/app/assets/stylesheets/theme/m3-theme-dark.css.scss @@ -202,6 +202,15 @@ --d-annotation-user-background: #{color.mix($success-70, $neutral-25, 8%)}; --d-annotation-question-background-intense: #{color.mix($purple-80, $neutral-25, 20%)}; --d-annotation-user-background-intense: #{color.mix($success-70, $neutral-25, 20%)}; + --d-annotation-info-background: url('data:image/svg+xml;utf8,'); + + + @include wavy-underline(--d-annotation-warning-background, $warning-80, 0.7); + @include wavy-underline(--d-annotation-warning-background-intense, $warning-80, 1.7); + @include wavy-underline(--d-annotation-error-background, $danger-80, 0.7); + @include wavy-underline(--d-annotation-error-background-intense, $danger-80, 1.7); + @include wavy-underline(--d-annotation-info-background, $info-80, 0.7); + @include wavy-underline(--d-annotation-info-background-intense, $info-80, 1.7); .image-bright { // $gray-90 converted to filter using https://codepen.io/sosuke/pen/Pjoqqp diff --git a/app/assets/stylesheets/theme/m3-theme-light.css.scss b/app/assets/stylesheets/theme/m3-theme-light.css.scss index 69ecbc3ab2..583c789aff 100644 --- a/app/assets/stylesheets/theme/m3-theme-light.css.scss +++ b/app/assets/stylesheets/theme/m3-theme-light.css.scss @@ -3,6 +3,7 @@ @use "sass:color"; @import "theme/m3-theme.css.scss"; +@import "mixins.css.scss"; :root, [data-bs-theme="light"] { @@ -217,6 +218,13 @@ --d-annotation-question-background-intense: #{color.mix($purple-40, $neutral-98, 20%)}; --d-annotation-user-background-intense: #{color.mix($success-60, $neutral-98, 20%)}; + @include wavy-underline(--d-annotation-warning-background, $warning-70, 0.7); + @include wavy-underline(--d-annotation-warning-background-intense, $warning-70, 1.7); + @include wavy-underline(--d-annotation-error-background, $danger-60, 0.7); + @include wavy-underline(--d-annotation-error-background-intense, $danger-60, 1.7); + @include wavy-underline(--d-annotation-info-background, $info-40, 0.7); + @include wavy-underline(--d-annotation-info-background-intense, $info-40, 1.7); + .image-bright { // $gray-10 converted to filter using https://codepen.io/sosuke/pen/Pjoqqp filter: invert(8%) sepia(10%) saturate(679%) hue-rotate(201deg) brightness(93%) contrast(92%); From 56158c56a3498f45578c9df19e7eae2da4d9e8f8 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 15:43:34 +0200 Subject: [PATCH 3/6] Fix full width annotations --- .../components/annotations/annotation_marker.ts | 10 +++++++++- .../javascripts/components/annotations/line_of_code.ts | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts index cefec1f81d..7216376b8d 100644 --- a/app/assets/javascripts/components/annotations/annotation_marker.ts +++ b/app/assets/javascripts/components/annotations/annotation_marker.ts @@ -19,6 +19,8 @@ import { StateController } from "state/state_system/StateController"; export class AnnotationMarker extends LitElement { @property({ type: Array }) annotations: Annotation[]; + @property({ type: Boolean, attribute: "full-width" }) + fullWidth = false; state = new StateController(this); @@ -43,6 +45,12 @@ export class AnnotationMarker extends LitElement { .${x} { background-color: var(--${x}-color)} .${x}-intense {background-color: var(--${x}-intense-color)} `), + css` + .full-width { + display: block; + width: 100%; + } + ` ]; } @@ -94,6 +102,6 @@ export class AnnotationMarker extends LitElement { } render(): TemplateResult { - return html`${this.machineAnnotationMarkerSVG}`; + return html`${this.machineAnnotationMarkerSVG}`; } } diff --git a/app/assets/javascripts/components/annotations/line_of_code.ts b/app/assets/javascripts/components/annotations/line_of_code.ts index ceb4bdbb96..a3751eb12d 100644 --- a/app/assets/javascripts/components/annotations/line_of_code.ts +++ b/app/assets/javascripts/components/annotations/line_of_code.ts @@ -168,7 +168,7 @@ export class LineOfCode extends ShadowlessLitElement { return html`
${ this.fullLineAnnotations.length > 0 ? html` - + 
${backgroundLayer}
` : html` 
${backgroundLayer}
From 656aef59c151e2c4c0f71cb0044f575800450443 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 15:44:32 +0200 Subject: [PATCH 4/6] Remove unused line' --- app/assets/stylesheets/theme/m3-theme-dark.css.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/stylesheets/theme/m3-theme-dark.css.scss b/app/assets/stylesheets/theme/m3-theme-dark.css.scss index 188adb066b..428ac0cb3f 100644 --- a/app/assets/stylesheets/theme/m3-theme-dark.css.scss +++ b/app/assets/stylesheets/theme/m3-theme-dark.css.scss @@ -202,8 +202,6 @@ --d-annotation-user-background: #{color.mix($success-70, $neutral-25, 8%)}; --d-annotation-question-background-intense: #{color.mix($purple-80, $neutral-25, 20%)}; --d-annotation-user-background-intense: #{color.mix($success-70, $neutral-25, 20%)}; - --d-annotation-info-background: url('data:image/svg+xml;utf8,'); - @include wavy-underline(--d-annotation-warning-background, $warning-80, 0.7); @include wavy-underline(--d-annotation-warning-background-intense, $warning-80, 1.7); From a02148786c1a3e8ea0c4d4eebe697a345541c686 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 16:46:44 +0200 Subject: [PATCH 5/6] Make css explicit --- .../annotations/annotation_marker.ts | 45 ++++++++----------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts index 7216376b8d..460f4e06f5 100644 --- a/app/assets/javascripts/components/annotations/annotation_marker.ts +++ b/app/assets/javascripts/components/annotations/annotation_marker.ts @@ -1,5 +1,5 @@ import { customElement, property } from "lit/decorators.js"; -import { css, html, LitElement, TemplateResult, CSSResultGroup, unsafeCSS } from "lit"; +import { css, html, LitElement, TemplateResult, CSSResultGroup } from "lit"; import { Annotation, compareAnnotationOrders, @@ -26,32 +26,23 @@ export class AnnotationMarker extends LitElement { static get styles(): CSSResultGroup { // order matters here, the last defined class determines the color if multiple apply - const machineClasses = [unsafeCSS`info`, unsafeCSS`warning`, unsafeCSS`error`]; - const userClasses = [unsafeCSS`annotation`, unsafeCSS`question`]; - return [ - ...machineClasses.map(x => css` - .${x} { - background-image: var(--d-annotation-${x}-background); - background-position: left bottom; - background-repeat: repeat-x; - } - .${x}-intense { - background-image: var(--d-annotation-${x}-background-intense); - background-position: left bottom; - background-repeat: repeat-x; - } - `), - ...userClasses.map(x => css` - .${x} { background-color: var(--${x}-color)} - .${x}-intense {background-color: var(--${x}-intense-color)} - `), - css` - .full-width { - display: block; - width: 100%; - } - ` - ]; + return css` + .info, .warning, .error, + .info-intense, .warning-intense, .error-intense { + background-position: left bottom; + background-repeat: repeat-x; + } + .info { background-image: var(--d-annotation-info-background) } + .warning { background-image: var(--d-annotation-warning-background) } + .error { background-image: var(--d-annotation-error-background) } + .info-intense { background-image: var(--d-annotation-info-background-intense) } + .warning-intense { background-image: var(--d-annotation-warning-background-intense) } + .error-intense { background-image: var(--d-annotation-error-background-intense) } + .annotation { background-color: var(--annotation-color) } + .question { background-color: var(--question-color) } + .annotation-intense { background-color: var(--annotation-intense-color) } + .question-intense { background-color: var(--question-intense-color) } + `; } static getClass(annotation: Annotation): string { From 15320467fe968dc031de80c142fb592bd163e524 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 20 Sep 2023 16:47:26 +0200 Subject: [PATCH 6/6] Use corect danger color --- app/assets/stylesheets/theme/m3-theme-dark.css.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/theme/m3-theme-dark.css.scss b/app/assets/stylesheets/theme/m3-theme-dark.css.scss index 428ac0cb3f..2b40af3e8b 100644 --- a/app/assets/stylesheets/theme/m3-theme-dark.css.scss +++ b/app/assets/stylesheets/theme/m3-theme-dark.css.scss @@ -205,8 +205,8 @@ @include wavy-underline(--d-annotation-warning-background, $warning-80, 0.7); @include wavy-underline(--d-annotation-warning-background-intense, $warning-80, 1.7); - @include wavy-underline(--d-annotation-error-background, $danger-80, 0.7); - @include wavy-underline(--d-annotation-error-background-intense, $danger-80, 1.7); + @include wavy-underline(--d-annotation-error-background, $danger-70, 0.7); + @include wavy-underline(--d-annotation-error-background-intense, $danger-70, 1.7); @include wavy-underline(--d-annotation-info-background, $info-80, 0.7); @include wavy-underline(--d-annotation-info-background-intense, $info-80, 1.7);