Skip to content
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

Vertical resize on .cm-s-hashi.CodeMirror #12906

Merged
merged 5 commits into from Oct 22, 2021
Merged

Conversation

djvs
Copy link
Contributor

@djvs djvs commented Oct 22, 2021

Allows user to resize JSON editor to be more or less fullscreen. Essential UI fix IMO.

@hashicorp-cla
Copy link

hashicorp-cla commented Oct 22, 2021

CLA assistant check
All committers have signed the CLA.

@djvs
Copy link
Contributor Author

djvs commented Oct 22, 2021

May be more than one .cm-whatever.CodeMirror that this applies for, I don't see one on my end though. Well - in the SCSS, but not in the UI.

@vercel vercel bot temporarily deployed to Preview – vault October 22, 2021 17:02 Inactive
@vercel vercel bot temporarily deployed to Preview – vault-storybook October 22, 2021 17:07 Inactive
@Monkeychip
Copy link
Contributor

@djvs can you provide a screenshot or gif of the change on the UI? I'm trying to reproduce where your scss change is occurring. Thank you!

@djvs
Copy link
Contributor Author

djvs commented Oct 22, 2021

2021-10-22T13:29:29,746613518-04:00

Note the bottom right corner (and larger view height)

@djvs
Copy link
Contributor Author

djvs commented Oct 22, 2021

More-or-less equivalent user style I applied locally via browser extension is just .CodeMirror{ resize: 'vertical'; }. I can make this change if you guys want it globally, I'm not quite sure what different contexts you have CodeMirror spun up in.

@hsimon-hashicorp
Copy link
Contributor

2021-10-22T13:29:29,746613518-04:00

Note the bottom right corner (and larger view height)

I don't have much to add here except a very personal note that I really love the example you used here for the text entry. :)

@Monkeychip
Copy link
Contributor

Monkeychip commented Oct 22, 2021

@djvs thank you for the screenshot. I'm a little confused because in order for me to apply this styling on the Codemirror component, I have to add the resize: vertical to line 53 here, instead of where you have it in ui/app/styles/components/console-ui-panel.scss (which is for the drop-down CLI editor available on the UI - see screenshot below).

image

I'll go ahead and check with design on this. But if you can, go ahead and make the styling change to the file I indicated and test that this still solves your issue.

@vercel vercel bot temporarily deployed to Preview – vault October 22, 2021 20:22 Inactive
@djvs
Copy link
Contributor Author

djvs commented Oct 22, 2021

Whoops - updated.

@Monkeychip
Copy link
Contributor

@djvs thank you for the update. Also, sorry one more change. The changelog file, here is an example of how to do this. This process recently changed, and it's a reminder for me to make sure our Readme is up to date. In the example, you would also put "improvement". Essentially, create a new file with the name of the PR number (e.g. 12906.txt) and put in the changelog file (this is outside of the UI folder).

I got the thumbs up from design. Once the changelog is update, I can approve and merge.

@vercel vercel bot temporarily deployed to Preview – vault October 22, 2021 20:28 Inactive
@Monkeychip Monkeychip added this to the 1.9 milestone Oct 22, 2021
Copy link
Contributor

@Monkeychip Monkeychip left a comment

Choose a reason for hiding this comment

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

Thank you!

@Monkeychip Monkeychip merged commit 0d5d2ce into hashicorp:main Oct 22, 2021
qk4l pushed a commit to qk4l/vault that referenced this pull request Feb 4, 2022
* Vertical resize on .cm-s-hashi.CodeMirror

* changelog

* update other file

* undo other change

* fix
@djvs
Copy link
Contributor Author

djvs commented Mar 1, 2022

By the way this resize grabber is almost invisible on the latest version -
2022-02-28T20:33:01,813636649-05:00

@Monkeychip
Copy link
Contributor

@djvs looking into this a little. It appears this is the standard resize icon for codemirror. I suspect it's a little hard to see because of the black background. Is this the size you are seeing as well? I have been playing around with this and don't see a way to make it any larger.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants