Skip to content
This repository was archived by the owner on Mar 8, 2020. It is now read-only.

Surround codemirror with div (with padding) to simulate required spacing #1692

Merged
merged 3 commits into from
Jul 28, 2017
Merged

Surround codemirror with div (with padding) to simulate required spacing #1692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd6bbeb
Surround <codemirror/> with a ".scrollbar-padding" class that simulat…
Jul 28, 2017
35a9b8d
Merge branch 'master' into 1503-scroll-overshoot
cazfletch Jul 28, 2017
80d03c8
Merge branch 'master' into 1503-scroll-overshoot
Jul 28, 2017
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
7 changes: 0 additions & 7 deletions packages/composer-playground/src/app/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,3 @@ app {
border: 1px solid darkgray;
font-size: 14px;
}

.CodeMirror,
.CodeMirror-scroll {
min-height: 450px;
max-height: 450px;
}

6 changes: 4 additions & 2 deletions packages/composer-playground/src/app/editor/editor-file/editor-file.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<perfect-scrollbar class="readme" *ngIf="editorType === 'readme' && _previewReadmeActive" [innerHTML]="previewContent">
</perfect-scrollbar>

<codemirror id="editor-file_CodeMirror" debounce name="editorCodeMirror" *ngIf="editorType === 'code' || !_previewReadmeActive" [(ngModel)]="editorContent"
<div class="scrollbar-padding" *ngIf="editorType === 'code' || !_previewReadmeActive">
<codemirror id="editor-file_CodeMirror" debounce name="editorCodeMirror" [(ngModel)]="editorContent"
[config]="(editorType === 'readme') ? mdCodeConfig : codeConfig" (debounceFunc)="onCodeChanged()" [delay]="700" width="100%" height="100%" ngDefaultControl>
</codemirror>
</codemirror>
</div>

<div class="alert-area" role="alert" *ngIf="editorType !== 'readme' && currentError">
<svg class="ibm-icon" aria-hidden="true">
Expand Down
22 changes: 18 additions & 4 deletions packages/composer-playground/src/app/editor/editor-file/editor-file.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,28 @@ editor-file {
// }
}

.CodeMirror {
font-family: Source Code Pro
.scrollbar-padding {
// emulating the ".cm-s-default.CodeMirror" styling to mimic the editor having padding around the scroll bar
border-radius: 4px;
background: #262A35;
color: #FFFFFF;
padding: $space-medium $space-medium $space-medium 0px;
.CodeMirror-simplescroll-vertical {
margin: 0px;
}
.CodeMirror-lines {
margin-top: 0px;
}
}

.CodeMirror {
font-family: Source Code Pro;
}

.CodeMirror, .CodeMirror-scroll {
min-height: 63vh;
max-height: 63vh;
// account for the padding introduced by the '.scrollbar-padding' class
min-height: calc(63vh - #{2*$space-medium});
max-height: calc(63vh - #{2*$space-medium});
}

.ps.ps--active-x>.ps__scrollbar-x-rail,
Expand Down
9 changes: 2 additions & 7 deletions packages/composer-playground/src/app/editor/editor.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ app-editor {
.side-bar-nav {
padding: 0;
max-height: 60vh;
overflow-y: scroll;
overflow-y: auto;
.error {
color: $first-warning;
}
Expand Down Expand Up @@ -150,13 +150,8 @@ app-editor {
}

.CodeMirror {
font-family: Source Code Pro

font-family: Source Code Pro;
}
.CodeMirror, .CodeMirror-scroll{
min-height:63vh;
max-height:63vh;
}

.ps.ps--active-x>.ps__scrollbar-x-rail,
.ps.ps--active-y>.ps__scrollbar-y-rail{
Expand Down
10 changes: 6 additions & 4 deletions packages/composer-playground/src/app/test/resource/resource.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ <h2>In registry: <b>{{registryID}}</b></h2>
<div>
<p class="resource-preview-text">JSON Data Preview</p>
</div>
<codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig"
(ngModelChange)="onDefinitionChanged()"
width="100%" height="100%" ngDefaultControl>
</codemirror>
<div class="scrollbar-padding">
<codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig"
(ngModelChange)="onDefinitionChanged()"
width="100%" height="100%" ngDefaultControl>
</codemirror>
</div>
<div>
<label>Optional Properties
<input type="checkbox" name="include-optional" value="true"
Expand Down
4 changes: 2 additions & 2 deletions packages/composer-playground/src/app/test/resource/resource.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ resource-modal {
}

.CodeMirror, .CodeMirror-scroll {
min-height: 400px;
max-height: 400px;
min-height: 300px;
max-height: 300px;
// needed to get rid of the duplicate scroll bars, not sure why this works????
min-width: 630px;
max-width: 650px;
Expand Down