Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Adding interfaces to change font size, font family, and line height. #8305

Closed
MiguelCastillo wants to merge 13 commits into from
Closed

Adding interfaces to change font size, font family, and line height. #8305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
97d00ef
Adding interfaces to change font size, font family, and line height.
MiguelCastillo Jul 3, 2014
2e72136
Adding more display inline blocks so that line height renders correctly
MiguelCastillo Jul 3, 2014
57e33ad
Renamed fontSizeStyle preference to fontSize
MiguelCastillo Jul 3, 2014
4e463ec
Changed line height values to be floats instead of strings with units…
MiguelCastillo Jul 3, 2014
1b358c9
Refactored fonts manager to handle different permutations of opening/…
MiguelCastillo Jul 4, 2014
a84f934
added/removed a few empty lines to give the code a little breathing room
MiguelCastillo Jul 4, 2014
395dd1e
Removed preference change listeners. We should be using the API
MiguelCastillo Jul 4, 2014
0650b83
Adding init function to ensure values are loaded when appReady is called
MiguelCastillo Jul 8, 2014
09650b2
Added a more specific css rule for line height settings to avoid conf…
MiguelCastillo Jul 8, 2014
24177a0
Removed stale variables and jslint definitions
MiguelCastillo Jul 8, 2014
bad3395
Removed stale code in favor of initializing the font when the app is …
MiguelCastillo Jul 8, 2014
c464845
Removing em unit from line height DOM element
MiguelCastillo Jul 8, 2014
cd99a46
Merge master
MiguelCastillo Jul 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 98 additions & 88 deletions src/styles/brackets_codemirror_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,108 +76,118 @@
}


span.cm-keyword {color: @accent-keyword;}
span.cm-atom {color: @accent-atom;}
span.cm-number {color: @accent-number;}
span.cm-def {color: @accent-def;}
span.cm-variable {color: @accent-variable;}
span.cm-variable-2 {color: @accent-variable-2;}
span.cm-variable-3 {color: @accent-variable-3;}
span.cm-property {color: @accent-property;}
span.cm-operator {color: @accent-operator;}
span.cm-comment {color: @accent-comment;}
span.cm-string {color: @accent-string;}
span.cm-string-2 {color: @accent-string-2;}
span.cm-meta {color: @accent-meta;}
span.cm-error {color: @accent-error;}
span.cm-qualifier {color: @accent-qualifier;}
span.cm-builtin {color: @accent-builtin;}
span.cm-bracket {color: @accent-bracket;}
span.cm-tag {color: @accent-tag;}
span.cm-attribute {color: @accent-attribute;}
span.cm-header {color: @accent-header;}
span.cm-quote {color: @accent-quote;}
span.cm-hr {color: @accent-hr;}
span.cm-link {color: @accent-link; text-decoration: none;}
span.cm-rangeinfo {color: @accent-rangeinfo;}
span.cm-minus {color: @accent-minus;}
span.cm-plus {color: @accent-plus;}
span.cm-keyword {color: @accent-keyword;}
span.cm-atom {color: @accent-atom;}
span.cm-number {color: @accent-number;}
span.cm-def {color: @accent-def;}
span.cm-variable {color: @accent-variable;}
span.cm-variable-2 {color: @accent-variable-2;}
span.cm-variable-3 {color: @accent-variable-3;}
span.cm-property {color: @accent-property;}
span.cm-operator {color: @accent-operator;}
span.cm-comment {color: @accent-comment;}
span.cm-string {color: @accent-string;}
span.cm-string-2 {color: @accent-string-2;}
span.cm-meta {color: @accent-meta;}
span.cm-error {color: @accent-error;}
span.cm-qualifier {color: @accent-qualifier;}
span.cm-builtin {color: @accent-builtin;}
span.cm-bracket {color: @accent-bracket;}
span.cm-tag {color: @accent-tag;}
span.cm-attribute {color: @accent-attribute;}
span.cm-header {color: @accent-header;}
span.cm-quote {color: @accent-quote;}
span.cm-hr {color: @accent-hr;}
span.cm-link {color: @accent-link; text-decoration: none;}
span.cm-rangeinfo {color: @accent-rangeinfo;}
span.cm-minus {color: @accent-minus;}
span.cm-plus {color: @accent-plus;}

span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @matching-bracket;}
span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @matching-bracket;}
span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}
.CodeMirror-cursors {
.CodeMirror-cursor {
.code-cursor();
}

.CodeMirror-cursors {
.CodeMirror-cursor {
.code-cursor();
/* Ensure the cursor shows up in front of code spans with a background color
* (e.g. matchingbracket).
*/
z-index: 3;
}

/* Ensure the cursor shows up in front of code spans with a background color
* (e.g. matchingbracket).
*/
z-index: 3;
}

.CodeMirror-lines {
padding: @code-padding 0;

/* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
* that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
* occur on different elements, which means a click event will not be sent. By disabling pointer events here,
* we are guaranteed that the mouse event will be captured by our parent div, and click events will
* be dispatched.
*/
pointer-events: none;
}

.CodeMirror-linewidget {
/* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
* parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
pointer-events: auto;
}
.CodeMirror-lines {
padding: @code-padding 0;

/* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
* that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
* occur on different elements, which means a click event will not be sent. By disabling pointer events here,
* we are guaranteed that the mouse event will be captured by our parent div, and click events will
* be dispatched.
*/
pointer-events: none;
}

.CodeMirror-gutters {
background-color: @background-color-3;
border-right: none;
}
/**
* These classes are set to inline-block because they are spans and they need block dimension properties when
* when calculation height and width.
*/
.CodeMirror-searching,
.CodeMirror-matchingtag,
.CodeMirror-matchingbracket {
display: inline-block;
}
Copy link
Copy Markdown
Member

@peterflynn peterflynn Jul 14, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this required now when it wasn't before? I'm unsure what about making font size configurable would change something about this...

Copy link
Copy Markdown
Contributor Author

@MiguelCastillo MiguelCastillo Jul 14, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, when line height is changed some items like those don't properly scale because they are spans. To quickly test this behavior, try increasing the line height in the current themes to something like 1.8 and place the cursor on a matching bracket. Or select a word and press CMD+F to find matching search.


.platform-mac {
.CodeMirror-scrollbar-filler {
background-image: url(images/scrollbar-mac-corner.png);
.CodeMirror-linewidget {
/* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
* parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
pointer-events: auto;
}
.CodeMirror-gutter-filler {
background-image: url(images/scrollbar-mac-bg.png);

.CodeMirror-gutters {
background-color: @background-color-3;
border-right: none;
}
}
.platform-win {
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: @win-scrollbar-track;
height: 12px !important;

.platform-mac {
.CodeMirror-scrollbar-filler {
background-image: url(images/scrollbar-mac-corner.png);
}
.CodeMirror-gutter-filler {
background-image: url(images/scrollbar-mac-bg.png);
}
}
.CodeMirror-scrollbar-filler {
width: 12px !important;
.platform-win {
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: @win-scrollbar-track;
height: 12px !important;
}
.CodeMirror-scrollbar-filler {
width: 12px !important;
}
}
}
.platform-linux {
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: @background-color-3;
height: 12px !important;
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: @background-color-3;
height: 12px !important;
}
.CodeMirror-scrollbar-filler {
width: 12px !important;
}
}
.CodeMirror-scrollbar-filler {
width: 12px !important;

.CodeMirror-linenumber {
color: @accent-comment;
min-width: 2.5em;
/*font-size: 0.9em;*/ /* restore after SourceCodePro font fix? */
padding: 0 @code-padding 0 10px; /* left padding for project panel selection triangle */
}
}

.CodeMirror-linenumber {
color: @accent-comment;
min-width: 2.5em;
/*font-size: 0.9em;*/ /* restore after SourceCodePro font fix? */
padding: 0 @code-padding 0 10px; /* left padding for project panel selection triangle */
}
.CodeMirror-focused .CodeMirror-selected {
background: @selection-color-focused;
}
background: @selection-color-focused;
}

/*
CodeMirror's use of descendant selectors for certain styling causes problems when editors are
Expand Down
Loading
⚡