From 0cd8ec37c44a71e616ba2c35e27cef053abdfcee Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 18 Sep 2024 11:59:42 +0200 Subject: [PATCH 1/8] Generalize columns --- example.jl | 12 ++++++-- src/present.jl | 83 ++++++++++++++++---------------------------------- 2 files changed, 35 insertions(+), 60 deletions(-) diff --git a/example.jl b/example.jl index 4007e08..24f3b85 100644 --- a/example.jl +++ b/example.jl @@ -286,13 +286,18 @@ md""" """ # ╔═╡ fc5789dd-4b86-4007-9771-a6246235fd73 -TwoColumn(md"Left col", md"Right col") +Columns(md"Left col", md"Right col") # ╔═╡ 2881e5de-f6b7-47c0-a794-3e0fa57b712b -ThreeColumn(md"Left col", md"Middle col", md"Right col") +Columns(md"Left col", md"Middle col", md"Right col") + +# ╔═╡ c22f7f6a-171d-4379-86c9-1781875cf0a4 +md""" +You can customize the widths of the columns. +""" # ╔═╡ 0e1e62a6-3b78-4415-89fe-fa17279fddbf -TwoColumnWideLeft(md"Left col", md"Right col") +Columns(md"Left col", md"Right col", widths = [1/3, 2/3]) # ╔═╡ f43beea9-7a7e-4ee6-8ae6-350640c426aa TwoColumnWideRight(md"Left col", md"Right col") @@ -869,6 +874,7 @@ version = "17.4.0+2" # ╟─d7593309-3462-4dba-8275-c2eb76b4c3fe # ╠═fc5789dd-4b86-4007-9771-a6246235fd73 # ╠═2881e5de-f6b7-47c0-a794-3e0fa57b712b +# ╟─c22f7f6a-171d-4379-86c9-1781875cf0a4 # ╠═0e1e62a6-3b78-4415-89fe-fa17279fddbf # ╠═f43beea9-7a7e-4ee6-8ae6-350640c426aa # ╠═44d651d3-ce42-4061-b193-da7c31efed8e diff --git a/src/present.jl b/src/present.jl index 0a09e17..9ad5702 100644 --- a/src/present.jl +++ b/src/present.jl @@ -18,69 +18,38 @@ function Base.show(io, mime::MIME"text/html", fld::Foldable) return nothing end -struct TwoColumn{L,R} - left::L - right::R -end +function Columns(cols...; widths=nothing, gap = 2) + ncols = length(cols) + ngaps = ncols - 1 + if isnothing(widths) + widths = fill(100/ncols, ncols) + end + if gap > 0 # adjust widths if gaps are desired + widths = widths / sum(widths) * (100 - gap*ngaps) + end + + columns = [ + PlutoRunner.DivElement(children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for i ∈ 1:ncols + ] + the_gap = PlutoRunner.DivElement(children = [], style="display: flex; flex: 0 0 $gap%" ) -function Base.show(io, mime::MIME"text/html", tc::TwoColumn) - write(io, """
""") - show(io, mime, tc.left) - write(io, """
""") - write(io, """
""") - show(io, mime, tc.right) - write(io, """
""") - return nothing + # insert gaps between columns + # i.e. [a, b, c] ==> [a, gap, b, gap, c] + children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:end-1] + + PlutoRunner.DivElement(; children, + style="display: flex; flex-direction: row;" + ) end -struct TwoColumnWideLeft{L,R} - left::L - right::R -end +# for backwards compatibility +TwoColumn(a, b; kwargs...) = Columns(a, b; kwargs...) -function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideLeft) - write(io, """
""") - show(io, mime, tc.left) - write(io, """
""") - write(io, """
""") - show(io, mime, tc.right) - write(io, """
""") - return nothing -end +ThreeColumn(a, b, c; kwargs...) = Columns(a, b, c; kwargs...) -struct TwoColumnWideRight{L,R} - left::L - right::R -end +TwoColumnWideLeft(a, b; kwargs...) = Columns(a, b; widths = [66, 34], kwargs...) -function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideRight) - write(io, """
""") - show(io, mime, tc.left) - write(io, """
""") - write(io, """
""") - show(io, mime, tc.right) - write(io, """
""") - return nothing -end - -struct ThreeColumn{L,C,R} - left::L - center::C - right::R -end - -function Base.show(io, mime::MIME"text/html", tc::ThreeColumn) - write(io, """
""") - show(io, mime, tc.left) - write(io, """
""") - write(io, """
""") - show(io, mime, tc.center) - write(io, """
""") - write(io, """
""") - show(io, mime, tc.right) - write(io, """
""") - return nothing -end +TwoColumnWideRight(a, b; kwargs...) = Columns(a, b; widths = [34, 66], kwargs...) """ Provides checkbox to toggle full width and present mode. """ function ChooseDisplayMode(; From a0dcda4c9da63e601ce18600a7b9f1fd3678f950 Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 18 Sep 2024 12:20:19 +0200 Subject: [PATCH 2/8] export Columns, import PlutoRunner --- Project.toml | 2 ++ src/PlutoTeachingTools.jl | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/Project.toml b/Project.toml index 23edd5e..b5f670c 100644 --- a/Project.toml +++ b/Project.toml @@ -8,6 +8,7 @@ Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6" HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2" Latexify = "23fbe1c1-3f47-55db-b15f-69d7ec21a316" Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a" +Pluto = "c3e4b0f8-55cb-11ea-2926-15256bba5781" PlutoLinks = "0ff47ea0-7a50-410d-8455-4348d5de0420" PlutoUI = "7f904dfe-b85e-4ff6-b463-dae2292396a8" @@ -18,4 +19,5 @@ Latexify = "0.15, 0.16" Markdown = "<0.0.1, 1" PlutoLinks = "0.1.5" PlutoUI = "0.7" +Pluto = "0.19.46" julia = "1.6" diff --git a/src/PlutoTeachingTools.jl b/src/PlutoTeachingTools.jl index 6b32b90..bfbd989 100644 --- a/src/PlutoTeachingTools.jl +++ b/src/PlutoTeachingTools.jl @@ -1,5 +1,6 @@ module PlutoTeachingTools +using Pluto: PlutoRunner using Markdown: @md_str, MD, Admonition, LaTeX using HypertextLiteral: @htl, @htl_str using Downloads: download # used in robustlocalresouce.jl @@ -30,7 +31,7 @@ export display_msg_if_fail include("present.jl") export present_button export Foldable -export TwoColumn, ThreeColumn +export Columns, TwoColumn, ThreeColumn export TwoColumnWideLeft, TwoColumnWideRight export ChooseDisplayMode # combines present_button and WidthOverDocs From dcffd7e8d5d097fc3601eea015b473ba73c50dd1 Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 18 Sep 2024 12:25:52 +0200 Subject: [PATCH 3/8] fix ExplicitImports test (DivElement not public) --- src/PlutoTeachingTools.jl | 2 +- src/present.jl | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/PlutoTeachingTools.jl b/src/PlutoTeachingTools.jl index bfbd989..02776b5 100644 --- a/src/PlutoTeachingTools.jl +++ b/src/PlutoTeachingTools.jl @@ -1,6 +1,6 @@ module PlutoTeachingTools -using Pluto: PlutoRunner +using Pluto.PlutoRunner: DivElement using Markdown: @md_str, MD, Admonition, LaTeX using HypertextLiteral: @htl, @htl_str using Downloads: download # used in robustlocalresouce.jl diff --git a/src/present.jl b/src/present.jl index 9ad5702..57dbba1 100644 --- a/src/present.jl +++ b/src/present.jl @@ -29,15 +29,15 @@ function Columns(cols...; widths=nothing, gap = 2) end columns = [ - PlutoRunner.DivElement(children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for i ∈ 1:ncols + DivElement(children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for i ∈ 1:ncols ] - the_gap = PlutoRunner.DivElement(children = [], style="display: flex; flex: 0 0 $gap%" ) + the_gap = DivElement(children = [], style="display: flex; flex: 0 0 $gap%" ) # insert gaps between columns # i.e. [a, b, c] ==> [a, gap, b, gap, c] children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:end-1] - PlutoRunner.DivElement(; children, + DivElement(; children, style="display: flex; flex-direction: row;" ) end From fc1d44b63ed2543d013f71d88020cc26761097fd Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 18 Sep 2024 12:52:55 +0200 Subject: [PATCH 4/8] formatting --- example.jl | 2 +- src/present.jl | 25 ++++++++++++------------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/example.jl b/example.jl index 24f3b85..aef5dd2 100644 --- a/example.jl +++ b/example.jl @@ -297,7 +297,7 @@ You can customize the widths of the columns. """ # ╔═╡ 0e1e62a6-3b78-4415-89fe-fa17279fddbf -Columns(md"Left col", md"Right col", widths = [1/3, 2/3]) +Columns(md"Left col", md"Right col"; widths=[1 / 3, 2 / 3]) # ╔═╡ f43beea9-7a7e-4ee6-8ae6-350640c426aa TwoColumnWideRight(md"Left col", md"Right col") diff --git a/src/present.jl b/src/present.jl index 57dbba1..3789389 100644 --- a/src/present.jl +++ b/src/present.jl @@ -18,28 +18,27 @@ function Base.show(io, mime::MIME"text/html", fld::Foldable) return nothing end -function Columns(cols...; widths=nothing, gap = 2) +function Columns(cols...; widths=nothing, gap=2) ncols = length(cols) ngaps = ncols - 1 if isnothing(widths) - widths = fill(100/ncols, ncols) + widths = fill(100 / ncols, ncols) end if gap > 0 # adjust widths if gaps are desired - widths = widths / sum(widths) * (100 - gap*ngaps) + widths = widths / sum(widths) * (100 - gap * ngaps) end - + columns = [ - DivElement(children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for i ∈ 1:ncols + DivElement(; children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for + i in 1:ncols ] - the_gap = DivElement(children = [], style="display: flex; flex: 0 0 $gap%" ) + the_gap = DivElement(; children=[], style="display: flex; flex: 0 0 $gap%") # insert gaps between columns # i.e. [a, b, c] ==> [a, gap, b, gap, c] - children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:end-1] - - DivElement(; children, - style="display: flex; flex-direction: row;" - ) + children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:(end - 1)] + + return DivElement(; children, style="display: flex; flex-direction: row;") end # for backwards compatibility @@ -47,9 +46,9 @@ TwoColumn(a, b; kwargs...) = Columns(a, b; kwargs...) ThreeColumn(a, b, c; kwargs...) = Columns(a, b, c; kwargs...) -TwoColumnWideLeft(a, b; kwargs...) = Columns(a, b; widths = [66, 34], kwargs...) +TwoColumnWideLeft(a, b; kwargs...) = Columns(a, b; widths=[66, 34], kwargs...) -TwoColumnWideRight(a, b; kwargs...) = Columns(a, b; widths = [34, 66], kwargs...) +TwoColumnWideRight(a, b; kwargs...) = Columns(a, b; widths=[34, 66], kwargs...) """ Provides checkbox to toggle full width and present mode. """ function ChooseDisplayMode(; From b737ba3efb4e6e2568fd934c55bd4cdc9d54c51b Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 2 Oct 2024 17:23:49 +0200 Subject: [PATCH 5/8] use PlutoUI.ExperimentalLayout.Div --- Project.toml | 2 -- src/PlutoTeachingTools.jl | 2 +- src/present.jl | 33 +++++++++++++++++++++++++++++---- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/Project.toml b/Project.toml index b5f670c..23edd5e 100644 --- a/Project.toml +++ b/Project.toml @@ -8,7 +8,6 @@ Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6" HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2" Latexify = "23fbe1c1-3f47-55db-b15f-69d7ec21a316" Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a" -Pluto = "c3e4b0f8-55cb-11ea-2926-15256bba5781" PlutoLinks = "0ff47ea0-7a50-410d-8455-4348d5de0420" PlutoUI = "7f904dfe-b85e-4ff6-b463-dae2292396a8" @@ -19,5 +18,4 @@ Latexify = "0.15, 0.16" Markdown = "<0.0.1, 1" PlutoLinks = "0.1.5" PlutoUI = "0.7" -Pluto = "0.19.46" julia = "1.6" diff --git a/src/PlutoTeachingTools.jl b/src/PlutoTeachingTools.jl index 02776b5..263c51c 100644 --- a/src/PlutoTeachingTools.jl +++ b/src/PlutoTeachingTools.jl @@ -1,6 +1,6 @@ module PlutoTeachingTools -using Pluto.PlutoRunner: DivElement +using PlutoUI.ExperimentalLayout: Div using Markdown: @md_str, MD, Admonition, LaTeX using HypertextLiteral: @htl, @htl_str using Downloads: download # used in robustlocalresouce.jl diff --git a/src/present.jl b/src/present.jl index 3789389..6a1d858 100644 --- a/src/present.jl +++ b/src/present.jl @@ -18,6 +18,31 @@ function Base.show(io, mime::MIME"text/html", fld::Foldable) return nothing end +""" + + Columns(cols...; widths, gap) + +Displays (any number of) columns nicely in Pluto. + +* `widths` should sum to 100 +* `gap` in percent + +### Examples +```julia +# three columns +Columns( + almost(md"here"), + almost(md"there"), + md"bla bla bla" +) + +# two columns with customization +Columns( + almost(md"here"), almost(md"there"), + widths = [40, 60], gap = 2 +) +``` +""" function Columns(cols...; widths=nothing, gap=2) ncols = length(cols) ngaps = ncols - 1 @@ -25,20 +50,20 @@ function Columns(cols...; widths=nothing, gap=2) widths = fill(100 / ncols, ncols) end if gap > 0 # adjust widths if gaps are desired - widths = widths / sum(widths) * (100 - gap * ngaps) + widths = widths / sum(widths) * (sum(widths) - gap * ngaps) end columns = [ - DivElement(; children=[cols[i]], style="display: flex; flex: 0 1 $(widths[i])%") for + Div([cols[i]], style=Dict("flex" => "0 1 $(widths[i])%")) for i in 1:ncols ] - the_gap = DivElement(; children=[], style="display: flex; flex: 0 0 $gap%") + the_gap = Div([], style=Dict("flex" => "0 0 $gap%")) # insert gaps between columns # i.e. [a, b, c] ==> [a, gap, b, gap, c] children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:(end - 1)] - return DivElement(; children, style="display: flex; flex-direction: row;") + return Div(children, style=Dict("display" => "flex", "flex-direction" => "row")) end # for backwards compatibility From 6b86e3c20177ee7731aa95947272453558ef3b81 Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Wed, 2 Oct 2024 17:44:27 +0200 Subject: [PATCH 6/8] Update example.jl --- example.jl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example.jl b/example.jl index aef5dd2..827c763 100644 --- a/example.jl +++ b/example.jl @@ -297,7 +297,7 @@ You can customize the widths of the columns. """ # ╔═╡ 0e1e62a6-3b78-4415-89fe-fa17279fddbf -Columns(md"Left col", md"Right col"; widths=[1 / 3, 2 / 3]) +Columns(md"Left col", md"Right col"; widths=[33, 66]) # ╔═╡ f43beea9-7a7e-4ee6-8ae6-350640c426aa TwoColumnWideRight(md"Left col", md"Right col") From 4d5850349bdc67ab0f1f54530238b54c3af376ab Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Fri, 4 Oct 2024 08:52:26 +0200 Subject: [PATCH 7/8] remove empty line --- src/present.jl | 1 - 1 file changed, 1 deletion(-) diff --git a/src/present.jl b/src/present.jl index 6651de7..a72b884 100644 --- a/src/present.jl +++ b/src/present.jl @@ -8,7 +8,6 @@ end Foldable(title, content) = details(title, content) - """ Columns(cols...; widths, gap) From 6d715bcb7b9d4796bedaf8947885728f68058bc4 Mon Sep 17 00:00:00 2001 From: Fabian Greimel Date: Fri, 4 Oct 2024 08:59:01 +0200 Subject: [PATCH 8/8] bump version --- Project.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Project.toml b/Project.toml index 23edd5e..bd572c2 100644 --- a/Project.toml +++ b/Project.toml @@ -1,7 +1,7 @@ name = "PlutoTeachingTools" uuid = "661c6b06-c737-4d37-b85c-46df65de6f69" authors = ["Eric Ford and contributors"] -version = "0.3.0" +version = "0.3.1" [deps] Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6"