vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Menu cosmetics

pull/132/head
cagataycivici 2019-12-09 14:24:12 +03:00
parent 8ff1ca42ad
commit 247535e3bd
2 changed files with 118 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
src/AppMenu.vue
View File

@ -1,193 +1,153 @@
<template>
<div :class="['layout-sidebar', {'active': active}]">
<div class="layout-menu">
<a tabindex="0" @click="toggleMenu($event, 0)" @keydown.enter="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
<span>
<img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
<img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" />
<span>Input</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 0">
<div>
<router-link to="/autocomplete">&#9679; AutoComplete</router-link>
<router-link to="/calendar">&#9679; Calendar</router-link>
<router-link to="/checkbox">&#9679; Checkbox</router-link>
<router-link to="/chips">&#9679; Chips</router-link>
<router-link to="/dropdown">&#9679; Dropdown</router-link>
<router-link to="/editor">&#9679; Editor</router-link>
<router-link to="/inputgroup">&#9679; InputGroup</router-link>
<router-link to="/inputmask">&#9679; InputMask</router-link>
<router-link to="/inputswitch">&#9679; InputSwitch</router-link>
<router-link to="/inputtext">&#9679; InputText</router-link>
<router-link to="/listbox">&#9679; Listbox</router-link>
<router-link to="/multiselect">&#9679; MultiSelect</router-link>
<router-link to="/password">&#9679; Password</router-link>
<router-link to="/radiobutton">&#9679; RadioButton</router-link>
<router-link to="/rating">&#9679; Rating</router-link>
<router-link to="/selectbutton">&#9679; SelectButton</router-link>
<router-link to="/slider">&#9679; Slider</router-link>
<router-link to="/spinner">&#9679; Spinner</router-link>
<router-link to="/textarea">&#9679; Textarea</router-link>
<router-link to="/togglebutton">&#9679; ToggleButton</router-link>
<router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/autocomplete">&#9679; AutoComplete</router-link>
<router-link to="/calendar">&#9679; Calendar</router-link>
<router-link to="/checkbox">&#9679; Checkbox</router-link>
<router-link to="/chips">&#9679; Chips</router-link>
<router-link to="/dropdown">&#9679; Dropdown</router-link>
<router-link to="/editor">&#9679; Editor</router-link>
<router-link to="/inputgroup">&#9679; InputGroup</router-link>
<router-link to="/inputmask">&#9679; InputMask</router-link>
<router-link to="/inputswitch">&#9679; InputSwitch</router-link>
<router-link to="/inputtext">&#9679; InputText</router-link>
<router-link to="/listbox">&#9679; Listbox</router-link>
<router-link to="/multiselect">&#9679; MultiSelect</router-link>
<router-link to="/password">&#9679; Password</router-link>
<router-link to="/radiobutton">&#9679; RadioButton</router-link>
<router-link to="/rating">&#9679; Rating</router-link>
<router-link to="/selectbutton">&#9679; SelectButton</router-link>
<router-link to="/slider">&#9679; Slider</router-link>
<router-link to="/spinner">&#9679; Spinner</router-link>
<router-link to="/textarea">&#9679; Textarea</router-link>
<router-link to="/togglebutton">&#9679; ToggleButton</router-link>
<router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 1)" @keydown.enter="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
<span>
<img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" />
<img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" />
<span>Button</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 1">
<div>
<router-link to="/button">&#9679; Button</router-link>
<router-link to="/splitbutton">&#9679; SplitButton</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/button">&#9679; Button</router-link>
<router-link to="/splitbutton">&#9679; SplitButton</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 2)" @keydown.enter="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}">
<span>
<img alt="data" class="layout-menu-icon-inactive" src="./assets/images/menu/data.svg" />
<img alt="data" class="layout-menu-icon-active" src="./assets/images/menu/data-active.svg" />
<span>Data</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 2">
<div>
<router-link to="/carousel">&#9679; Carousel</router-link>
<router-link to="/datatable">&#9679; DataTable</router-link>
<router-link to="/dataview">&#9679; DataView</router-link>
<router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
<router-link to="/orderlist">&#9679; OrderList</router-link>
<router-link to="/organizationchart">&#9679; Org Chart</router-link>
<router-link to="/paginator">&#9679; Paginator</router-link>
<router-link to="/picklist">&#9679; PickList</router-link>
<router-link to="/tree">&#9679; Tree</router-link>
<router-link to="/treetable">&#9679; TreeTable</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/carousel">&#9679; Carousel</router-link>
<router-link to="/datatable">&#9679; DataTable</router-link>
<router-link to="/dataview">&#9679; DataView</router-link>
<router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
<router-link to="/orderlist">&#9679; OrderList</router-link>
<router-link to="/organizationchart">&#9679; Org Chart</router-link>
<router-link to="/paginator">&#9679; Paginator</router-link>
<router-link to="/picklist">&#9679; PickList</router-link>
<router-link to="/tree">&#9679; Tree</router-link>
<router-link to="/treetable">&#9679; TreeTable</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 3)" @keydown.enter="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}">
<span>
<img alt="panel" class="layout-menu-icon-inactive" src="./assets/images/menu/panel.svg" />
<img alt="panel" class="layout-menu-icon-active" src="./assets/images/menu/panel-active.svg" />
<span>Panel</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 3">
<div>
<router-link to="/accordion">&#9679; Accordion</router-link>
<router-link to="/card">&#9679; Card</router-link>
<router-link to="/deferredcontent">&#9679; Deferred</router-link>
<router-link to="/fieldset">&#9679; Fieldset</router-link>
<router-link to="/flexgrid">&#9679; FlexGrid</router-link>
<router-link to="/panel">&#9679; Panel</router-link>
<router-link to="/tabview">&#9679; TabView</router-link>
<router-link to="/toolbar">&#9679; Toolbar</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/accordion">&#9679; Accordion</router-link>
<router-link to="/card">&#9679; Card</router-link>
<router-link to="/deferredcontent">&#9679; Deferred</router-link>
<router-link to="/fieldset">&#9679; Fieldset</router-link>
<router-link to="/flexgrid">&#9679; FlexGrid</router-link>
<router-link to="/panel">&#9679; Panel</router-link>
<router-link to="/tabview">&#9679; TabView</router-link>
<router-link to="/toolbar">&#9679; Toolbar</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 4)" @keydown.enter="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}">
<span>
<img alt="overlay" class="layout-menu-icon-inactive" src="./assets/images/menu/overlay.svg" />
<img alt="overlay" class="layout-menu-icon-active" src="./assets/images/menu/overlay-active.svg" />
<span>Overlay</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 4">
<div>
<router-link to="/dialog">&#9679; Dialog</router-link>
<router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
<router-link to="/sidebar">&#9679; Sidebar</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/dialog">&#9679; Dialog</router-link>
<router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
<router-link to="/sidebar">&#9679; Sidebar</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 5)" @keydown.enter="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}">
<span>
<img alt="file" class="layout-menu-icon-inactive" src="./assets/images/menu/file.svg" />
<img alt="file" class="layout-menu-icon-active" src="./assets/images/menu/file-active.svg" />
<span>File</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 5">
<div>
<router-link to="/fileupload">&#9679; Upload</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/fileupload">&#9679; Upload</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 6)" @keydown.enter="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}">
<span>
<img alt="menu" class="layout-menu-icon-inactive" src="./assets/images/menu/menu.svg" />
<img alt="menu" class="layout-menu-icon-active" src="./assets/images/menu/menu-active.svg" />
<span>Menu</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 6">
<div>
<router-link to="/menumodel">&#9679; MenuModel</router-link>
<router-link to="/breadcrumb">&#9679; Breadcrumb</router-link>
<router-link to="/contextmenu">&#9679; ContextMenu</router-link>
<router-link to="/megamenu">&#9679; MegaMenu</router-link>
<router-link to="/menu">&#9679; Menu</router-link>
<router-link to="/menubar">&#9679; Menubar</router-link>
<router-link to="/panelmenu">&#9679; PanelMenu</router-link>
<router-link to="/steps">&#9679; Steps</router-link>
<router-link to="/tabmenu">&#9679; TabMenu</router-link>
<router-link to="/tieredmenu">&#9679; TieredMenu</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/menumodel">&#9679; MenuModel</router-link>
<router-link to="/breadcrumb">&#9679; Breadcrumb</router-link>
<router-link to="/contextmenu">&#9679; ContextMenu</router-link>
<router-link to="/megamenu">&#9679; MegaMenu</router-link>
<router-link to="/menu">&#9679; Menu</router-link>
<router-link to="/menubar">&#9679; Menubar</router-link>
<router-link to="/panelmenu">&#9679; PanelMenu</router-link>
<router-link to="/steps">&#9679; Steps</router-link>
<router-link to="/tabmenu">&#9679; TabMenu</router-link>
<router-link to="/tieredmenu">&#9679; TieredMenu</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 7)" @keydown.enter="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}">
<span>
<img alt="charts" class="layout-menu-icon-inactive" src="./assets/images/menu/charts.svg" />
<img alt="charts" class="layout-menu-icon-active" src="./assets/images/menu/charts-active.svg" />
<span>Chart</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 7">
<div>
<router-link to="/chart">&#9679; ChartModel</router-link>
<router-link to="/chart/pie">&#9679; Pie</router-link>
<router-link to="/chart/doughnut">&#9679; Doughnut</router-link>
<router-link to="/chart/bar">&#9679; Bar</router-link>
<router-link to="/chart/line">&#9679; Line</router-link>
<router-link to="/chart/polararea">&#9679; PolarArea</router-link>
<router-link to="/chart/radar">&#9679; Radar</router-link>
<router-link to="/chart/combo">&#9679; Combo</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/chart">&#9679; ChartModel</router-link>
<router-link to="/chart/pie">&#9679; Pie</router-link>
<router-link to="/chart/doughnut">&#9679; Doughnut</router-link>
<router-link to="/chart/bar">&#9679; Bar</router-link>
<router-link to="/chart/line">&#9679; Line</router-link>
<router-link to="/chart/polararea">&#9679; PolarArea</router-link>
<router-link to="/chart/radar">&#9679; Radar</router-link>
<router-link to="/chart/combo">&#9679; Combo</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 8)" @keydown.enter="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}">
<span>
<img alt="message" class="layout-menu-icon-inactive" src="./assets/images/menu/message.svg" />
<img alt="message" class="layout-menu-icon-active" src="./assets/images/menu/message-active.svg" />
<span>Messages</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 8">
<div>
<router-link to="/message">&#9679; Message</router-link>
<router-link to="/toast">&#9679; Toast</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/message">&#9679; Message</router-link>
<router-link to="/toast">&#9679; Toast</router-link>
</div>
<a tabindex="0" @click="toggleMenu($event, 9)" @keydown.enter="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
<span>
<img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
<img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" />
<span>Misc</span>
</a>
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 9">
<div>
<router-link to="/inplace">&#9679; Inplace</router-link>
<router-link to="/progressbar">&#9679; ProgressBar</router-link>
<router-link to="/progressspinner">&#9679; ProgressSpinner</router-link>
</div>
</div>
</transition>
</span>
<div>
<router-link to="/inplace">&#9679; Inplace</router-link>
<router-link to="/progressbar">&#9679; ProgressBar</router-link>
<router-link to="/progressspinner">&#9679; ProgressSpinner</router-link>
</div>
</div>
</div>
</template>

66
src/assets/styles/app.scss
View File

@ -256,29 +256,18 @@ body {
@include shadow(0 0 2px rgba(0,0,0,0.25));
.layout-menu {
padding-bottom: 150px;
> a {
> span {
width: 100%;
height: 50px;
display: block;
padding: 15px 0px 0px 25px;
padding: 15px 0px 0px 20px;
border-top: solid 1px #e3e9ea;
color: #484848;
cursor: pointer;
user-select: none;
transition: background-color .2s;
&:hover {
background-color: #eeeeee;
}
&:focus {
z-index: 1;
outline: 0 none;
transition: box-shadow .3s;
box-shadow: inset 0 0 0 0.2em $focusBorderColor;
}
span {
font-size: 16px;
margin: -2px 0px 0px 30px;
@ -298,54 +287,15 @@ body {
display: inline;
}
}
&.active-menuitem {
background-color: #ffffff;
color: #42b983;
img {
&.layout-menu-icon-active {
display: inline;
}
&.layout-menu-icon-inactive {
display: none;
}
}
}
}
> div {
width: auto;
background-color: #ffffff;
padding: 0 10px 15px 10px;
> div {
overflow: hidden;
padding: 20px 15px;
}
&.layout-submenu-wrapper-enter,
&.layout-submenu-wrapper-leave-to {
max-height: 0;
}
&.layout-submenu-wrapper-enter-to,
&.layout-submenu-wrapper-leave {
max-height: 1000px;
}
&.layout-submenu-wrapper-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
&.layout-submenu-wrapper-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}
a {
width: 50%;
float: left;
display: inline-block;
padding: 6px;
cursor: pointer;
border-radius: 4px;
@ -365,6 +315,10 @@ body {
box-shadow: inset 0 0 0 0.2em $focusBorderColor;
}
&.router-link-active {
color: #42b983;
}
.menuitem-badge {
background: #00b09b; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #96c93d, #00b09b); /* Chrome 10-25, Safari 5.1-6 */
@ -434,7 +388,7 @@ body {
&.introduction {
color: #ffffff;
@include background-gradient-left2right(#299198,#32BCC8);
@include background-gradient-left2right(#0061ad,#4ca1e4);
.feature-intro {
h1 {