-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ui: code-editor-styling #11474
ui: code-editor-styling #11474
Changes from 17 commits
7dfbc6e
ba53c6a
f2cfacd
5035cfd
c9444da
363e432
c72b6fc
a662d5f
76ac2a8
e97e76f
614cc51
d241512
8bada55
5f3bee3
bb014ff
bca9ad0
3a3d0ef
b149aff
24c43a2
ed20fb7
f160233
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
```release-note:bug | ||
ui: code editor styling (layout consistency + wide screen support) | ||
``` | ||
```release-note:improvement | ||
ui: added copy to clipboard button in code editor toolbars | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,22 @@ | ||
<Toolbar> | ||
<label class="title"> | ||
{{#if (has-block "title")}} | ||
{{yield to="title"}} | ||
{{/if}} | ||
</label> | ||
<div class="actions"> | ||
{{#if (and (not readonly) (not syntax))}} | ||
<PowerSelect | ||
@onChange={{action "change"}} | ||
@selected={{mode}} | ||
@searchEnabled={{false}} | ||
@options={{modes}} as |mode|> | ||
{{mode.name}} | ||
</PowerSelect> | ||
{{/if}} | ||
<div class="toolbar-separator"></div> | ||
<CopyButton @value={{value}} @name="value" /> | ||
</div> | ||
</Toolbar> | ||
<IvyCodemirror @value={{value}} @name={{name}} @class={{class}} @options={{options}} @valueUpdated={{action onkeyup}} /> | ||
<pre><code>{{yield}}</code></pre> | ||
{{#if (and (not readonly) (not syntax))}} | ||
<PowerSelect | ||
@onChange={{action "change"}} | ||
@selected={{mode}} | ||
@searchEnabled={{false}} | ||
@options={{modes}} as |mode|> | ||
{{mode.name}} | ||
</PowerSelect> | ||
{{/if}} | ||
<pre><code>{{#if (has-block "default")}}{{yield to="default"}}{{else}}{{value}}{{/if}}</code></pre> |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -3,6 +3,7 @@ | |||||
border: 10px; | ||||||
overflow: hidden; | ||||||
position: relative; | ||||||
clear: both; | ||||||
} | ||||||
%code-editor .ember-power-select-trigger { | ||||||
@extend %code-editor-syntax-select; | ||||||
|
@@ -32,3 +33,121 @@ | |||||
%code-editor > pre { | ||||||
display: none; | ||||||
} | ||||||
|
||||||
%code-editor .ember-basic-dropdown-trigger { | ||||||
background-color: var(--tone-gray-900); | ||||||
color: var(--black); | ||||||
border-radius: 2px; | ||||||
border: 1px solid; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not super important but we have some more props for these if you could use those Documentation for all this coming soon! |
||||||
border-color: var(--tone-gray-700); | ||||||
margin: 0 8px; | ||||||
width: 120px; | ||||||
height: 32px; | ||||||
display: flex; | ||||||
align-items: center; | ||||||
flex-direction: row; | ||||||
} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are a few missing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, I noticed but I was getting the wrong colours because of the dark mode I guess so I ended up writing manually (the wrong thing). Also I noticed that there were some inconsistencies in that file already, see
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yup only |
||||||
|
||||||
.toolbar { | ||||||
background-color: rgb(var(--tone-gray-050)); | ||||||
border: 1px solid rgb(var(--tone-gray-100)); | ||||||
border-bottom-color: rgb(var(--tone-gray-600)); | ||||||
border-top-color: rgb(var(--tone-gray-400)); | ||||||
position: relative; | ||||||
margin-top: 4px; | ||||||
|
||||||
&::after { | ||||||
background: linear-gradient(to right, rgb(var(--tone-gray-600)), rgba(var(--tone-gray-600), 0)); | ||||||
bottom: 0; | ||||||
content: ''; | ||||||
position: absolute; | ||||||
right: 0; | ||||||
top: 0; | ||||||
width: 4px; | ||||||
z-index: 2; | ||||||
} | ||||||
|
||||||
.input, | ||||||
.select { | ||||||
min-width: 190px; | ||||||
} | ||||||
} | ||||||
|
||||||
.toolbar-label { | ||||||
padding: 8px; | ||||||
color: rgb(var(--tone-gray-800)); | ||||||
} | ||||||
|
||||||
.toolbar-scroller { | ||||||
align-items: center; | ||||||
display: flex; | ||||||
height: 44px; | ||||||
justify-content: space-between; | ||||||
overflow-x: auto; | ||||||
width: 100%; | ||||||
|
||||||
&::-webkit-scrollbar { | ||||||
border-bottom: 1px solid rgb(var(--tone-gray-400)); | ||||||
height: 4px; | ||||||
} | ||||||
|
||||||
&::-webkit-scrollbar-thumb { | ||||||
background: rgb(var(--tone-gray-400)); | ||||||
border-radius: 4px; | ||||||
} | ||||||
} | ||||||
|
||||||
.toolbar-filters, | ||||||
.toolbar-actions { | ||||||
align-items: center; | ||||||
display: flex; | ||||||
flex: 1; | ||||||
white-space: nowrap; | ||||||
justify-content: space-between; | ||||||
|
||||||
.title { | ||||||
color: rgb(var(--tone-gray-900)); | ||||||
display: inline-block; | ||||||
font-size: 14px; | ||||||
font-weight: 700; | ||||||
padding: 0 8px; | ||||||
} | ||||||
.actions { | ||||||
display: flex; | ||||||
flex-direction: row; | ||||||
margin: 0 10px; | ||||||
align-items: center; | ||||||
|
||||||
.copy-button { | ||||||
margin-left: 10px; | ||||||
} | ||||||
} | ||||||
} | ||||||
|
||||||
.toolbar-link { | ||||||
border: 0; | ||||||
color: var(--black); | ||||||
transition: background-color 150ms; | ||||||
|
||||||
&:hover { | ||||||
background-color: rgb(var(--tone-gray-050)); | ||||||
border: 0; | ||||||
color: rgb(var(--tone-blue-500)); | ||||||
} | ||||||
|
||||||
&:active { | ||||||
box-shadow: none; | ||||||
} | ||||||
|
||||||
&.popup-menu-trigger { | ||||||
height: 2.5rem; | ||||||
padding: 0.5rem 0.857rem; | ||||||
} | ||||||
} | ||||||
|
||||||
.toolbar-separator { | ||||||
border-right: 1px solid rgb(var(--tone-gray-300)); | ||||||
height: 32px; | ||||||
margin: 0 4px; | ||||||
width: 0; | ||||||
} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Feels like there a lot here, so I'm gonna take a deeper look, so up to you if you want to make changes now or wait til then. but generally:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree and I like the splitting, right, since I am going to refactor the Toolbar anyway now that I know how to do it ;) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds great 👍 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,7 +24,7 @@ $syntax-dark-gray: #535f73; | |
--syntax-yellow: rgb(var(--tone-yellow-500)); | ||
} | ||
.CodeMirror { | ||
max-width: 1150px; | ||
max-width: 1260px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh dear 😆 it was just this 🤣 . Surprising nobody has tweaked this before now 🤔 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know, right? It happens, it's always a single line of code that is holding things together or that breaks everything :) |
||
min-height: 300px; | ||
height: auto; | ||
/* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */ | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<nav class="toolbar"> | ||
<nav class="toolbar-actions"> | ||
<div class="toolbar-scroller"> | ||
{{yield}} | ||
</div> | ||
</nav> | ||
</nav> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. afaik There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I stole this from Vault and I played ignorantly to be honest but yeah, it is especially weird because we have nested nav too. I'll change that. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you use
--tone-gray-000
for this please? (instead of --black)All of the
--tone
s are themeable--tone-gray-000
is black (in light mode) and--tone-gray-999
is white. We have this "quick dark mode" thing which just reverses the gray tones (so 000 = white and 999 = black), which gets us almost to dark mode or high contrast mode really easily.So glad you did it like this though (but I'd like you to change) as it means I know I need to add this to our color docs 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I must be using the dark mode because
comes from this:
I just pushed this specific change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh sorry wrote that wrong 🤦 its the other way around. Have a look here https://github.com/hashicorp/consul/blob/main/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss#L1