Skip to content

Commit 60cb94d

Browse files
wizard04wsuwizard04wsu
committed
Reworking the outline stylesheet
- fixing it to match Atom's weird HTML interpretation of the syntax - improving styles at the ends of lines
1 parent a7b8d3a commit 60cb94d

3 files changed

Lines changed: 132 additions & 84 deletions

File tree

‎lib/javascript-regex.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ function toggleConfig(configName){
6363
};
6464

6565
function updateStyleSheet(configName, filename){
66-
console.log(disposableStyleSheets);
6766
disposableStyleSheets[configName]?.dispose();
6867
if(atom.config.get(`${thisPackage.name}.${configName}`)){
6968
let path = `${package.path}/styles/${filename}.less`,
@@ -74,7 +73,6 @@ function updateStyleSheet(configName, filename){
7473
disposableStyleSheets[configName] = void 0;
7574
atom.config.set(`${thisPackage.name}.${configName}`, false);
7675
}
77-
console.log(">>",disposableStyleSheets);
7876
}
7977

8078
module.exports = {
@@ -147,7 +145,7 @@ module.exports = {
147145
}));
148146

149147
// Load the main syntax highlighting stylesheet.
150-
let path = `${package.path}/styles/javascript-regex.less`,
148+
let path = `${package.path}/styles/base.less`,
151149
css = package.themeManager.loadStylesheet(path);
152150
disposableStyleSheets["main"] = package.styleManager.addStyleSheet(css, { sourcePath: path, priority: 1 });
153151

styles/javascript-regex.less renamed to styles/base.less

File renamed without changes.

‎styles/group-outlines.less‎

Lines changed: 131 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,150 @@
11
@import "colors.less";
22

3-
@group-outline-radius: ~"calc(var(--editor-line-height) / 2)";
4-
@group-outline-radius: ~"calc(var(--editor-line-height) * 1em / 2)";
3+
@half-line-height-unit: ~"calc(var(--editor-line-height) / 2)";
4+
@half-line-height-nounit: ~"calc(var(--editor-line-height) * 1em / 2)";
5+
//@line-padding-unit: ~"calc(var(--editor-line-height) - 1em)";
6+
//@line-padding-nounit: ~"calc(var(--editor-line-height) * 1em - 1em)";
7+
@half-line-padding-unit: ~"calc((var(--editor-line-height) - 1em) / 2)";
8+
@half-line-padding-nounit: ~"calc((var(--editor-line-height) * 1em - 1em) / 2)";
9+
@indent-width-unit: ~"calc(0.5em + (var(--editor-line-height) - 1em) / 4)";
10+
@indent-width-nounit: ~"calc(0.5em + (var(--editor-line-height) * 1em - 1em) / 4)";
511

612

7-
.syntax--source.syntax--js .syntax--string.syntax--regexp {
13+
14+
.syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
815

9-
//the pattern
10-
.syntax--meta.syntax--pattern {
16+
//groups (including lookaround assertions)
17+
> .syntax--meta.syntax--group,
18+
:not(.syntax--invalid):not(.syntax--punctuation) > .syntax--meta.syntax--group:first-child,
19+
:not(.syntax--invalid) > :not(.syntax--punctuation):first-child + .syntax--meta.syntax--group,
20+
:not(.syntax--invalid) > :not(.syntax--definition):first-child + .syntax--meta.syntax--group,
21+
:not(.syntax--invalid) > :not(.syntax--group):first-child + .syntax--meta.syntax--group,
22+
:not(.syntax--invalid) > :not(.syntax--begin):first-child + .syntax--meta.syntax--group,
23+
:not(.syntax--invalid) > .syntax--meta.syntax--group:nth-child(n+3) {
24+
background-color: @group-bg;
25+
padding: 1px 0;
26+
position: relative;
27+
//border-radius: @half-line-height-unit;
28+
//border-radius: @half-line-height-nounit;
29+
30+
//lines above and below group content
31+
&::before {
32+
content: "";
33+
position: absolute;
34+
display: block;
35+
border: 1px solid @group-delimiter;
36+
border-width: 1px 0;
37+
inset: -1px @half-line-height-unit;
38+
inset: -1px @half-line-height-nounit;
39+
}
40+
&.syntax--capturing::before {
41+
border-color: @group-delimiter-capturing;
42+
}
1143

12-
//groups (including lookaround assertions)
13-
.syntax--meta.syntax--group {
14-
background-color: @group-bg;
15-
border-radius: @group-outline-radius;
16-
padding: 1px 0;
17-
position: relative;
44+
//delimiters '(' and ')'
45+
.syntax--punctuation.syntax--definition.syntax--group.syntax--begin .syntax--punctuation.syntax--definition.syntax--group.syntax--begin,
46+
.syntax--punctuation.syntax--definition.syntax--group.syntax--end .syntax--punctuation.syntax--definition.syntax--group.syntax--end {
47+
color: transparent; //hide the parenthesis
48+
}
49+
> .syntax--punctuation.syntax--definition.syntax--group,
50+
> .syntax--meta.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
1851

19-
/*&:first-child {
20-
border-top-left-radius: 0;
21-
border-bottom-left-radius: 0;
52+
&.syntax--begin,
53+
&.syntax--end {
54+
display: inline-block;
55+
position: relative;
56+
color: transparent; //hide the parenthesis
2257
}
23-
&:last-child {
24-
border-top-right-radius: 0;
25-
border-bottom-right-radius: 0;
26-
}*/
2758

28-
//lines above and below group content
29-
&.syntax--non-capturing,
30-
&.syntax--assertion {
31-
box-shadow:
32-
0 -6px 0 -5px @group-delimiter,
33-
0 6px 0 -5px @group-delimiter;
59+
&.syntax--begin::before,
60+
&.syntax--end::after {
61+
content: "";
62+
position: absolute;
63+
width: @half-line-height-unit;
64+
width: @half-line-height-nounit;
3465
}
35-
&.syntax--capturing {
66+
67+
&.syntax--begin::before {
68+
inset: 1px auto 2px @half-line-padding-unit;
69+
inset: 1px auto 2px @half-line-padding-nounit;
70+
border-top-left-radius: 100% 50%;
71+
border-bottom-left-radius: 100% 50%;
3672
box-shadow:
37-
0 -6px 0 -5px @group-delimiter-capturing,
38-
0 6px 0 -5px @group-delimiter-capturing;
73+
-1px -1px 0 0 @group-delimiter,
74+
-1px 1px 0 0 @group-delimiter;
75+
border-left: 1px solid @group-delimiter;
3976
}
4077

41-
//delimiters '(' and ')'
42-
> .syntax--punctuation.syntax--definition.syntax--group,
43-
> .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
44-
45-
&.syntax--begin,
46-
&.syntax--end {
47-
display: inline-block;
48-
}
49-
50-
&.syntax--begin::before,
51-
&.syntax--end::after {
52-
content: "";
53-
position: absolute;
54-
width: ~"calc(2 * @{group-outline-radius})";
55-
border-radius: @group-outline-radius;
56-
}
57-
58-
&.syntax--begin::before {
59-
inset: 0 auto 0 3px;
60-
}
61-
62-
&.syntax--end::after {
63-
inset: 0 3px 0 auto;
64-
}
78+
&.syntax--end::after {
79+
inset: 1px @half-line-padding-unit 2px auto;
80+
inset: 1px @half-line-padding-nounit 2px auto;
81+
border-top-right-radius: 100% 50%;
82+
border-bottom-right-radius: 100% 50%;
83+
box-shadow:
84+
1px -1px 0 0 @group-delimiter,
85+
1px 1px 0 0 @group-delimiter;
86+
border-right: 1px solid @group-delimiter;
6587
}
66-
&.syntax--non-capturing > .syntax--punctuation.syntax--definition.syntax--group,
67-
&.syntax--non-capturing > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group,
68-
&.syntax--assertion > .syntax--punctuation.syntax--definition.syntax--group,
69-
&.syntax--assertion > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
70-
71-
&.syntax--begin::before {
72-
box-shadow:
73-
-2px -2px 0 -1px @group-delimiter,
74-
-2px 2px 0 -1px @group-delimiter;
75-
}
76-
77-
&.syntax--end::after {
78-
box-shadow:
79-
2px -2px 0 -1px @group-delimiter,
80-
2px 2px 0 -1px @group-delimiter;
81-
}
88+
}
89+
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group,
90+
> .syntax--meta.syntax--group.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group {
91+
92+
&.syntax--begin::before {
93+
box-shadow:
94+
-1px -1px 0 0 @group-delimiter-capturing,
95+
-1px 1px 0 0 @group-delimiter-capturing;
96+
border-left-color: @group-delimiter-capturing;
8297
}
83-
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group,
84-
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
85-
86-
&.syntax--begin::before {
87-
box-shadow:
88-
-2px -2px 0 -1px @group-delimiter-capturing,
89-
-2px 2px 0 -1px @group-delimiter-capturing;
90-
}
91-
92-
&.syntax--end::after {
93-
box-shadow:
94-
2px -2px 0 -1px @group-delimiter-capturing,
95-
2px 2px 0 -1px @group-delimiter-capturing;
96-
}
98+
99+
&.syntax--end::after {
100+
box-shadow:
101+
1px -1px 0 0 @group-delimiter-capturing,
102+
1px 1px 0 0 @group-delimiter-capturing;
103+
border-right-color: @group-delimiter-capturing;
97104
}
98105
}
99106
}
100107
}
108+
109+
.line > :first-child > .syntax--source.syntax--js:first-child > .syntax--string.syntax--regexp:first-child > .syntax--meta.syntax--pattern:first-child {
110+
111+
> .syntax--meta.syntax--pattern:first-child > .syntax--meta.syntax--group:first-child,
112+
.syntax--meta.syntax--group:first-child {
113+
114+
&::before {
115+
left: @indent-width-unit;
116+
left: @indent-width-nounit;
117+
}
118+
}
119+
:not(:first-child) .syntax--meta.syntax--group:first-child {
120+
121+
&::before {
122+
left: @half-line-height-unit;
123+
left: @half-line-height-nounit;
124+
}
125+
}
126+
}
127+
/*.line > :first-child > .syntax--source.syntax--js:first-child > .syntax--string.syntax--regexp:first-child {
128+
.syntax--meta.syntax--group:first-child {
129+
border-top-left-radius: 0;
130+
border-bottom-left-radius: 0;
131+
}
132+
:not(:first-child) .syntax--meta.syntax--group:first-child {
133+
border-top-right-radius: @line-padding-unit 50%;
134+
border-top-right-radius: @line-padding-nounit 50%;
135+
border-bottom-right-radius: @line-padding-unit 50%;
136+
border-bottom-right-radius: @line-padding-nounit 50%;
137+
}
138+
}
139+
.line > :last-child > .syntax--source.syntax--js:last-child > .syntax--string.syntax--regexp:last-child {
140+
.syntax--meta.syntax--group:last-child {
141+
border-top-right-radius: 0;
142+
border-bottom-right-radius: 0;
143+
}
144+
:not(:last-child) .syntax--meta.syntax--group:last-child {
145+
border-top-left-radius: @line-padding-unit 50%;
146+
border-top-left-radius: @line-padding-nounit 50%;
147+
border-bottom-left-radius: @line-padding-unit 50%;
148+
border-bottom-left-radius: @line-padding-nounit 50%;
149+
}
150+
}*/

0 commit comments

Comments
 (0)