aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/DocComponent.tsx7
-rw-r--r--src/client/views/Main.scss2
-rw-r--r--src/client/views/MainView.scss11
-rw-r--r--src/client/views/collections/CollectionDockingView.scss69
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx20
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx4
6 files changed, 79 insertions, 34 deletions
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 9d7c06750..94717352e 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -7,18 +7,13 @@ import { listSpec } from '../../new_fields/Schema';
import { InkingControl } from './InkingControl';
import { InkTool } from '../../new_fields/InkField';
-<<<<<<< HEAD
-export function DocComponent<P extends { Document: Doc }, T>(schemaCtor: (doc: Doc) => T) {
- class Component extends Touchable<P> {
-=======
/// DocComponents returns a generic base class for React views of document fields that are not interactive
interface DocComponentProps {
Document: Doc;
}
export function DocComponent<P extends DocComponentProps, T>(schemaCtor: (doc: Doc) => T) {
- class Component extends React.Component<P> {
->>>>>>> 33811c112c7e479813908ba10f72813954a3e289
+ class Component extends Touchable<P> {
//TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
@computed
get Document(): T {
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 0335e12a5..4a174f8c7 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -36,7 +36,7 @@ p {
::-webkit-scrollbar {
-webkit-appearance: none;
height: 8px;
- width: 8px;
+ width: 20px;
}
::-webkit-scrollbar-thumb {
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index a6b28f488..25af67161 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -34,15 +34,9 @@
display: flex;
flex-direction: column;
position: absolute;
-<<<<<<< HEAD
width: 100%;
height: 100%;
- border: black 1px solid;
-=======
- width:100%;
- height:100%;
->>>>>>> 33811c112c7e479813908ba10f72813954a3e289
.documentView-node-topmost {
background: lightgrey;
}
@@ -73,13 +67,8 @@
.mainView-expandFlyoutButton {
position: absolute;
-<<<<<<< HEAD
top: 100px;
right: 30px;
-=======
- top: 5px;
- right: 5px;
->>>>>>> 33811c112c7e479813908ba10f72813954a3e289
cursor: pointer;
}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 6f5abd05b..b4ab8d550 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,12 +1,13 @@
@import "../../views/globalCssVariables.scss";
-.lm_active .messageCounter{
- color:white;
+.lm_active .messageCounter {
+ color: white;
background: #999999;
}
+
.messageCounter {
- width:18px;
- height:20px;
+ width: 18px;
+ height: 20px;
text-align: center;
border-radius: 20px;
margin-left: 5px;
@@ -18,22 +19,29 @@
.collectiondockingview-container {
width: 100%;
- height:100%;
+ height: 100%;
border-style: solid;
border-width: $COLLECTION_BORDER_WIDTH;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
+
+ .collectionDockingView-dragAsDocument {
+ touch-action: none;
+ }
+
.lm_controls>li {
opacity: 0.6;
transform: scale(1.2);
}
+
.lm_maximised .lm_controls .lm_maximise {
opacity: 1;
transform: scale(0.8);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
}
+
.flexlayout__layout {
left: 0;
top: 0;
@@ -42,17 +50,21 @@
position: absolute;
overflow: hidden;
}
+
.flexlayout__splitter {
background-color: black;
}
+
.flexlayout__splitter:hover {
background-color: #333;
}
+
.flexlayout__splitter_drag {
border-radius: 5px;
background-color: #444;
z-index: 1000;
}
+
.flexlayout__outline_rect {
position: absolute;
cursor: move;
@@ -62,6 +74,7 @@
z-index: 1000;
box-sizing: border-box;
}
+
.flexlayout__outline_rect_edge {
cursor: move;
border: 2px solid #b7d1b5;
@@ -70,12 +83,14 @@
z-index: 1000;
box-sizing: border-box;
}
+
.flexlayout__edge_rect {
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
background-color: lightgray;
}
+
.flexlayout__drag_rect {
position: absolute;
cursor: move;
@@ -94,11 +109,13 @@
padding: 10px;
word-wrap: break-word;
}
+
.flexlayout__tabset {
overflow: hidden;
background-color: #222;
box-sizing: border-box;
}
+
.flexlayout__tab {
overflow: auto;
position: absolute;
@@ -106,6 +123,7 @@
background-color: #222;
color: black;
}
+
.flexlayout__tab_button {
cursor: pointer;
padding: 2px 8px 3px 8px;
@@ -117,28 +135,35 @@
vertical-align: top;
box-sizing: border-box;
}
+
.flexlayout__tab_button--selected {
color: #ddd;
background-color: #222;
}
+
.flexlayout__tab_button--unselected {
color: gray;
}
+
.flexlayout__tab_button_leading {
display: inline-block;
}
+
.flexlayout__tab_button_content {
display: inline-block;
}
+
.flexlayout__tab_button_textbox {
float: left;
border: none;
color: lightgreen;
background-color: #222;
}
+
.flexlayout__tab_button_textbox:focus {
outline: none;
}
+
.flexlayout__tab_button_trailing {
display: inline-block;
margin-left: 5px;
@@ -146,10 +171,12 @@
width: 8px;
height: 8px;
}
+
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
+
.flexlayout__tab_button_overflow {
float: left;
width: 20px;
@@ -162,6 +189,7 @@
font-family: Arial, sans-serif;
background: transparent url("../../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
}
+
.flexlayout__tabset_header {
position: absolute;
left: 0;
@@ -172,6 +200,7 @@
/*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
box-sizing: border-box;
}
+
.flexlayout__tab_header_inner {
position: absolute;
left: 0;
@@ -179,6 +208,7 @@
bottom: 0;
width: 10000px;
}
+
.flexlayout__tab_header_outer {
background-color: black;
position: absolute;
@@ -188,12 +218,15 @@
/*height: 100px;*/
overflow: hidden;
}
+
.flexlayout__tabset-selected {
background-image: linear-gradient(#111, #444);
}
+
.flexlayout__tabset-maximized {
background-image: linear-gradient(#666, #333);
}
+
.flexlayout__tab_toolbar {
position: absolute;
display: flex;
@@ -203,6 +236,7 @@
bottom: 0;
right: 0;
}
+
.flexlayout__tab_toolbar_button-min {
width: 20px;
height: 20px;
@@ -210,6 +244,7 @@
outline-width: 0;
background: transparent url("../../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
}
+
.flexlayout__tab_toolbar_button-max {
width: 20px;
height: 20px;
@@ -217,14 +252,18 @@
outline-width: 0;
background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
}
+
.flexlayout__popup_menu {}
+
.flexlayout__popup_menu_item {
padding: 2px 10px 2px 10px;
color: #ddd;
}
+
.flexlayout__popup_menu_item:hover {
background-color: #444444;
}
+
.flexlayout__popup_menu_container {
box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
border: 1px solid #555;
@@ -233,33 +272,39 @@
position: absolute;
z-index: 1000;
}
+
.flexlayout__border_top {
background-color: black;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
overflow: hidden;
}
+
.flexlayout__border_bottom {
background-color: black;
border-top: 1px solid #333;
box-sizing: border-box;
overflow: hidden;
}
+
.flexlayout__border_left {
background-color: black;
border-right: 1px solid #333;
box-sizing: border-box;
overflow: hidden;
}
+
.flexlayout__border_right {
background-color: black;
border-left: 1px solid #333;
box-sizing: border-box;
overflow: hidden;
}
+
.flexlayout__border_inner_bottom {
display: flex;
}
+
.flexlayout__border_inner_left {
position: absolute;
white-space: nowrap;
@@ -267,6 +312,7 @@
transform-origin: top right;
transform: rotate(-90deg);
}
+
.flexlayout__border_inner_right {
position: absolute;
white-space: nowrap;
@@ -274,6 +320,7 @@
transform-origin: top left;
transform: rotate(90deg);
}
+
.flexlayout__border_button {
background-color: #222;
color: white;
@@ -285,29 +332,36 @@
vertical-align: top;
box-sizing: border-box;
}
+
.flexlayout__border_button--selected {
color: #ddd;
background-color: #222;
}
+
.flexlayout__border_button--unselected {
color: gray;
}
+
.flexlayout__border_button_leading {
float: left;
display: inline;
}
+
.flexlayout__border_button_content {
display: inline-block;
}
+
.flexlayout__border_button_textbox {
float: left;
border: none;
color: green;
background-color: #ddd;
}
+
.flexlayout__border_button_textbox:focus {
outline: none;
}
+
.flexlayout__border_button_trailing {
display: inline-block;
margin-left: 5px;
@@ -315,10 +369,12 @@
width: 8px;
height: 8px;
}
+
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing {
background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
+
.flexlayout__border_toolbar_left {
position: absolute;
display: flex;
@@ -328,6 +384,7 @@
left: 0;
right: 0;
}
+
.flexlayout__border_toolbar_right {
position: absolute;
display: flex;
@@ -337,6 +394,7 @@
left: 0;
right: 0;
}
+
.flexlayout__border_toolbar_top {
position: absolute;
display: flex;
@@ -346,6 +404,7 @@
bottom: 0;
right: 0;
}
+
.flexlayout__border_toolbar_bottom {
position: absolute;
display: flex;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 1f78c8c97..5e00fda36 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -426,15 +426,17 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
}
tab.setActive(true);
};
- ReactDOM.render(<span title="Drag as document" onPointerDown={
- e => {
- e.preventDefault();
- e.stopPropagation();
- DragManager.StartDocumentDrag([dragSpan], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY, {
- handlers: { dragComplete: emptyFunction },
- hideSource: false
- });
- }}><FontAwesomeIcon icon="file" size="lg" /></span>, dragSpan);
+ ReactDOM.render(<span title="Drag as document"
+ className="collectionDockingView-dragAsDocument"
+ onPointerDown={
+ e => {
+ e.preventDefault();
+ e.stopPropagation();
+ DragManager.StartDocumentDrag([dragSpan], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY, {
+ handlers: { dragComplete: emptyFunction },
+ hideSource: false
+ });
+ }}><FontAwesomeIcon icon="file" size="lg" /></span>, dragSpan);
ReactDOM.render(<ButtonSelector Document={doc} Stack={stack} />, gearSpan);
// ReactDOM.render(<ParentDocSelector Document={doc} addDocTab={(doc, data, where) => {
// where === "onRight" ? CollectionDockingView.AddRightSplit(doc, dataDoc) : CollectionDockingView.Instance.AddTab(stack, doc, dataDoc);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index e9f4c40a6..07db6354f 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -198,7 +198,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
}
this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]);
}
- if (!this._commandExecuted) {
+ if (!this._commandExecuted && (Math.abs(this.Bounds.height * this.Bounds.width) > 100)) {
MarqueeOptionsMenu.Instance.createCollection = this.collection;
MarqueeOptionsMenu.Instance.delete = this.delete;
MarqueeOptionsMenu.Instance.summarize = this.summary;
@@ -213,7 +213,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
MarqueeOptionsMenu.Instance.fadeOut(true);
document.removeEventListener("pointerdown", hideMarquee);
}
- document.addEventListener("pointerdown", hideMarquee)
+ document.addEventListener("pointerdown", hideMarquee);
if (e.altKey) {
e.preventDefault();