mirror of
https://github.com/mathuo/dockview
synced 2025-03-09 23:42:05 +00:00
improved theming
This commit is contained in:
Matthew O'Connor
parent
75c677996e
commit
e18c28856e
@ -14,7 +14,7 @@
|
||||
|
||||
##
|
||||
|
||||
A zero dependency layout manager based on the layering of split-view components with ReactJS support. View the live demo [here](https://mathuo.github.io/dockview/). Automatically generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html);
|
||||
A zero dependency layout manager based on the layering of split-view components with ReactJS support. View the live demo [here](https://mathuo.github.io/dockview/). Automatically generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
|
||||
|
||||
## Installation
|
||||
You can install the project from [npm](https://www.npmjs.com/package/dockview). The project comes with TypeScript typings.
|
||||
@ -31,6 +31,12 @@ You must import the core css stylesheet but you are free to supply your own them
|
||||
dockview/dist/styles.css
|
||||
```
|
||||
|
||||
By default the seperator between panels is `transparent` but this can be set through the CSS varibable `--separator-border`. Alternatively, or if you require the `DockviewComponent` you should attach the classname of an included theme; either `dockview-theme-dark` or `dockview-theme-light`.
|
||||
|
||||
|
||||
### Online examples
|
||||
[Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
|
||||
|
||||
## React
|
||||
|
||||
### Splitview
|
||||
|
||||
@ -3,4 +3,6 @@ import * as ReactDOM from 'react-dom';
|
||||
import './index.scss';
|
||||
import { Application } from './layout-grid/application';
|
||||
|
||||
document.getElementById('app').classList.add('dockview-theme-darks');
|
||||
|
||||
ReactDOM.render(<Application />, document.getElementById('app'));
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
##
|
||||
|
||||
A zero dependency layout manager based on the layering of split-view components with ReactJS support. View the live demo [here](https://mathuo.github.io/dockview/). Automatically generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html);
|
||||
A zero dependency layout manager based on the layering of split-view components with ReactJS support. View the live demo [here](https://mathuo.github.io/dockview/). Automatically generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
|
||||
|
||||
## Installation
|
||||
You can install the project from [npm](https://www.npmjs.com/package/dockview). The project comes with TypeScript typings.
|
||||
@ -31,6 +31,12 @@ You must import the core css stylesheet but you are free to supply your own them
|
||||
dockview/dist/styles.css
|
||||
```
|
||||
|
||||
By default the seperator between panels is `transparent` but this can be set through the CSS varibable `--separator-border`. Alternatively, or if you require the `DockviewComponent` you should attach the classname of an included theme; either `dockview-theme-dark` or `dockview-theme-light`.
|
||||
|
||||
|
||||
### Online examples
|
||||
[Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
|
||||
|
||||
## React
|
||||
|
||||
### Splitview
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
.tab {
|
||||
// padding-left: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.dragged {
|
||||
transform: translate3d(
|
||||
0px,
|
||||
0px,
|
||||
0px
|
||||
); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
.tab-action {
|
||||
background-color: var(--active-group-visible-panel-color);
|
||||
|
||||
@ -84,26 +84,8 @@ export class Tab extends CompositeDisposable implements ITab {
|
||||
id: this.accessor.id,
|
||||
};
|
||||
|
||||
// set up a custom ghost image
|
||||
const dragImage = this._element.cloneNode(true) as HTMLElement;
|
||||
|
||||
const box = this._element.getBoundingClientRect();
|
||||
|
||||
// if the style of the tab is determined by CSS by a parent element that style will lost
|
||||
// therefore we must explicility re-add the style features that we know will be lost
|
||||
dragImage.style.height = `${box.height}px`;
|
||||
dragImage.style.width = `${box.width}px`;
|
||||
dragImage.style.position = 'absolute';
|
||||
dragImage.classList.add('dragging');
|
||||
|
||||
document.body.appendChild(dragImage);
|
||||
event.dataTransfer.setDragImage(
|
||||
dragImage,
|
||||
event.offsetX,
|
||||
event.offsetY
|
||||
);
|
||||
setTimeout(() => document.body.removeChild(dragImage), 0);
|
||||
// configure the data-transfer object
|
||||
this.element.classList.add('dragged');
|
||||
setTimeout(() => this.element.classList.remove('dragged'), 0);
|
||||
|
||||
const data = JSON.stringify({
|
||||
type: DragType.ITEM,
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
&:not(:first-child) {
|
||||
.pane > .pane-header {
|
||||
border-top: 1px solid rgba(204, 204, 204, 0.2);
|
||||
border-top: 1px solid var(--paneview-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
:root {
|
||||
//
|
||||
@mixin dockview-theme-core-mixin {
|
||||
--dockview-accent-color: dodgerblue;
|
||||
--title-font-size: 13px;
|
||||
--title-height: 35px;
|
||||
--tab-close-icon: url('https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg');
|
||||
--tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
|
||||
--drag-over-background-color: rgba(83, 89, 93, 0.5);
|
||||
--title-bar-scroll-bar-color: #888;
|
||||
}
|
||||
|
||||
@mixin dockview-theme-dark-mixin {
|
||||
@include dockview-theme-core-mixin();
|
||||
//
|
||||
--group-view-background-color: #1e1e1e;
|
||||
//
|
||||
--title-bar-background-color: #252526;
|
||||
--title-bar-scroll-bar-color: #888;
|
||||
//
|
||||
--active-tab-background-visible: #1e1e1e;
|
||||
--active-tab-background-hidden: #2d2d2d;
|
||||
@ -13,23 +21,48 @@
|
||||
--inactive-tab-background-hidden: #2d2d2d;
|
||||
--tab-divider-color: #1e1e1e;
|
||||
//
|
||||
--drag-over-background-color: rgba(83, 89, 93, 0.5);
|
||||
//
|
||||
--active-group-visible-panel-color: white;
|
||||
--active-group-hidden-panel-color: #969696;
|
||||
--inactive-group-visible-panel-color: #8f8f8f;
|
||||
--inactive-group-hidden-panel-color: #626262;
|
||||
//
|
||||
--tab-close-icon: url('https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg');
|
||||
--tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
|
||||
//
|
||||
--separator-border: rgb(68, 68, 68);
|
||||
|
||||
--title-font-size: 13px;
|
||||
--title-height: 35px;
|
||||
--paneview-border-color: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
|
||||
.visual-studio-theme {
|
||||
@mixin dockview-theme-light-mixin {
|
||||
@include dockview-theme-core-mixin();
|
||||
//
|
||||
--group-view-background-color: white;
|
||||
//
|
||||
--title-bar-background-color: #f3f3f3;
|
||||
//
|
||||
--active-tab-background-visible: white;
|
||||
--active-tab-background-hidden: #ececec;
|
||||
--inactive-tab-background-visible: white;
|
||||
--inactive-tab-background-hidden: #ececec;
|
||||
--tab-divider-color: white;
|
||||
//
|
||||
--active-group-visible-panel-color: rgb(51, 51, 51);
|
||||
--active-group-hidden-panel-color: rgba(51, 51, 51, 0.7);
|
||||
--inactive-group-visible-panel-color: rgba(51, 51, 51, 0.7);
|
||||
--inactive-group-hidden-panel-color: rgba(51, 51, 51, 0.35);
|
||||
//
|
||||
--separator-border: rgba(128, 128, 128, 0.35);
|
||||
--paneview-border-color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
.dockview-theme-dark {
|
||||
@include dockview-theme-dark-mixin();
|
||||
}
|
||||
|
||||
.dockview-theme-light {
|
||||
@include dockview-theme-light-mixin();
|
||||
}
|
||||
|
||||
.dockview-theme-vs {
|
||||
@include dockview-theme-dark-mixin();
|
||||
|
||||
--active-tab-background-visible: dodgerblue;
|
||||
--title-height: 18px;
|
||||
--title-font-size: 11px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user