admin/core
1
0
Fork 0
mirror of https://github.com/jbcr/core.git synced 2026-04-02 06:12:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

rewrite of topbar links and btn-groups. Now tab-able!

Browse Source
This commit is contained in:
Sebastiaan Bonardt
2019-07-29 16:39:11 +02:00
parent fdc1a6a81e
commit ddcf7c7711
2 changed files with 162 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/js/app/toolbar/Components/Toolbar.vue
View File

@@ -4,55 +4,64 @@
:class="contrast ? 'is-light' : 'is-dark'"
role="toolbar"
>
<div class="toolbar-item toolbar-item__brand">
<img src="/assets/images/bolt_logo_dashboard.svg" alt="⚙️ Bolt" height="28" />
<ul class="toolbar-menu">
<li>
<a href="https://bolt.cm/" target="_blank">
<i class="fas fa-globe-americas fa-fw"></i>
Visit Bolt.cm
</a>
</li>
<li>
<a href="https://docs.bolt.cm/" target="_blank">
<i class="fas fa-globe-americas fa-fw"></i>
{{ labels['about.bolt_documentation'] }}
</a>
</li>
</ul>
<div class="toolbar-item btn-group toolbar-item__brand">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn brand__dropdown-toggler dropdown-toggle"><img src="/assets/images/bolt_logo_dashboard.svg" alt="⚙️ Bolt" height="28" /></button>
<div class="new-item__dropdown dropdown-menu">
<ul class="toolbar-menu">
<li>
<a href="https://bolt.cm/" target="_blank">
<i class="fas fa-globe-americas fa-fw"></i>
Visit Bolt.cm
</a>
</li>
<li>
<a href="https://docs.bolt.cm/" target="_blank">
<i class="fas fa-globe-americas fa-fw"></i>
{{ labels['about.bolt_documentation'] }}
</a>
</li>
</ul>
</div>
</div>
<div class="toolbar-item toolbar-item__site">
<a href="/" target="_blank">
<i class="fas fa-sign-out-alt mr-2"></i>{{ labels['action.view_site'] }}
<i class="fas fa-sign-out-alt"></i>{{ labels['action.view_site'] }}
</a>
</div>
<div class="toolbar-item toolbar-item__new">
<i class="fas fa-magic mr-2"></i>{{ labels['action.create_new'] }} …
<ul class="toolbar-menu">
<li v-for="(item, index) in createMenu" :key="index">
<a :href="item.link_new"><i :class="`fa fa-fw ${item.icon}`"></i> {{ item.singular_name }}</a>
</li>
</ul>
<div class="toolbar-item btn-group toolbar-item__new">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn new-item__dropdown-toggler dropdown-toggle"><i class="fas fa-magic"></i>{{ labels['action.create_new'] }}…</button>
<div class="new-item__dropdown dropdown-menu">
<ul>
<li v-for="(item, index) in createMenu" :key="index">
<a :href="item.link_new"><i :class="`fa fa-fw ${item.icon}`"></i> {{ item.singular_name }}</a>
</li>
</ul>
</div>
</div>
<div class="toolbar-item toolbar-item__profile">
<i class="fas fa-user mr-2"></i>{{ labels['general.greeting'] }}
<ul class="toolbar-menu">
<li>
<a :href="backend_prefix + 'profile-edit'">
<i class="fas fa-user-edit fa-fw"></i>
{{ labels['action.edit_profile'] }}
</a>
</li>
<li>
<a :href="backend_prefix + 'logout'">
<i class="fas fa-sign-out-alt fa-fw"></i>
{{ labels['action.logout'] }}
</a>
</li>
<div class="toolbar-item btn-group toolbar-item__profile">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn user profile__dropdown-toggler dropdown-toggle"><i class="fas fa-user"></i>{{ labels['general.greeting'] }}</button>
<div class="profile__dropdown dropdown-menu dropdown-menu-right">
<ul>
<li>
<a :href="backend_prefix + 'profile-edit'">
<i class="fas fa-user-edit fa-fw"></i>
{{ labels['action.edit_profile'] }}
</a>
</li>
<li>
<a :href="backend_prefix + 'logout'">
<i class="fas fa-sign-out-alt fa-fw"></i>
{{ labels['action.logout'] }}
</a>
</li>
</ul>
</div>
</div>
</div>
</template>

172
assets/scss/modules/admin/_toolbar.scss
View File

@@ -43,22 +43,75 @@
display: flex;
align-items: center;
justify-content: center;
padding: $spacer*0.8125 $spacer;
font-size: 0.875rem;
padding: 0;
a {
font-size: 0.9375rem;
padding: $spacer*0.625;
display: block;
color: var(--foreground);
a:hover {
text-decoration: none;
&:hover, &:active, &:focus {
@include darken(--admin-sidebar, 0.02);
color: var(--admin-sidebar-icon);
text-decoration: none;
}
}
&__brand {
padding: $spacer*0.8125;
.is-slim & {
padding: $spacer*0.8125 $spacer*1.125;
&:hover {
.dropdown-menu {
display: block;
}
svg {
height: $admin-toolbar-height / 1.5;
width: auto;
}
i, .fas {
margin-right: 0.45rem;
}
.dropdown-menu {
margin: 0;
padding: 0;
min-width: 220px;
top: calc(100% - 1px);
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
color: var(--shade);
&:hover, &:active, &:focus {
@include darken(--admin-sidebar, 0.02);
color: var(--admin-sidebar-icon);
text-decoration: none;
}
}
i, .fas {
margin-right: 0.25rem;
}
}
.dropdown-toggle {
color: var(--foreground);
height: 100%;
padding: 0.625rem 1rem;
&:hover, &:active, &:focus {
@include darken(--admin-sidebar, 0.02);
}
}
&__brand {
.is-slim & {
}
svg, img {
margin-right: 0.25rem;
}
.dropdown-toggle {
padding: 0 1rem;
&:after {
vertical-align: middle;
}
}
}
@@ -66,62 +119,63 @@
margin-left: auto;
}
&__new {
display: none;
@media screen and (min-width: 440px) {
display: flex;
&__site a {
height: 100%;
padding: 0.625rem 1rem;
i, .fas {
margin-right: 0.25rem;
}
}
&:hover {
opacity: 1;
// &:hover {
// opacity: 1;
@include darken(--admin-toolbar, 0.2);
// @include darken(--admin-toolbar, 0.2);
> .toolbar-menu {
visibility: visible;
height: auto;
}
}
// > .toolbar-menu {
// visibility: visible;
// height: auto;
// }
// }
}
.toolbar-menu {
background: var(--admin-sidebar-menu);
border-radius: 0 $border-radius $border-radius 0;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.1);
color: var(--shade);
// .toolbar-menu {
// background: var(--admin-sidebar-menu);
// border-radius: 0 $border-radius $border-radius 0;
// box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
// border: 1px solid rgba(0, 0, 0, 0.1);
// color: var(--shade);
font-weight: $font-weight-normal;
font-size: 100%;
visibility: hidden;
height: 0;
list-style: none;
position: absolute;
left: 0;
top: 100%;
width: $admin-sidebar-width;
margin: 0;
padding: 0;
// font-weight: $font-weight-normal;
// font-size: 100%;
// visibility: hidden;
// height: 0;
// list-style: none;
// position: absolute;
// left: 0;
// top: 100%;
// width: $admin-sidebar-width;
// margin: 0;
// padding: 0;
li {
a {
padding: $spacer / 2;
display: block;
color: var(--shade);
// li {
// a {
// padding: $spacer / 2;
// display: block;
// color: var(--shade);
&:hover {
@include darken(--admin-sidebar, 0.02);
color: var(--admin-sidebar-icon);
text-decoration: none;
}
}
}
}
.toolbar-item__profile {
.toolbar-menu {
left: auto;
right: 0;
}
}
// &:hover {
// @include darken(--admin-sidebar, 0.02);
// color: var(--admin-sidebar-icon);
// text-decoration: none;
// }
// }
// }
// }
// .toolbar-item__profile {
// .toolbar-menu {
// left: auto;
// right: 0;
// }
// }
}