Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: fix the Sidebar/Left Menu styling and align with React [MDS-107] #290

Merged
merged 8 commits into from
Jun 16, 2022
Merged

fix: fix the Sidebar/Left Menu styling and align with React [MDS-107] #290

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
50592ac
Sidebar link
alexisdevtailor Jun 14, 2022
b890772
Fix the sidebar styling and align with react
alexisdevtailor Jun 14, 2022
77e3068
Remove unused code
alexisdevtailor Jun 14, 2022
ae7e2bd
Remove duplicate gap
alexisdevtailor Jun 15, 2022
8d961ea
Fix the logo so it is in an external svg file
alexisdevtailor Jun 15, 2022
448b4dd
Fix formatting
alexisdevtailor Jun 15, 2022
b351c71
Fix class value
alexisdevtailor Jun 15, 2022
9b3d797
Rename functions
alexisdevtailor Jun 15, 2022
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
2 changes: 1 addition & 1 deletion lib/moon/autolayouts/top_to_down.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ defmodule Moon.Autolayouts.TopToDown do

def render(assigns) do
~F"""
<div class={"flex flex-col gap-#{@gap} #{@gap} #{@class}"}>
<div class={"flex flex-col #{@gap} #{@class}"}>
Copy link
Collaborator

@theycallmehero theycallmehero Jun 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{"flex flex-col", @gap, @class}

<#slot />
</div>
"""
Expand Down
12 changes: 11 additions & 1 deletion lib/moon/components/chip.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ defmodule Moon.Components.Chip do
prop size, :string, values: ["small", "medium"], default: "medium"
prop is_stroke, :boolean, default: false
prop icon_only, :string
prop variant, :string, values: ["default", "ghost"], default: "default"

def render(assigns) do
~F"""
Expand All @@ -28,6 +29,7 @@ defmodule Moon.Components.Chip do
"flex justify-center items-center gap-2 rounded relative active:scale-90 transition-all text-moon-14",
"hover:text-piccolo-100 hover:bg-piccolo-100 hover:bg-opacity-12 #{@class} #{active_btn_class(@active, @active_class, @inactive_class)}",
set_padding(@size, @left_icon, @right_icon, @icon_only),
set_bg_color(@active, @variant),
"h-8 w-8": @size == "small" && !slot_assigned?(:default),
"h-10 w-10": @size == "medium" && !slot_assigned?(:default),
"shadow-border": @is_stroke && @active,
Expand Down Expand Up @@ -75,8 +77,16 @@ defmodule Moon.Components.Chip do
defp icon_class("medium"), do: "h-6 w-6"

defp active_btn_class(true, active_class, _),
do: "text-piccolo-100 bg-piccolo-100 bg-opacity-12 #{active_class}"
do: "text-piccolo-100 bg-opacity-12 #{active_class}"

defp active_btn_class(false, _, inactive_class),
do: "text-bulma-100 bg-gohan-100 #{inactive_class}"

defp set_bg_color(active, variant) do
Copy link
Collaborator

@theycallmehero theycallmehero Jun 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. It is getter not setter, so function name should be get.
  2. let's please use standard surface class namings:

So bad style "some class list #{some_function(a, b)}"
Good style class={"class list", get_class(a, b), "more classes": c && d}

if variant == "default" do
if active, do: "bg-piccolo-100", else: "bg-gohan-100"
else
"bg-transparent"
end
end
end
43 changes: 4 additions & 39 deletions lib/moon/components/sidebar.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ defmodule Moon.Components.Sidebar do
@moduledoc false

use Moon.StatelessComponent
alias Moon.Assets.Icons.IconChevronLeftRounded
alias Moon.Assets.Icons.IconChevronRightRounded

slot full_logo
slot short_logo
Expand All @@ -14,47 +12,14 @@ defmodule Moon.Components.Sidebar do

def render(assigns) do
~F"""
<div x-data="{ collapsed: false, showBtn: false }" class="flex shrink-0">
<div x-cloak x-show="collapsed" class="flex items-center p-5">
<div class="flex shrink-0">
<div x-cloak class="flex items-center p-5">
<!-- Short logo -->
<#slot name="short_logo" />

<!-- Expand button -->
<div class="ml-2">
<button
type="button"
class="flex items-center justify-center w-6 h-6 rounded-full shadow-lg focus:outline-none"
x-cloak
@click="collapsed = false"
>
<span class="sr-only">Expand sidebar</span>
<IconChevronRightRounded font_size="0.75rem" />
</button>
</div>
</div>

<div
@mouseover="showBtn = true"
@mouseout="showBtn = false"
x-show="!collapsed"
class="flex flex-col"
style={"width: #{@open_width};"}
>
<div class={"relative flex flex-col h-screen py-5 #{@background_color}"}>
<!-- Collapse button -->
<div class="absolute top-0 right-0">
<button
type="button"
class="flex items-center justify-center w-6 h-6 -mr-3 transition rounded-full shadow-lg mt-7 focus:outline-none bg-gohan-100"
:class="{ 'opacity-100': showBtn, 'opacity-0': !showBtn }"
x-cloak
@click="collapsed = true"
>
<span class="sr-only">Collapse sidebar</span>
<IconChevronLeftRounded font_size="0.75rem" />
</button>
</div>

<div class="flex flex-col" style={"width: #{@open_width};"}>
<div class={"relative flex flex-col h-screen #{@background_color}"}>
<!-- Full logo -->
<div class="flex items-center shrink-0 px-5">
<#slot name="full_logo" />
Expand Down
11 changes: 11 additions & 0 deletions lib/moon_web/components/large_logo.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
defmodule MoonWeb.Components.LargeLogo do
@moduledoc false

use Moon.StatelessComponent

def render(assigns) do
~F"""
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please put this to separate SVG file - otherwise caching etc does not work.

Because LiveViews are server side rendered, each time something changes, this means a lot more network traffic.

<img src="/moon/assets/svgs/moon_web/large_icon.svg">
"""
end
end
Loading