Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions desktop/frontend/dock/moon.pkg
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
"moonbit-community/rabbita/cmd",
"moonbit-community/rabbita/html",
"moonbit-community/rabbita/svg",
"openseek_desktop/frontend/pathx",
"openseek_desktop/frontend/interop",
}
Expand Down
91 changes: 70 additions & 21 deletions desktop/frontend/dock/view.mbt
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,91 @@

///|
/// The sidebar-right codicon for the panel toggle, from Microsoft's
/// vscode-codicons (CC BY 4.0), embedded unmodified.
let icon_layout_sidebar_right : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12.5 1C13.881 1 15 2.119 15 3.5V12.5C15 13.881 13.881 15 12.5 15H3.5C2.119 15 1 13.881 1 12.5V3.5C1 2.119 2.119 1 3.5 1H12.5ZM9 14V2H3.5C2.672 2 2 2.672 2 3.5V12.5C2 13.328 2.672 14 3.5 14H9Z"/></svg>
/// vscode-codicons (CC BY 4.0); the path data is unmodified, transcribed
/// into `@svg` builders (an innerHTML-bearing element cannot be safely
/// morphed by the positional child diff).
fn icon_layout_sidebar_right() -> @html.Html {
codicon(
"M12.5 1C13.881 1 15 2.119 15 3.5V12.5C15 13.881 13.881 15 12.5 15H3.5C2.119 15 1 13.881 1 12.5V3.5C1 2.119 2.119 1 3.5 1H12.5ZM9 14V2H3.5C2.672 2 2 2.672 2 3.5V12.5C2 13.328 2.672 14 3.5 14H9Z",
)
}

///|
/// The add codicon (CC BY 4.0): the strip's new-tab button.
let icon_add : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8 1.5C8 1.22386 7.77614 1 7.5 1C7.22386 1 7 1.22386 7 1.5V7H1.5C1.22386 7 1 7.22386 1 7.5C1 7.77614 1.22386 8 1.5 8H7V13.5C7 13.7761 7.22386 14 7.5 14C7.77614 14 8 13.7761 8 13.5V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H8V1.5Z"/></svg>
fn icon_add() -> @html.Html {
codicon(
"M8 1.5C8 1.22386 7.77614 1 7.5 1C7.22386 1 7 1.22386 7 1.5V7H1.5C1.22386 7 1 7.22386 1 7.5C1 7.77614 1.22386 8 1.5 8H7V13.5C7 13.7761 7.22386 14 7.5 14C7.77614 14 8 13.7761 8 13.5V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H8V1.5Z",
)
}

///|
/// The folder codicon (CC BY 4.0): the launcher's Files row.
let icon_folder : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5ZM1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H3.5C2.11929 14 1 12.8807 1 11.5V4.5ZM2 7V11.5C2 12.3284 2.67157 13 3.5 13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H2Z"/></svg>
fn icon_folder() -> @html.Html {
codicon(
"M2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5ZM1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H3.5C2.11929 14 1 12.8807 1 11.5V4.5ZM2 7V11.5C2 12.3284 2.67157 13 3.5 13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H2Z",
)
}

///|
/// A 16×16 codicon: one filled path tinted by `currentColor`.
fn codicon(d : String) -> @html.Html {
@svg.svg(
width=16,
height=16,
view_box="0 0 16 16",
attrs=@svg.Attrs::build().fill("currentColor"),
[@svg.path(d~)],
)
}

///|
/// A simple globe for the launcher's Browse row (drawn here, not a
/// codicon): a circle with one meridian and the equator.
let icon_globe : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"><circle cx="8" cy="8" r="6"/><ellipse cx="8" cy="8" rx="2.6" ry="6"/><path d="M2 8h12"/></svg>
fn icon_globe() -> @html.Html {
@svg.svg(
width=16,
height=16,
view_box="0 0 16 16",
attrs=@svg.Attrs::build().fill("none").stroke("currentColor"),
[
@svg.circle(cx=8, cy=8, r=6),
@svg.node(
"ellipse",
@svg.Attrs::build().cx("8").cy("8").rx("2.6").ry("6"),
[],
),
@svg.path(d="M2 8h12"),
],
)
}

///|
/// A compact diff document for the launcher's Review row.
let icon_review : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round"><path d="M5.5 2.5h7v11h-9v-7"/><path d="M1 3.5h4M3 1.5v4M1 9.5h4"/><path d="M7 6.5h3.5M7 9.5h3.5"/></svg>
fn icon_review() -> @html.Html {
@svg.svg(
width=16,
height=16,
view_box="0 0 16 16",
attrs=@svg.Attrs::build()
.fill("none")
.stroke("currentColor")
.stroke_linecap("round"),
[
@svg.path(d="M5.5 2.5h7v11h-9v-7"),
@svg.path(d="M1 3.5h4M3 1.5v4M1 9.5h4"),
@svg.path(d="M7 6.5h3.5M7 9.5h3.5"),
],
)
}

///|
/// An icon's SVG markup injected into a fixed-size span. The markup is a
/// trusted compile-time constant, never user input, so the XSS alert on
/// `inner_html` does not apply.
#warnings("-alert_xss_vulnerable")
fn icon(markup : String) -> @html.Html {
@html.span(
class="icon",
attrs=@html.Attrs::build().inner_html(markup).aria_hidden("true"),
([] : Array[@html.Html]),
)
/// An icon in a fixed-size span. Icons are functions, not shared constants:
/// each render site gets its own virtual-DOM value, so no Props instance is
/// ever aliased between two mounted elements.
fn icon(image : () -> @html.Html) -> @html.Html {
@html.span(class="icon", attrs=@html.Attrs::build().aria_hidden("true"), [
image(),
])
}

///|
Expand Down
1 change: 1 addition & 0 deletions desktop/frontend/fileeditor/moon.pkg
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
"moonbit-community/rabbita/dom",
"moonbit-community/rabbita/html",
"moonbit-community/rabbita/js",
"moonbit-community/rabbita/svg",
"moonbitlang/editor/base/browser" @base_browser,
"moonbitlang/editor/base/common",
"moonbitlang/editor/language",
Expand Down
38 changes: 24 additions & 14 deletions desktop/frontend/fileeditor/view.mbt
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,23 @@

///|
/// The folder codicon for the tree-pane toggle, from Microsoft's
/// vscode-codicons (CC BY 4.0), embedded unmodified — mirrors the main
/// package's icon set, which is not importable from here.
let icon_folder : String =
#|<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5ZM1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H3.5C2.11929 14 1 12.8807 1 11.5V4.5ZM2 7V11.5C2 12.3284 2.67157 13 3.5 13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H2Z"/></svg>
/// vscode-codicons (CC BY 4.0); the path data is unmodified, transcribed
/// into `@svg` builders (an innerHTML-bearing element cannot be safely
/// morphed by the positional child diff) — mirrors the main package's icon
/// set, which is not importable from here.
fn icon_folder() -> @html.Html {
@svg.svg(
width=16,
height=16,
view_box="0 0 16 16",
attrs=@svg.Attrs::build().fill("currentColor"),
[
@svg.path(
d="M2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5ZM1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H3.5C2.11929 14 1 12.8807 1 11.5V4.5ZM2 7V11.5C2 12.3284 2.67157 13 3.5 13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H2Z",
),
],
)
}

///|
const ExplorerFilesTabId = "explorer-files-tab"
Expand Down Expand Up @@ -58,16 +71,13 @@ fn focus_changed_file_after_render(index : Int) -> @cmd.Cmd {
}

///|
/// An icon's SVG markup injected into a fixed-size span. The markup is a
/// trusted compile-time constant, never user input, so the XSS alert on
/// `inner_html` does not apply.
#warnings("-alert_xss_vulnerable")
fn icon(markup : String) -> @html.Html {
@html.span(
class="icon",
attrs=@html.Attrs::build().inner_html(markup).aria_hidden("true"),
([] : Array[@html.Html]),
)
/// An icon in a fixed-size span. Icons are functions, not shared constants:
/// each render site gets its own virtual-DOM value, so no Props instance is
/// ever aliased between two mounted elements.
fn icon(image : () -> @html.Html) -> @html.Html {
@html.span(class="icon", attrs=@html.Attrs::build().aria_hidden("true"), [
image(),
])
}

///|
Expand Down
Loading
Loading