Adding an non functional popout button to the channel tree
This commit is contained in:
WolverinDEV
parent
6e3f92325e
commit
3b0a4f0318
5 changed files with 108 additions and 22 deletions
12
shared/img/client-icons/channel_popin.svg
Normal file
12
shared/img/client-icons/channel_popin.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg id="client-channel_popin" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(.66666 0 0 .66666 0 .00016666)">
|
||||
<path d="m23.707.293c-.391-.391-1.023-.391-1.414 0l-4.97 4.97-2.043-2.043c-.214-.215-.537-.279-.817-.163s-.463.39-.463.693v5.5c0 .414.336.75.75.75h5.5c.303 0 .577-.183.693-.463s.052-.603-.163-.817l-2.043-2.043 4.97-4.97c.391-.391.391-1.023 0-1.414z" fill="#fff"/>
|
||||
</g>
|
||||
<g transform="matrix(.66666 0 0 .66666 0 .00016666)">
|
||||
<path d="m18 19v2c0 .55-.45 1-1 1h-14c-.55 0-1-.45-1-1v-13.95c-1.14.23-2 1.24-2 2.45v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5v-2.5z" fill="#ccc"/>
|
||||
</g>
|
||||
<g transform="matrix(.66666 0 0 .66666 0 .00016666)">
|
||||
<path d="m22 6.25v.87l.19.19c.79.79 1.03 1.96.6 2.99-.18.43-.45.79-.79 1.06v2.64c0 .55-.45 1-1 1h-14c-.55 0-1-.45-1-1v-9h6v-1.25c0-1.12.67-2.11 1.7-2.54s2.21-.19 3 .6l.62.62 2.44-2.43h-13.26c-1.38 0-2.5 1.12-2.5 2.5v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5v-10.26z" fill="#7289da"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
11
shared/img/client-icons/channel_popout.svg
Normal file
11
shared/img/client-icons/channel_popout.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg id="client-channel_popout" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="scale(.66667)">
|
||||
<path d="m23.25 9c-.44 0-.87-.11-1.25-.31v5.31c0 .55-.45 1-1 1h-14c-.55 0-1-.45-1-1v-9h8.75l1.68-1.68-.62-.63c-.71-.71-.98-1.74-.7-2.69h-8.61c-1.38 0-2.5 1.12-2.5 2.5v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5v-5.61c-.24.08-.5.11-.75.11z" fill="#a9aaac"/>
|
||||
</g>
|
||||
<g transform="scale(.66667)">
|
||||
<path d="m23.25 0h-5.5c-.303 0-.577.183-.693.463s-.052.603.163.817l2.043 2.043-4.97 4.97c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l4.97-4.97 2.043 2.043c.143.144.335.22.53.22.097 0 .194-.019.287-.057.28-.116.463-.39.463-.693v-5.5c0-.414-.336-.75-.75-.75z" fill="#fff"/>
|
||||
</g>
|
||||
<g transform="scale(.66667)">
|
||||
<path d="m18 19v2c0 .55-.45 1-1 1h-14c-.55 0-1-.45-1-1v-13.95c-1.14.23-2 1.24-2 2.45v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5v-2.5z" fill="#7289da"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 931 B |
|
|
@ -7,11 +7,23 @@ import {EventHandler, ReactEventHandler, Registry} from "tc-shared/events";
|
|||
import * as React from "react";
|
||||
import {ChannelTreeUIEvents} from "tc-shared/ui/tree/Definitions";
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
import {RDPEntry, RDPChannelTree} from "./RendererDataProvider";
|
||||
import {RDPChannelTree, RDPEntry} from "./RendererDataProvider";
|
||||
import {RendererMove} from "./RendererMove";
|
||||
import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
|
||||
import {ClientIcon} from "svg-sprites/client-icons";
|
||||
|
||||
const viewStyle = require("./View.scss");
|
||||
|
||||
const PopoutButton = (props: {}) => {
|
||||
return (
|
||||
<div className={viewStyle.popoutButton}>
|
||||
<div className={viewStyle.button}>
|
||||
<ClientIconRenderer icon={ClientIcon.ChannelPopout} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export interface ChannelTreeViewProperties {
|
||||
events: Registry<ChannelTreeUIEvents>;
|
||||
dataProvider: RDPChannelTree;
|
||||
|
|
@ -168,27 +180,30 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
|
|||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={viewStyle.channelTreeContainer + " " + (this.state.smoothScroll ? viewStyle.smoothScroll : "")}
|
||||
onScroll={() => this.onScroll()}
|
||||
ref={this.refContainer}
|
||||
onMouseDown={e => this.onMouseDown(e)}
|
||||
onMouseMove={e => this.onMouseMove(e)}>
|
||||
<div className={viewStyle.treeContainer}>
|
||||
<div
|
||||
className={viewStyle.channelTree}
|
||||
style={{height: (this.state.tree.length * ChannelTreeView.EntryHeight) + "px"}}>
|
||||
{elements}
|
||||
className={viewStyle.channelTreeContainer + " " + (this.state.smoothScroll ? viewStyle.smoothScroll : "")}
|
||||
onScroll={() => this.onScroll()}
|
||||
ref={this.refContainer}
|
||||
onMouseDown={e => this.onMouseDown(e)}
|
||||
onMouseMove={e => this.onMouseMove(e)}>
|
||||
<div
|
||||
className={viewStyle.channelTree}
|
||||
style={{height: (this.state.tree.length * ChannelTreeView.EntryHeight) + "px"}}>
|
||||
{elements}
|
||||
</div>
|
||||
<RendererMove
|
||||
onMoveEnd={target => {
|
||||
const targetEntry = this.getEntryFromPoint(target.x, target.y);
|
||||
this.props.events.fire("action_move_entries", { treeEntryId: typeof targetEntry === "number" ? targetEntry : 0 });
|
||||
}}
|
||||
onMoveCancel={() => {
|
||||
this.props.events.fire("action_move_entries", { treeEntryId: 0 });
|
||||
}}
|
||||
ref={this.props.dataProvider.refMove}
|
||||
/>
|
||||
</div>
|
||||
<RendererMove
|
||||
onMoveEnd={target => {
|
||||
const targetEntry = this.getEntryFromPoint(target.x, target.y);
|
||||
this.props.events.fire("action_move_entries", { treeEntryId: typeof targetEntry === "number" ? targetEntry : 0 });
|
||||
}}
|
||||
onMoveCancel={() => {
|
||||
this.props.events.fire("action_move_entries", { treeEntryId: 0 });
|
||||
}}
|
||||
ref={this.props.dataProvider.refMove}
|
||||
/>
|
||||
<PopoutButton />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,6 +105,25 @@ html:root {
|
|||
}
|
||||
}
|
||||
|
||||
.treeContainer {
|
||||
height: 100%;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.popoutButton {
|
||||
top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channelTreeContainer {
|
||||
@include chat-scrollbar-vertical();
|
||||
|
||||
|
|
@ -122,6 +141,33 @@ html:root {
|
|||
}
|
||||
}
|
||||
|
||||
.popoutButton {
|
||||
position: absolute;
|
||||
top: -3em;
|
||||
right: 1em;
|
||||
|
||||
@include transition(all ease-in-out $button_hover_animation_time);
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: #0000004f;
|
||||
|
||||
padding: .6em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include transition(all ease-in-out $button_hover_animation_time);
|
||||
|
||||
&:hover {
|
||||
background-color: #0000008f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
border: solid hsla(220, 5%, 30%, 1);
|
||||
|
|
|
|||
6
shared/svg-sprites/client-icons.d.ts
vendored
6
shared/svg-sprites/client-icons.d.ts
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue