Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-01 05:51:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

[theme] style find/replace widget

Browse Source
This commit is contained in:
Martin Aeschlimann
2017-03-23 22:44:36 +01:00
parent f9f849155b
commit 4eebba084d
8 changed files with 126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/vs/base/browser/ui/checkbox/checkbox.css
View File

@@ -33,22 +33,6 @@
opacity: 1;
}
.custom-checkbox:hover {
background-color: #EEE;
}
.custom-checkbox.checked {
border-color: #007ACC;
}
.vs-dark .custom-checkbox:hover {
background-color: #292929;
}
.vs-dark .custom-checkbox.checked {
border-color: #007ACC;
}
.hc-black .custom-checkbox {
background: none;
border: none;
@@ -56,8 +40,4 @@
.hc-black .custom-checkbox:hover {
background: none;
}
.hc-black .custom-checkbox.checked {
border: 1px solid #f38518;
}

31
src/vs/base/browser/ui/checkbox/checkbox.ts
View File

@@ -8,11 +8,13 @@
import 'vs/css!./checkbox';
import DOM = require('vs/base/browser/dom');
import * as objects from 'vs/base/common/objects';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Widget } from 'vs/base/browser/ui/widget';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Color } from "vs/base/common/color";
export interface ICheckboxOpts {
export interface ICheckboxOpts extends ICheckboxStyles {
actionClassName: string;
title: string;
isChecked: boolean;
@@ -20,6 +22,14 @@ export interface ICheckboxOpts {
onKeyDown?: (e: IKeyboardEvent) => void;
}
export interface ICheckboxStyles {
checkedBorderColor?: Color;
}
const defaultOpts = {
checkedBorderColor: Color.fromHex('#007ACC')
};
export class Checkbox extends Widget {
private _opts: ICheckboxOpts;
@@ -29,7 +39,8 @@ export class Checkbox extends Widget {
constructor(opts: ICheckboxOpts) {
super();
this._opts = opts;
this._opts = objects.clone(opts);
objects.mixin(this._opts, defaultOpts);
this._checked = this._opts.isChecked;
this.domNode = document.createElement('div');
@@ -40,6 +51,8 @@ export class Checkbox extends Widget {
this.domNode.setAttribute('aria-checked', String(this._checked));
this.domNode.setAttribute('aria-label', this._opts.title);
this._applyStyles();
this.onclick(this.domNode, (ev) => {
this.checked = !this._checked;
this._opts.onChange(false);
@@ -72,6 +85,7 @@ export class Checkbox extends Widget {
this._checked = newIsChecked;
this.domNode.setAttribute('aria-checked', String(this._checked));
this.domNode.className = this._className();
this._applyStyles();
}
private _className(): string {
@@ -82,6 +96,19 @@ export class Checkbox extends Widget {
return 2 /*marginleft*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
}
public style(styles: ICheckboxStyles) {
if (styles.checkedBorderColor) {
this._opts.checkedBorderColor = styles.checkedBorderColor;
}
this._applyStyles();
}
protected _applyStyles() {
if (this.domNode) {
this.domNode.style.borderColor = this._checked ? this._opts.checkedBorderColor.toString() : null;
}
}
public enable(): void {
this.domNode.tabIndex = 0;
this.domNode.setAttribute('aria-disabled', String(false));