Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

[breakpoints] Style column breakpoint marker #2786

@jasonLaster

Description

@jasonLaster

We recently added column breakpoints in #2760. It would be nice to replace the ugly marker with something more professional. Likely similar to what chrome has.

diff --git a/src/components/Editor/Breakpoint.js b/src/components/Editor/Breakpoint.js
index fa65574..9a47554 100644
--- a/src/components/Editor/Breakpoint.js
+++ b/src/components/Editor/Breakpoint.js
@@ -10,6 +10,7 @@ const breakpointSvg = document.createElement("div");
 ReactDOM.render(Svg("breakpoint"), breakpointSvg);

 function makeMarker(isDisabled: boolean) {
+  // do something with an SVG like this
   const bp = breakpointSvg.cloneNode(true);
   bp.className = classnames("editor new-breakpoint", {
     "breakpoint-disabled": isDisabled,
diff --git a/src/components/Editor/ColumnBreakpoint.js b/src/components/Editor/ColumnBreakpoint.js
index 2f56b03..36ff1b0 100644
--- a/src/components/Editor/ColumnBreakpoint.js
+++ b/src/components/Editor/ColumnBreakpoint.js
@@ -13,8 +13,8 @@ type BookMarkType = {

 function makeBookmark() {
   let widget = document.createElement("span");
-  widget.innerText = "+";
-  widget.classList.add("inline-bp");
+
+  // we should replace this
   return widget;
 }

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions