Skip to content

Commit

Permalink
fix(Editor): QUV-1868 - Minor Code styles have been improved (#34)
Browse files Browse the repository at this point in the history 
* QUV-1868: Code style improvements

* QUV-1868: lint errors have been fixed.
  • Loading branch information
@jguede
jguede authored Nov 16, 2023
1 parent f906c65 commit e06c387
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 37 deletions.
57 changes: 38 additions & 19 deletions .../code/src/components/DiffEditor/components/InternalDiffEditor/StyledInternalDiffEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ export interface StyledInternalDiffEditorProps
export const StyledInternalDiffEditor = styled(
StyledInternalEditor,
)<StyledInternalDiffEditorProps>`
${({ theme, originalEditable, readOnly, bordered }) => css`
${({ bordered, originalEditable, readOnly, theme }) => css`
--border-radius: ${theme.alias.fields.shape.borderRadius};
--inner-border-radius: calc(var(--border-radius) - 1px);
--inner-border-radius: calc(var(--border-radius) -0.1rem);
.monaco-diff-editor.side-by-side {
${bordered && 'border-radius: var(--border-radius);'}
// Left side of the diff editor
.editor.original {
box-shadow: none;
${!originalEditable &&
!readOnly &&
css`
Expand All @@ -31,45 +31,64 @@ export const StyledInternalDiffEditor = styled(
.readonly};
}
`}
.overflow-guard {
.monaco-editor {
${bordered &&
css`
// -1 fills the gap between the internal border and external border
border-radius: var(--inner-border-radius) 0px 0px
border-radius: var(--inner-border-radius) 0 0
var(--inner-border-radius);
.overflow-guard {
border-radius: var(--inner-border-radius) 0 0
var(--inner-border-radius);
.lines-content.monaco-editor-background {
.view-overlays .line-delete {
left: calc(-1 * var(--line-numbers-spacing)) !important;
}
}
}
`}
}
}
// Right side of the diff editor
.editor.modified {
box-shadow: none;
border-left-width: ${theme.alias.fields.shape.borderSize.base};
border-left-style: solid;
border-left-color: ${readOnly
? theme.alias.fields.color.background.base.readonly
: theme.alias.fields.color.border.base.enabled};
border-left-color: ${theme.alias.fields.color.border.base.enabled};
.scrollbar {
right: 1px !important;
right: 0.1rem !important;
}
.overflow-guard {
${bordered &&
css`
// -1 fills the gap between the internal border and external border
border-radius: 0px var(--inner-border-radius)
var(--inner-border-radius) 0px;
`}
.monaco-editor {
border-radius: 0;
.overflow-guard {
border-radius: 0;
.lines-content.monaco-editor-background {
.view-overlays .line-insert {
left: calc(-1 * var(--line-numbers-spacing)) !important;
}
}
}
}
}
// Difference area
.diffOverview {
border-left-width: ${theme.alias.fields.shape.borderSize.base};
border-left-style: solid;
border-left-color: ${theme.alias.fields.color.border.base.enabled};
background-color: ${theme.alias.color.background.feedback.neutral
.weaker};
// Hide diff viewport slider but keep the area clickable
.diffViewport {
opacity: 0 !important;
}
Expand Down
36 changes: 18 additions & 18 deletions packages/code/src/components/Editor/components/InternalEditor/StyledInternalEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,50 +26,56 @@ export const StyledInternalEditor = styled.div<StyledInternalEditorProps>`
--read-only-bg-color: ${theme.alias.fields.color.background.base.readonly};
--border-radius: ${theme.alias.fields.shape.borderRadius};
--line-numbers-spacing: ${theme.alias.space.cmp.xs};
--scrollbar-size: ${theme.alias.scrollbars.size.square.md};
// Default - Smart Editor - Style
height: ${$height};
width: ${$width};
.monaco-editor {
// Readonly - Smart Editor -Style
${readOnly &&
`.monaco-editor-background {
background-color: var(--read-only-bg-color);
}`}
// Bordered - Smart Editor -Style
${bordered &&
css`
border-radius: var(--border-radius);
`}
.overflow-guard {
${bordered &&
css`
// -1 fills the gap between the internal border and external border
// -1 fills the gap between the internal border and external border
border-radius: calc(var(--border-radius) - 1px);
`}
}
// Base font color. Applies to non tokenized text - Smart Editor - Style
.mtk1 {
color: ${theme.alias.color.text.body.stronger};
}
// Cannot edit on read-only mode - Smart Editor - Style
// overflowingContentWidgets className
.monaco-editor-overlaymessage {
.message {
font-size: ${theme.alias.typo.fontSize.body.sm};
font-family: ${theme.alias.typo.fontFamily.body.fontFaceName};
background-color: ${theme.alias.color.background.surface.base
.base} !important;
color: ${theme.alias.color.text.body.stronger};
border-color: ${theme.alias.color.border.elevation
.activated} !important;
box-shadow: ${theme.alias.elevation.boxShadow.depth.activated};
border-radius: ${theme.alias.shape.borderRadius.elevated};
border-color: ${theme.alias.color.border.elevation
.activated} !important;
padding: ${theme.alias.space.cmp.xs} ${theme.alias.space.cmp.sm};
background-color: ${theme.alias.color.background.surface.base
.base} !important;
font-size: ${theme.alias.typo.fontSize.body.sm};
font-family: ${theme.alias.typo.fontFamily.body.fontFaceName};
color: ${theme.alias.color.text.body.stronger};
}
.anchor {
Expand Down Expand Up @@ -101,12 +107,8 @@ export const StyledInternalEditor = styled.div<StyledInternalEditorProps>`
margin-left: calc(-1 * var(--line-numbers-spacing));
}
`}
// Scrollbar - Smart Editor - Style
.monaco-scrollable-element {
--scrollbar-size: ${theme.alias.scrollbars.size.square.md};
.scrollbar {
background-color: ${theme.alias.scrollbars.track.color.backdrop};
Expand Down Expand Up @@ -150,17 +152,15 @@ export const StyledInternalEditor = styled.div<StyledInternalEditorProps>`
// Minimap - Smart Editor - Style
.minimap {
transform: translateX(-${theme.alias.scrollbars.size.square.md});
transform: translateX(0.6rem);
}
// Decorations overview ruler - Smart Editor - Style
.decorationsOverviewRuler {
width: var(--scrollbar-size) !important;
border-left: ${minimap &&
`1px solid ${theme.alias.color.border.separator.base.weak}`};
transform: translateX(
-${theme.alias.scrollbars.size.square.md}
) !important; // Need to override inline style
}
}
`}
Expand Down

0 comments on commit e06c387

Please sign in to comment.