aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionNoteTakingView.scss152
-rw-r--r--src/client/views/collections/CollectionNoteTakingView.tsx66
-rw-r--r--src/client/views/collections/CollectionNoteTakingViewColumn.tsx3
3 files changed, 94 insertions, 127 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index a878033ed..fe98f307e 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -1,50 +1,50 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
.collectionNoteTakingView-DocumentButtons {
- display: flex;
- justify-content: space-between;
- margin: auto;
+ display: flex;
+ justify-content: space-between;
+ margin: auto;
}
.collectionNoteTakingView-addDocumentButton {
- display: flex;
- overflow: hidden;
- margin: auto;
- width: 100%;
- overflow: ellipses;
-
- .editableView-container-editing-oneLine,
- .editableView-container-editing {
- color: grey;
- padding: 10px;
- width: 100%;
- }
-
- .editableView-input:hover,
- .editableView-container-editing:hover,
- .editableView-container-editing-oneLine:hover {
- cursor: text
- }
-
- .editableView-input {
- outline-color: black;
- letter-spacing: 2px;
- color: grey;
- border: 0px;
- padding: 12px 10px 11px 10px;
- }
-
- font-size: 75%;
- letter-spacing: 2px;
- cursor: pointer;
-
- .editableView-input {
- outline-color: black;
- letter-spacing: 2px;
- color: grey;
- border: 0px;
- padding: 12px 10px 11px 10px;
- }
+ display: flex;
+ overflow: hidden;
+ margin: auto;
+ width: 100%;
+ overflow: ellipses;
+
+ .editableView-container-editing-oneLine,
+ .editableView-container-editing {
+ color: grey;
+ padding: 10px;
+ width: 100%;
+ }
+
+ .editableView-input:hover,
+ .editableView-container-editing:hover,
+ .editableView-container-editing-oneLine:hover {
+ cursor: text;
+ }
+
+ .editableView-input {
+ outline-color: black;
+ letter-spacing: 2px;
+ color: grey;
+ border: 0px;
+ padding: 12px 10px 11px 10px;
+ }
+
+ font-size: 75%;
+ letter-spacing: 2px;
+ cursor: pointer;
+
+ .editableView-input {
+ outline-color: black;
+ letter-spacing: 2px;
+ color: grey;
+ border: 0px;
+ padding: 12px 10px 11px 10px;
+ }
}
.collectionNoteTakingView {
@@ -83,21 +83,13 @@
overflow-y: auto;
overflow-x: hidden;
flex-wrap: wrap;
- transition: top .5s;
+ transition: top 0.5s;
- >div {
+ > div {
position: relative;
display: block;
}
- .collectionNoteTakingViewFieldColumn {
- height: max-content;
- }
-
- .collectionNoteTakingViewFieldColumnDragging {
- height: 100%;
- }
-
.collectionSchemaView-previewDoc {
height: 100%;
position: absolute;
@@ -144,33 +136,33 @@
// Documents in NoteTaking view
.collectionNoteTakingView-columnDoc {
display: flex;
- // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change
+ // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change
position: relative;
&:hover {
- .hoverButtons{
- opacity: 1;
- }
+ .hoverButtons {
+ opacity: 1;
+ }
}
.hoverButtons {
- display: flex;
- opacity: 0;
- position: absolute;
- height: 100%;
- left: -35px;
- justify-content: center;
- align-items: center;
- padding: 0px 10px;
-
- .buttonWrapper {
- padding: 3px;
- border-radius: 3px;
-
- &:hover {
- background: rgba(0, 0, 0, 0.26);
+ display: flex;
+ opacity: 0;
+ position: absolute;
+ height: 100%;
+ left: -35px;
+ justify-content: center;
+ align-items: center;
+ padding: 0px 10px;
+
+ .buttonWrapper {
+ padding: 3px;
+ border-radius: 3px;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.26);
+ }
}
- }
}
}
@@ -200,7 +192,7 @@
span::before,
span::after {
- content: "";
+ content: '';
width: 50%;
border-top: dashed gray 1px;
position: relative;
@@ -241,7 +233,7 @@
.editableView-input:hover,
.editableView-container-editing:hover,
.editableView-container-editing-oneLine:hover {
- cursor: text
+ cursor: text;
}
.collectionNoteTakingView-sectionHeader-subCont {
@@ -287,7 +279,7 @@
height: 100%;
display: none;
- [class*="css"] {
+ [class*='css'] {
max-width: 102px;
}
@@ -329,7 +321,7 @@
height: 100%;
display: none;
- [class*="css"] {
+ [class*='css'] {
max-width: 102px;
}
@@ -338,7 +330,6 @@
}
.collectionNoteTakingView-optionPicker {
-
.optionOptions {
display: inline;
}
@@ -398,7 +389,7 @@
.editableView-input:hover,
.editableView-container-editing:hover,
.editableView-container-editing-oneLine:hover {
- cursor: text
+ cursor: text;
}
.editableView-input {
@@ -451,7 +442,7 @@
top: 4px;
border-radius: 50% 50%;
background-color: #fff;
- content: " ";
+ content: ' ';
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-webkit-transform: scale(1);
@@ -481,7 +472,6 @@
}
@media only screen and (max-device-width: 480px) {
-
.collectionNoteTakingView .collectionNoteTakingView-columnDragger,
.collectionNoteTakingView-columnDragger {
width: 0.1;
@@ -489,4 +479,4 @@
opacity: 0;
font-size: 0;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 1854a4213..989719c80 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -363,30 +363,30 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// This function is used to preview where a document will drop in a column once a drag is complete.
@action
- onPointerOver = (e: React.PointerEvent) => {
- if (DragManager.docsBeingDragged.length && this.childDocList) {
+ onPointerOver = (ex: number, ey: number) => {
+ console.log('Pover9ing = ');
+ if (this.childDocList) {
// get the current docs for the column based on the mouse's x coordinate
// will use again later, which is why we're saving as local
- const xCoord = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0] - 2 * this.gridGap;
+ const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap;
const colDocs = this.getDocsFromXCoord(xCoord);
// get the index for where you need to insert the doc you are currently dragging
- const clientY = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[1];
+ const clientY = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[1];
let dropInd = -1;
let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2;
colDocs.forEach((doc, i) => {
let pos1 = this.getDocHeight(doc) + 2 * this.gridGap;
pos1 += pos0;
// updating drop position based on y coordinates
- const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1);
- if (yCoordInBetween) {
+ const yCoordInBetween = clientY > pos0 && clientY < pos1;
+ if (yCoordInBetween || (clientY < pos0 && i === 0)) {
dropInd = i;
- // dropAfter = 0;
- if (clientY > (pos0 + pos1) / 2) {
- // dropAfter = 1;
- }
+ } else if (i === colDocs.length - 1 && dropInd === -1) {
+ dropInd = !colDocs.includes(DragManager.docsBeingDragged.lastElement()) ? i + 1 : i;
}
pos0 = pos1;
});
+ console.log('Pover = ' + dropInd + ' ' + this.getColumnFromXCoord(xCoord));
// we alter the pivot fields of the docs in case they are moved to a new column.
const colIndex = this.getColumnFromXCoord(xCoord);
const colHeader = StrCast(this.columnHeaders[colIndex].heading);
@@ -495,43 +495,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
@undoBatch
@action
onExternalDrop = async (e: React.DragEvent): Promise<void> => {
- const where = [e.clientX, e.clientY];
- let targInd = -1;
- const docs = this.getDocsFromXCoord(where[0]);
- docs.map((d, i) => {
- const pos0 = this.getDocTransform(d)
- .inverse()
- .transformPoint(-2 * this.gridGap, -2 * this.gridGap);
- const pos1 = this.getDocTransform(d).inverse().transformPoint(this.getDocWidth(d), this.getDocHeight(d));
- // const pos0 = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
- // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
- if (where[0] > pos0[0] && where[0] < pos1[0] && where[1] > pos0[1] && where[1] < pos1[1]) {
- targInd = i;
- }
- });
- // this._docXfs.map((cd, i) => {
- // const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
- // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
- // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
- // targInd = i;
- // }
- // });
- super.onExternalDrop(e, {}, () => {
- if (targInd !== -1) {
- const newDoc = this.childDocs[this.childDocs.length - 1];
- const docs = this.childDocList;
- if (docs) {
- docs.splice(docs.length - 1, 1);
- docs.splice(targInd, 0, newDoc);
- }
+ const targInd = this.docsDraggedRowCol?.[0] || 0;
+ super.onExternalDrop(e, {}, docus => {
+ this.onPointerOver(e.clientX, e.clientY);
+ docus?.map(doc => this.addDocument(doc));
+ const newDoc = this.childDocs.lastElement();
+ const docs = this.childDocList;
+ if (docs && targInd !== -1) {
+ docs.splice(docs.length - 1, 1);
+ docs.splice(targInd, 0, newDoc);
}
+ this.removeDocDragHighlight();
});
};
- // setDocsForColHeader = (key: string, docs: Doc[]) => {
- // this._docsByColumnHeader = new Map(this._docsByColumnHeader.set(key, docs))
- // }
-
headings = () => Array.from(this.Sections);
refList: any[] = [];
@@ -723,7 +700,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
pointerEvents: this.backgroundEvents ? 'all' : undefined,
}}
onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))}
- onPointerOver={this.onPointerOver}
+ onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))}
+ onPointerOver={e => this.onPointerOver(e.clientX, e.clientY)}
onDrop={this.onExternalDrop.bind(this)}
onContextMenu={this.onContextMenu}
onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}>
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 55d032498..5ba262418 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -286,7 +286,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
<>
{headingView}
{
- <div>
+ <div style={{ height: '100%' }}>
<div
key={`${heading}-stack`}
className={`collectionNoteTakingView-Nodes`}
@@ -337,7 +337,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
style={{
//TODO: change this so that it's based on the column width
width: this.columnWidth,
- height: '100%',
background: this._background,
}}
ref={this.createColumnDropRef}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:23:58 +0000