search

bentd / outline-editor

outline editor component for standardnotes
0 stars 0 forks source link

When you expand a bullet that is a large paragraph, the expanded view header title is not truncated, as well as the breadcrumbs bar #5

Closed moughxyz closed 5 years ago

moughxyz commented 5 years ago
Screen Shot 2019-04-25 at 7 57 55 AM
bentd commented 5 years ago
lorem
bentd commented 5 years ago

lorem

bentd commented 5 years ago

So in both the original desktop and mobile versions, the focused bullet's header title is fully shown, not truncated. This goes for the bullet's subnote as well. The breadcrumbs bar however is truncated. I can use the substring method to truncate the content in the bar.

moughxyz commented 5 years ago

Which app are these screenshots from? Love the one line bar, with the horizontal border under it. Looks very clean.

bentd commented 5 years ago

Added a truncate method to limit the breadcrumb links to no more than 30 characters: 

  truncate(str, length=30) {
    let newStr = str.substring(0, length - 3);
    return newStr + "...";
  }

Also added a semi-redundant ellipsis truncation feature so that if the link needs to be sized smaller than 30 characters, there is still an ellipsis:

        <p key={ index }
           className="px-2"
           style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}
           onClick={ this.navigateTo((index + 1)).bind(this) }>
           { " > " }{ this.truncate(node.content) }
        </p>