mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix color picker display when updating an environment color (#2711)

Browse Source 
Co-authored-by: Opender Singh <opender94@gmail.com>
This commit is contained in:
Julien Giovaresco 2020-10-27 08:02:49 +01:00 committed by GitHub
parent a511ea5ed9
commit 5852d27d3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js
View File

@ -101,6 +101,7 @@ const SidebarList = SortableContainer(
@autobind @autobind
class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> { class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
environmentEditorRef: ?EnvironmentEditor; environmentEditorRef: ?EnvironmentEditor;
environmentColorInputRef: HTMLInputElement;
colorChangeTimeout: any; colorChangeTimeout: any;
saveTimeout: any; saveTimeout: any;
modal: Modal; modal: Modal;
@ -128,6 +129,10 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
this.environmentEditorRef = n; this.environmentEditorRef = n;
} }
_setInputColorRef(ref: HTMLInputElement | null) {
this.environmentColorInputRef = ref;
}
_setModalRef(n: Modal | null) { _setModalRef(n: Modal | null) {
this.modal = n; this.modal = n;
} }
@ -329,33 +334,19 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
} }
async _handleClickColorChange(environment: Environment) { async _handleClickColorChange(environment: Environment) {
let el = document.querySelector('#env-color-picker');
// Remove existing child so we reset the event handlers. This
// was easier than trying to clean them up later.
if (el && el.parentNode) {
el.parentNode.removeChild(el);
}
el = document.createElement('input');
el.id = 'env-color-picker';
el.type = 'color';
document.body && document.body.appendChild(el);
const color = environment.color || '#7d69cb'; const color = environment.color || '#7d69cb';
if (!environment.color) { if (!environment.color) {
await this._handleChangeEnvironmentColor(environment, color); await this._handleChangeEnvironmentColor(environment, color);
} }
el.setAttribute('value', color); this.environmentColorInputRef?.click();
el.addEventListener('input', (e: Event) => { }
if (e.target instanceof HTMLInputElement) {
this._handleChangeEnvironmentColor(environment, e.target && e.target.value);
}
});
el.click(); _handleInputColorChange(event: SyntheticEvent<HTMLInputElement>) {
this._handleChangeEnvironmentColor(
this._getActiveEnvironment(),
event.target && event.target.value,
);
} }
_saveChanges() { _saveChanges() {
@ -473,6 +464,14 @@ class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
{activeEnvironment && rootEnvironment !== activeEnvironment ? ( {activeEnvironment && rootEnvironment !== activeEnvironment ? (
<React.Fragment> <React.Fragment>
<input
className="hidden"
type="color"
value={activeEnvironment.color}
ref={this._setInputColorRef}
onInput={this._handleInputColorChange}
/>
<Dropdown className="space-right" right> <Dropdown className="space-right" right>
<DropdownButton className="btn btn--clicky"> <DropdownButton className="btn btn--clicky">
{activeEnvironment.color && ( {activeEnvironment.color && (

4
packages/insomnia-app/app/ui/css/layout/base.less
View File

@ -501,6 +501,10 @@ blockquote {
display: none; display: none;
} }
.hidden {
visibility: hidden;
}
.relative { .relative {
position: relative; position: relative;
} }