rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent save status overflow from changing width of editor pane

Browse Source
This commit is contained in:
Mo
2022-02-18 11:46:54 -06:00
parent e9f2dc691d
commit d12eebe883
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/components/NoteView/NoteView.tsx
View File

@@ -1055,21 +1055,23 @@ export class NoteView extends PureComponent<Props, State> {
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div id="save-status"> <div id="save-status-container">
<div <div id="save-status">
className={ <div
(this.state.syncTakingTooLong className={
? 'warning sk-bold ' (this.state.syncTakingTooLong
: '') + ? 'warning sk-bold '
(this.state.saveError ? 'danger sk-bold ' : '') + : '') +
' message' (this.state.saveError ? 'danger sk-bold ' : '') +
} ' message'
> }
{this.state.noteStatus?.message} >
{this.state.noteStatus?.message}
</div>
{this.state.noteStatus?.desc && (
<div className="desc">{this.state.noteStatus.desc}</div>
)}
</div> </div>
{this.state.noteStatus?.desc && (
<div className="desc">{this.state.noteStatus.desc}</div>
)}
</div> </div>
<div className="mr-3"> <div className="mr-3">
<ChangeEditorButton <ChangeEditorButton

11
app/assets/stylesheets/_editor.scss
View File

@@ -64,17 +64,22 @@ $heading-height: 75px;
} }
} }
#save-status { #save-status-container {
position: relative;
min-width: 15ch;
max-width: 15ch;
overflow: visible;
margin-right: 20px; margin-right: 20px;
}
#save-status {
font-size: calc(var(--sn-stylekit-base-font-size) - 2px); font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
text-transform: none; text-transform: none;
font-weight: normal; font-weight: normal;
text-align: right; text-align: right;
white-space: nowrap;
.desc, .desc,
.message:not(.warning):not(.danger) { .message:not(.warning):not(.danger) {
// color: var(--sn-stylekit-editor-foreground-color);
opacity: 0.35; opacity: 0.35;
} }
} }