thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[feat]: Drag and Drop Handles for all Data Structures (#2745)

Browse Source 
* better variable names and comments

* drag drop migrated

* custom horizontal rule created

* init transaction hijack

* fixed code block with better contrast, keyboard tripple enter press disabled and syntax highlighting

* fixed link selector closing on open behaviour

* added better keymaps and syntax highlights

* made drag and drop working for code blocks

* fixed drag drop for code blocks

* moved drag drop only to rich text editor

* fixed drag and drop only for description

* enabled drag handles for peek overview and main issues

* got images to old state
This commit is contained in:
M. Palanikannan
2023-11-17 12:29:30 +05:30
committed by sriram veeraghanta
parent 1f61ad141e
commit 34ab188a99
25 changed files with 716 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/styles/editor.css
View File

@@ -229,3 +229,101 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
.ProseMirror table * .is-empty::before {
opacity: 0;
}
.ProseMirror pre {
background: rgba(var(--color-background-80));
border-radius: 0.5rem;
color: rgba(var(--color-text-100));
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
}
.ProseMirror pre code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(img):not(pre) {
outline: none !important;
border-radius: 0.2rem;
background-color: rgb(var(--color-background-90));
border: 1px solid #5abbf7;
padding: 4px 2px 4px 2px;
transition: background-color 0.2s;
box-shadow: none;
}
.drag-handle {
position: fixed;
opacity: 1;
transition: opacity ease-in 0.2s;
display: grid;
place-items: center;
height: 20px;
width: 15px;
z-index: 10;
cursor: grab;
border-radius: 2px;
background-color: rgb(var(--color-background-90));
&:hover {
background-color: rgb(var(--color-background-80));
}
&.hide {
opacity: 0;
pointer-events: none;
}
}
.drag-handle:hover {
background-color: #0d0d0d 10;
transition: background-color 0.2s;
}
.drag-handle.hidden {
opacity: 0;
pointer-events: none;
}
@media screen and (max-width: 600px) {
.drag-handle {
display: none;
pointer-events: none;
}
}
.drag-handle-container {
height: 20px;
width: 15px;
cursor: grab;
display: grid;
place-items: center;
}
.drag-handle-dots {
height: 100%;
width: 12px;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.drag-handle-dot {
height: 2.75px;
width: 3px;
background-color: rgba(var(--color-text-100));
border-radius: 50%;
}
div[data-type="horizontalRule"] {
line-height: 0;
padding: 0.25rem 0;
margin-top: 0;
margin-bottom: 0;
& > div {
border-bottom: 1px solid rgb(var(--color-text-100));
}
}