Skip to content

Commit a8c2c23

Browse files
tvdeyentvdeyen
authored
Merge pull request #2893 from AlchemyCMS/menubar-inline-styles
Use inline styles for menubar component
2 parents 06fffe4 + 98ca8f8 commit a8c2c23

File tree

5 files changed

+131
-110
lines changed

5 files changed

+131
-110
lines changed

‎app/assets/config/alchemy_manifest.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
//= link alchemy/admin/all.css
22
//= link alchemy/admin/all.js
33
//= link alchemy/preview.js
4-
//= link alchemy/menubar.css
54
//= link alchemy/print.css
65
//= link alchemy/welcome.css
76
//= link tinymce/plugins/alchemy_link/plugin.min.js

‎app/assets/stylesheets/alchemy/menubar.scss‎

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎app/javascript/menubar.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎app/views/alchemy/_menubar.html.erb‎

Lines changed: 126 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,133 @@
11
<% if !Alchemy::Current.preview_page? && @page && can?(:edit_content, @page) %>
22
<alchemy-menubar>
33
<template>
4-
<%= stylesheet_link_tag("alchemy/menubar") %>
5-
<div id="alchemy_menubar" data-turbo="false">
6-
<ul>
7-
<li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
8-
<li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>
9-
<li>
10-
<%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
11-
<%= button_tag Alchemy.t(:logout) %>
12-
<% end %>
13-
</li>
14-
</ul>
4+
<style>
5+
.menubar {
6+
--icon-size: 24px;
7+
--panel-width: 525px;
8+
--border-radius: 3px;
9+
--left-offset: 0px;
10+
display: flex;
11+
position: fixed;
12+
top: 0;
13+
left: calc(-1 * (var(--panel-width) - var(--left-offset)));
14+
z-index: 10000;
15+
background: #214166;
16+
transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
17+
box-shadow: 0 0 0 1px #fff;
18+
box-sizing: border-box;
19+
border-bottom-right-radius: var(--border-radius);
20+
padding: 12px 16px 12px;
21+
gap: 12px;
22+
justify-content: space-between;
23+
align-items: center;
24+
flex-wrap: nowrap;
25+
overflow: hidden;
26+
font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
27+
"Lucida Sans", Verdana, Tahoma, sans-serif;
28+
font-size: 13px;
29+
}
30+
31+
.menubar * {
32+
box-sizing: border-box;
33+
margin: 0;
34+
padding: 0;
35+
}
36+
37+
.menubar:hover,
38+
.menubar:focus-within {
39+
left: 0;
40+
}
41+
42+
.menubar > svg {
43+
width: var(--icon-size);
44+
height: var(--icon-size);
45+
flex-shrink: 0;
46+
margin-left: 4px;
47+
}
48+
49+
.menubar .button {
50+
display: inline-flex;
51+
align-items: center;
52+
justify-content: center;
53+
gap: 8px;
54+
font-size: inherit;
55+
font-weight: 700;
56+
cursor: pointer;
57+
border-radius: var(--border-radius);
58+
background-color: transparent;
59+
border: 1px solid rgba(255, 255, 255, 0.5);
60+
color: #fff;
61+
margin: 0;
62+
padding: 0.75em 1.5em;
63+
appearance: none;
64+
transition: all 250ms;
65+
-webkit-font-smoothing: antialiased;
66+
-moz-osx-font-smoothing: grayscale;
67+
text-decoration: none;
68+
white-space: nowrap;
69+
}
70+
71+
.menubar .button:hover {
72+
text-decoration: none;
73+
background-color: rgba(0, 0, 0, 0.25);
74+
border-color: rgba(255, 255, 255, 0.75)
75+
}
76+
77+
.menubar .button:active {
78+
box-shadow: inset 0px 1px 1px -1px #333;
79+
}
80+
81+
.menubar .button:focus {
82+
outline: solid 2px #eca96e;
83+
outline-offset: 2px;
84+
}
85+
</style>
86+
87+
<div class="menubar" data-turbo="false">
88+
<%= link_to alchemy.admin_dashboard_url, class: "button" do %>
89+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
90+
<path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
91+
</svg>
92+
<%= Alchemy.t(:to_alchemy) %>
93+
<% end %>
94+
<%= link_to alchemy.edit_admin_page_url(@page), class: "button" do %>
95+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
96+
<path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"></path>
97+
</svg>
98+
<%= Alchemy.t(:edit_page) %>
99+
<% end %>
100+
<%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
101+
<%= button_tag class: "button" do %>
102+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
103+
<path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>
104+
</svg>
105+
<%= Alchemy.t(:logout) %>
106+
<% end %>
107+
<% end %>
108+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
109+
<path fill="#fff" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/>
110+
</svg>
15111
</div>
16112
</template>
17-
</alchemy-menubar>
18113

19-
<%= javascript_include_tag('menubar', type: "module") %>
114+
<script type="module">
115+
class Menubar extends HTMLElement {
116+
constructor() {
117+
super()
118+
const template = this.querySelector("template")
119+
const attachedShadowRoot = this.attachShadow({ mode: "open" })
120+
attachedShadowRoot.appendChild(template.content.cloneNode(true))
121+
}
122+
123+
connectedCallback() {
124+
const bar = this.shadowRoot.querySelector(".menubar")
125+
const width = bar.offsetWidth
126+
bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
127+
}
128+
}
129+
130+
customElements.define("alchemy-menubar", Menubar)
131+
</script>
132+
</alchemy-menubar>
20133
<% end %>

‎spec/features/page_feature_spec.rb‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,25 +114,25 @@
114114

115115
it "a link to the admin area" do
116116
within find("alchemy-menubar").shadow_root do
117-
expect(page).to have_selector("li a[href='#{alchemy.admin_dashboard_url(host: host)}']")
117+
expect(page).to have_selector("a[href='#{alchemy.admin_dashboard_url(host: host)}']")
118118
end
119119
end
120120

121121
it "a link to edit the current page" do
122122
within find("alchemy-menubar").shadow_root do
123123
expect(page).to \
124-
have_selector("li a[href='#{alchemy.edit_admin_page_url(public_page, host: host)}']")
124+
have_selector("a[href='#{alchemy.edit_admin_page_url(public_page, host: host)}']")
125125
end
126126
end
127127

128128
it "a form and button to logout of alchemy" do
129129
within find("alchemy-menubar").shadow_root do
130130
expect(page).to \
131-
have_selector("li form[action='#{Alchemy.logout_path}'][method='post']")
131+
have_selector("form[action='#{Alchemy.logout_path}'][method='post']")
132132
expect(page).to \
133-
have_selector("li form[action='#{Alchemy.logout_path}'] > button[type='submit']")
133+
have_selector("form[action='#{Alchemy.logout_path}'] > button[type='submit']")
134134
expect(page).to \
135-
have_selector("li form[action='#{Alchemy.logout_path}'] > input[type='hidden'][name='_method'][value='#{Alchemy.logout_method}']")
135+
have_selector("form[action='#{Alchemy.logout_path}'] > input[type='hidden'][name='_method'][value='#{Alchemy.logout_method}']")
136136
end
137137
end
138138
end

0 commit comments

Comments
 (0)