feat: Clipboard

core/common-ui/src/elements/icons.ts

@@ -53,6 +53,30 @@ export const icons = {
  />
  </svg>
  `,
+ close_white:html`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M12 4L4 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ `,
+ close_purple:html`<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_i)">
+ <rect width="32" height="32" rx="16" fill="#EFEFFD"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17.0605L10.5303 22.5301L9.46967 21.4695L14.9393 15.9998L9.46967 10.5301L10.5303 9.46949L16 14.9392L21.4697 9.46948L22.5303 10.5301L17.0607 15.9998L22.5303 21.4695L21.4697 22.5301L16 17.0605Z" fill="#4B4DED"/>
+ </g>
+ <defs>
+ <filter id="filter0_i" x="0" y="-0.5" width="32" height="32.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+ <feOffset dy="-1"/>
+ <feGaussianBlur stdDeviation="0.25"/>
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+ <feColorMatrix type="matrix" values="0 0 0 0 0.054902 0 0 0 0 0.054902 0 0 0 0 0.172549 0 0 0 0.4 0"/>
+ <feBlend mode="overlay" in2="shape" result="effect1_innerShadow"/>
+ </filter>
+ </defs>
+ </svg>
+ `,
  hourglass_empty: html`
  <svg
  xmlns="http://www.w3.org/2000/svg"

core/common-ui/src/elements/snackbar.ts

@@ -0,0 +1,107 @@
+import { html, css, internalProperty, property, query, LitElement } from 'lit-element';
+import { styles } from './styles.css';
+import { icons } from './icons';
+
+export class UprtclSnackbar extends LitElement {
+ @internalProperty()
+ showSnackBar = true;
+
+ @property({ type: Number })
+ autoCloseDelay = 5000;
+
+ closeTimer;
+ async firstUpdated() {
+ if (this.closeTimer != null) {
+ clearTimeout(this.closeTimer);
+ }
+ if (this.autoCloseDelay) {
+ this.closeTimer = setTimeout(() => {
+ this.showSnackBar = false;
+ }, this.autoCloseDelay);
+ }
+ }
+
+ render() {
+ if (!this.showSnackBar) return null;
+ return html`<div class="snackbar-cont">
+ <div class="snackbar">
+ <slot name="description" class="snackbar-content"></slot>
+ <slot name="action-1" class="snackbar-action"></slot>
+ <slot name="action-2" class="snackbar-action"></slot>
+
+ <div
+ class="snackbar-action"
+ @click=${() => {
+ this.showSnackBar = false;
+ }}
+ >
+ ${icons.close_white}
+ </div>
+ </div>
+ </div>`;
+ }
+ static get styles() {
+ return [
+ styles,
+
+ css`
+ .snackbar * {
+ margin:0 !important ;
+ }
+ .snackbar-cont {
+ font-family: 'Inter', sans-serif;
+ position: absolute;
+ top: 5%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: #262641;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15),
+ 0px 4px 8px rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+ animation: slideUp 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+ }
+ .snackbar-hide {
+ animation: slideDown 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ }
+ @keyframes slideUp {
+ 0% {
+ top: -5%;
+ opacity: 0.3;
+ }
+ 100% {
+ top: 5%;
+ opacity: 1;
+ }
+ }
+ @keyframes slideDown {
+ to {
+ top: 0%;
+ }
+ }
+ .snackbar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-left: 1rem;
+ color: #fafcfe;
+ }
+ .snackbar > * {
+ padding: 0.5rem;
+ }
+ .snackbar-action {
+ padding: 0.5rem 1rem;
+ border-left: 1px solid #fff6;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ font-weight: bold;
+ }
+ .snackbar-action:hover {
+ background: #fff3;
+ }
+ `,
+ ];
+ }
+}

core/common-ui/src/elements/text-field.ts

@@ -68,7 +68,6 @@ export class UprtclTextField extends LitElement {
  position: absolute;
  left: 10px;
  top: -8px;
- background-color: white;
  width: fit-content;
  padding: 0px 5px;
  font-size: 15px;
@@ -85,6 +84,7 @@ export class UprtclTextField extends LitElement {
  outline-style: none;
  border-style: none;
  border-radius: 4px;
+ background-color: transparent;
  }
  .input-container {
  width: fit-content;

core/common-ui/src/register.components.ts

@@ -20,6 +20,7 @@ import { UprtclIndicator } from './elements/indicator';
 import { UprtclCopyToClipboard } from './elements/copy-to-clipboard';
 import { UprtclIconAndName } from './elements/icon-and-name';
 import { UprtclExpandable } from './elements/expandable';
+import {UprtclSnackbar} from './elements/snackbar'
 
 export function registerComponents() {
  customElements.define('uprtcl-button', UprtclButton);
@@ -42,4 +43,5 @@ export function registerComponents() {
  customElements.define('uprtcl-copy-to-clipboard', UprtclCopyToClipboard);
  customElements.define('uprtcl-icon-and-name', UprtclIconAndName);
  customElements.define('uprtcl-expandable', UprtclExpandable);
+ customElements.define('uprtcl-snackbar', UprtclSnackbar);
 }

modules/documents/src/elements/document-editor.ts

@@ -73,6 +73,13 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  [key: string]: { firstUref: string; newUref: string };
  } = {};
 
+ @internalProperty()
+ showDropSnackbar: boolean = false
+
+ dropParentNode: DocNode | undefined
+
+ dropUref: string = ''
+
  doc: DocNode | undefined = undefined;
 
  protected editableRemotesIds!: string[];
@@ -342,9 +349,9 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  flush:
  this.debounce !== undefined || this.autoflush !== undefined
  ? {
-  debounce: this.debounce,
-  autoflush: this.autoflush,
-  }
+ debounce: this.debounce,
+ autoflush: this.autoflush,
+ }
  : undefined,
  };
 
@@ -833,6 +840,7 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  }
 
  draggingOver(e, node: DocNode) {
+
  const wasDragging = node.draggingOver;
  node.draggingOver = true;
 
@@ -852,22 +860,41 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  }
 
  async handleDrop(e, node: DocNode) {
+
  const dragged = JSON.parse(e.dataTransfer.getData('text/plain'));
  if (!dragged.uref) return;
  if (dragged.parentId === this.uref) return;
 
  e.preventDefault();
  e.stopPropagation();
 
- if (node.draft.type === TextType.Title) {
- await this.createChild(node, dragged.uref, 0);
+ this.dropUref = dragged.uref;
+ this.dropParentNode = node;
+ this.showDropSnackbar = true
+ }
+ async handleDropAttach(uref: string) {
+ if (!this.dropParentNode)
+ return;
+
+ if (this.dropParentNode.draft.type === TextType.Title) {
+ await this.createChild(this.dropParentNode, uref, 0);
  } else {
- await this.createSibling(node, dragged.uref);
+ await this.createSibling(this.dropParentNode, uref);
  }
-
+ this.showDropSnackbar = false
  this.requestUpdate();
+
+
  }
+ async handleFork() {
+ const forkId = await this.localEvees.forkPerspective(this.dropUref)
+ this.handleDropAttach(forkId)
 
+ }
+ async handleEmbed() {
+ this.handleDropAttach(this.dropUref)
+
+ }
  getColor() {
  return this.color ? this.color : eveeColor(this.uref);
  }
@@ -915,25 +942,25 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  @drop=${(e) => this.handleDrop(e, node)}
  >
  ${this.showInfo
-  ? html` <div class="evee-info" style=${`padding-top:${paddingTop}`}>
+ ? html` <div class="evee-info" style=${`padding-top:${paddingTop}`}>
  ${this.getEveeInfo ? this.getEveeInfo(uref) : ''}
  </div>`
-  : html`<div class="empty-evees-info"></div>`}
+ : html`<div class="empty-evees-info"></div>`}
  <div class="node-content">
  ${nodeLense.render(node, {
-  focus: () => this.focused(node),
-  blur: () => this.blured(node),
-  contentChanged: (content: any, lift: boolean) =>
-  this.contentChanged(node, content, lift),
-  focusBackward: () => this.focusBackward(node),
-  focusDownward: () => this.focusDownward(node),
-  joinBackward: (tail: string) => this.joinBackward(node, tail),
-  pullDownward: () => this.pullDownward(node),
-  lift: () => this.lift(node),
-  split: (tail: string, asChild: boolean) => this.split(node, tail, asChild),
-  appended: () => this.appended(node),
-  convertedTo: (type) => this.convertedTo(node, type),
-  })}
+ focus: () => this.focused(node),
+ blur: () => this.blured(node),
+ contentChanged: (content: any, lift: boolean) =>
+ this.contentChanged(node, content, lift),
+ focusBackward: () => this.focusBackward(node),
+ focusDownward: () => this.focusDownward(node),
+ joinBackward: (tail: string) => this.joinBackward(node, tail),
+ pullDownward: () => this.pullDownward(node),
+ lift: () => this.lift(node),
+ split: (tail: string, asChild: boolean) => this.split(node, tail, asChild),
+ appended: () => this.appended(node),
+ convertedTo: (type) => this.convertedTo(node, type),
+ })}
  </div>
  ${node.draggingOver ? html`<div class="row-dragging-over"></div>` : ''}
  </div>
@@ -945,8 +972,8 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  ${this.renderTopRow(node)}
  ${node.childrenNodes
  ? node.childrenNodes.map((child) => {
-  return this.renderDocNode(child);
-  })
+ return this.renderDocNode(child);
+ })
  : ''}
  `;
  }
@@ -974,8 +1001,8 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  return html`
  <div
  style=${styleMap({
-  backgroundColor: node.focused ? SELECTED_BACKGROUND : 'transparent',
-  })}
+ backgroundColor: node.focused ? SELECTED_BACKGROUND : 'transparent',
+ })}
  class="doc-node-container"
  >
  ${renderHere ? this.renderHere(node) : this.renderWithCortex(node)}
@@ -1003,7 +1030,15 @@ export class DocumentEditor extends servicesConnect(LitElement) {
  return html`
  <div class=${editorClasses.join(' ')}>
  ${this.renderDocNode(this.doc)} ${this.renderDocumentEnd()}
+
+
  </div>
+ ${this.showDropSnackbar ? html` <uprtcl-snackbar autoCloseDelay=${1000000}>
+ <p slot="description">Preferred way of attaching</p>
+ <p slot="action-1" @click=${this.handleFork}>Fork</p>
+ <p slot="action-2" @click=${this.handleEmbed}>Embed</p>
+ </uprtcl-snackbar>`: null
+ }
  <!-- <div @click=${this.clickAreaClicked} class="click-area"></div> -->
  `;
  }