Skip to content

Commit b284627

Browse files
MBaussonMaximilien BaussonB-Rass
authored
Add a + button in the sidebar hovering an item (#402)
* wip * wip * wip * Small design improvments --------- Co-authored-by: Maximilien Bausson <[email protected]> Co-authored-by: B_Rass <[email protected]>
1 parent 3f41ead commit b284627

File tree

2 files changed

+120
-26
lines changed

2 files changed

+120
-26
lines changed

‎app/assets/stylesheets/application.scss

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -748,14 +748,42 @@ body {
748748
}
749749

750750
&-links {
751+
&-item {
752+
display: flex;
753+
align-items: center;
754+
gap: 1rem;
755+
justify-content: space-between;
756+
757+
.mydcim-sidebar-links-create {
758+
visibility: hidden;
759+
}
760+
761+
&:hover {
762+
.mydcim-sidebar-links-create {
763+
visibility: visible;
764+
}
765+
766+
.mydcim-sidebar-links-link {
767+
background-color: var(--bs-primary-bg-subtle);
768+
769+
&.mydcim-sidebar-links-link-exploitation {
770+
background-color: var(--bs-success-bg-subtle);
771+
}
772+
773+
&.mydcim-sidebar-links-link-warning {
774+
background-color: var(--bs-warning-bg-subtle);
775+
}
776+
}
777+
}
778+
}
779+
751780
&-link {
752781
padding: .1875rem .5rem;
753782
margin-top: .125rem;
754783
margin-left: 1.125rem;
755784
color: var(--bs-body-color);
756785
text-decoration: none;
757786

758-
&:hover,
759787
&.active,
760788
&:focus {
761789
background-color: var(--bs-primary-bg-subtle);

‎app/views/layouts/_sidebar.html.erb

Lines changed: 91 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<aside id="mydcim-inventories-sidebar"
2-
class="<%= class_names("mydcim-sidebar offcanvas-lg offcanvas-start border-end col-lg-2 p-0 w-auto bg-body-secondary border-secondary-subtle", offcanvas: hide_inventories_sidebar?) %>"
2+
class="<%= class_names("mydcim-sidebar offcanvas-lg offcanvas-start border-end col-lg-2 pl-0 w-auto bg-body-secondary border-secondary-subtle", offcanvas: hide_inventories_sidebar?) %>"
33
tabindex="-1" aria-labelledby="sidebarMenuLabel">
44
<div class="<%= class_names("offcanvas-header", "d-flex": hide_inventories_sidebar?) %>">
55
<button type="button" class="btn-close ms-auto" data-bs-dismiss="offcanvas" data-bs-target="#mydcim-inventories-sidebar" aria-label="<%= t("action.close") %>"></button>
@@ -13,35 +13,50 @@
1313
<%= t(".location.title") %>
1414
</strong>
1515
<ul class="list-unstyled fw-normal pb-2 small">
16-
<li>
16+
<li class="mydcim-sidebar-links-item">
1717
<%= link_to Site.model_name.human.pluralize,
1818
sites_path,
1919
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
2020
active: controller.controller_name == "sites") %>
21+
<%= link_to new_site_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
22+
<span class="bi bi-plus-lg"></span>
23+
<% end %>
2124
</li>
22-
<li>
25+
<li class="mydcim-sidebar-links-item">
2326
<%= link_to Room.model_name.human.pluralize,
2427
rooms_path,
2528
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
2629
active: controller.controller_name == "rooms" && !hide_inventories_sidebar?) %>
30+
<%= link_to new_room_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
31+
<span class="bi bi-plus-lg"></span>
32+
<% end %>
2733
</li>
28-
<li>
34+
<li class="mydcim-sidebar-links-item">
2935
<%= link_to Islet.model_name.human.pluralize,
3036
islets_path,
3137
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
3238
active: controller.controller_name == "islets") %>
39+
<%= link_to new_islet_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
40+
<span class="bi bi-plus-lg"></span>
41+
<% end %>
3342
</li>
34-
<li>
43+
<li class="mydcim-sidebar-links-item">
3544
<%= link_to t(".location.bays"),
3645
bays_path,
3746
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
3847
active: controller.controller_name == "bays") %>
48+
<%= link_to new_bay_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
49+
<span class="bi bi-plus-lg"></span>
50+
<% end %>
3951
</li>
40-
<li>
52+
<li class="mydcim-sidebar-links-item">
4153
<%= link_to Frame.model_name.human.pluralize,
4254
frames_path,
4355
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
4456
active: controller.controller_name == "frames") %>
57+
<%= link_to new_frame_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
58+
<span class="bi bi-plus-lg"></span>
59+
<% end %>
4560
</li>
4661
</ul>
4762
</li>
@@ -52,23 +67,32 @@
5267
<%= t(".equipment.title") %>
5368
</strong>
5469
<ul class="list-unstyled fw-normal pb-2 small">
55-
<li>
70+
<li class="mydcim-sidebar-links-item">
5671
<%= link_to Server.model_name.human,
5772
servers_path,
5873
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
5974
active: controller.controller_name == "servers") %>
75+
<%= link_to new_server_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
76+
<span class="bi bi-plus-lg"></span>
77+
<% end %>
6078
</li>
61-
<li>
79+
<li class="mydcim-sidebar-links-item">
6280
<%= link_to t("air_conditioners.index.title"),
6381
air_conditioners_path,
6482
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
6583
active: controller.controller_name == "air_conditioners") %>
84+
<%= link_to new_air_conditioner_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
85+
<span class="bi bi-plus-lg"></span>
86+
<% end %>
6687
</li>
67-
<li>
88+
<li class="mydcim-sidebar-links-item">
6889
<%= link_to t("power_distribution_units.index.title"),
6990
power_distribution_units_path,
7091
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
7192
active: controller.controller_name == "power_distribution_units") %>
93+
<%= link_to new_power_distribution_unit_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
94+
<span class="bi bi-plus-lg"></span>
95+
<% end %>
7296
</li>
7397
</ul>
7498
</li>
@@ -79,80 +103,113 @@
79103
<%= t(".features.title") %>
80104
</strong>
81105
<ul class="list-unstyled fw-normal pb-2 small">
82-
<li>
106+
<li class="mydcim-sidebar-links-item">
83107
<%= link_to Modele.model_name.human.pluralize,
84108
modeles_path,
85109
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
86110
active: controller.controller_name == "modeles") %>
111+
<%= link_to new_modele_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
112+
<span class="bi bi-plus-lg"></span>
113+
<% end %>
87114
</li>
88-
<li>
115+
<li class="mydcim-sidebar-links-item">
89116
<%= link_to Category.model_name.human.pluralize,
90117
categories_path,
91118
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
92119
active: controller.controller_name == "categories") %>
120+
<%= link_to new_category_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
121+
<span class="bi bi-plus-lg"></span>
122+
<% end %>
93123
</li>
94-
<li>
124+
<li class="mydcim-sidebar-links-item">
95125
<%= link_to Architecture.model_name.human.pluralize,
96126
architectures_path,
97127
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
98128
active: controller.controller_name == "architectures") %>
129+
<%= link_to new_architecture_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
130+
<span class="bi bi-plus-lg"></span>
131+
<% end %>
99132
</li>
100-
<li>
133+
<li class="mydcim-sidebar-links-item">
101134
<%= link_to Manufacturer.model_name.human.pluralize,
102135
manufacturers_path,
103136
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
104137
active: controller.controller_name == "manufacturers") %>
138+
<%= link_to new_manufacturer_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
139+
<span class="bi bi-plus-lg"></span>
140+
<% end %>
105141
</li>
106-
<li>
142+
<li class="mydcim-sidebar-links-item">
107143
<%= link_to Stack.model_name.human.pluralize,
108144
stacks_path,
109145
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
110146
active: controller.controller_name == "stacks") %>
147+
<%= link_to new_stack_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
148+
<span class="bi bi-plus-lg"></span>
149+
<% end %>
111150
</li>
112-
<li>
151+
<li class="mydcim-sidebar-links-item">
113152
<%= link_to CardType.model_name.human(count: 2),
114153
card_types_path,
115154
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
116155
active: controller.controller_name == "card_types") %>
156+
<%= link_to new_card_type_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
157+
<span class="bi bi-plus-lg"></span>
158+
<% end %>
117159
</li>
118-
<li>
160+
<li class="mydcim-sidebar-links-item">
119161
<%= link_to PortType.model_name.human(count: 2),
120162
port_types_path,
121163
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
122164
active: controller.controller_name == "port_types") %>
165+
<%= link_to new_port_type_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
166+
<span class="bi bi-plus-lg"></span>
167+
<% end %>
123168
</li>
124169
</ul>
125170
</li>
126171
<!-- Exploitation -->
127172
<li class="mydcim-sidebar-links-group py-2">
128173
<strong class="mydcim-sidebar-links-heading d-flex align-items-center fw-semibold">
129-
<i class="bi bi-briefcase me-2 text-success"></i>
174+
<i class="bi bi-briefcase me-2"></i>
130175
<%= t(".operating.title") %>
131176
</strong>
132177
<ul class="list-unstyled fw-normal pb-2 small">
133-
<li>
178+
<li class="mydcim-sidebar-links-item">
134179
<%= link_to Domaine.model_name.human.pluralize,
135180
domaines_path,
136181
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-exploitation d-inline-block rounded",
137182
active: controller.controller_name == "domaines") %>
183+
<%= link_to new_domaine_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
184+
<span class="bi bi-plus-lg"></span>
185+
<% end %>
138186
</li>
139-
<li>
187+
<li class="mydcim-sidebar-links-item">
140188
<%= link_to Gestion.model_name.human.pluralize,
141189
gestions_path,
142190
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-exploitation d-inline-block rounded",
143191
active: controller.controller_name == "gestions") %>
192+
<%= link_to new_gestion_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
193+
<span class="bi bi-plus-lg"></span>
194+
<% end %>
144195
</li>
145-
<li>
196+
<li class="mydcim-sidebar-links-item">
146197
<%= link_to Cluster.model_name.human.pluralize,
147198
clusters_path,
148199
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-exploitation d-inline-block rounded",
149200
active: controller.controller_name == "clusters") %>
201+
<%= link_to new_cluster_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
202+
<span class="bi bi-plus-lg"></span>
203+
<% end %>
150204
</li>
151-
<li>
205+
<li class="mydcim-sidebar-links-item">
152206
<%= link_to Color.model_name.human.pluralize,
153207
colors_path,
154208
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-exploitation d-inline-block rounded",
155209
active: controller.controller_name == "colors") %>
210+
<%= link_to new_color_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
211+
<span class="bi bi-plus-lg"></span>
212+
<% end %>
156213
</li>
157214
</ul>
158215
</li>
@@ -163,7 +220,7 @@
163220
<%= t(".connection.title") %>
164221
</strong>
165222
<ul class="list-unstyled fw-normal pb-2 small">
166-
<li>
223+
<li class="mydcim-sidebar-links-item">
167224
<%= link_to Connection.model_name.human.pluralize,
168225
cables_path,
169226
class: class_names("mydcim-sidebar-links-link d-inline-block rounded",
@@ -178,23 +235,32 @@
178235
<%= t(".contacts.title") %>
179236
</strong>
180237
<ul class="list-unstyled fw-normal pb-2 small">
181-
<li>
238+
<li class="mydcim-sidebar-links-item">
182239
<%= link_to Contact.model_name.human.pluralize,
183240
contacts_path,
184241
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-warning d-inline-block rounded",
185242
active: controller.controller_name == "contacts") %>
243+
<%= link_to new_contact_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
244+
<span class="bi bi-plus-lg"></span>
245+
<% end %>
186246
</li>
187-
<li>
247+
<li class="mydcim-sidebar-links-item">
188248
<%= link_to ContactRole.model_name.human.pluralize,
189249
contact_roles_path,
190250
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-warning d-inline-block rounded",
191251
active: controller.controller_name == "contact_roles") %>
252+
<%= link_to new_contact_role_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
253+
<span class="bi bi-plus-lg"></span>
254+
<% end %>
192255
</li>
193-
<li>
256+
<li class="mydcim-sidebar-links-item">
194257
<%= link_to ContactAssignment.model_name.human.pluralize,
195258
contact_assignments_path,
196259
class: class_names("mydcim-sidebar-links-link mydcim-sidebar-links-link-warning d-inline-block rounded",
197260
active: controller.controller_name == "contact_assignments") %>
261+
<%= link_to new_contact_assignment_path, class: "mydcim-sidebar-links-create btn btn-outline-success btn-sm" do %>
262+
<span class="bi bi-plus-lg"></span>
263+
<% end %>
198264
</li>
199265
</ul>
200266
</li>

0 commit comments

Comments
 (0)