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

Ripple for icons

pull/358/head
cagataycivici 2020-06-26 23:39:38 +03:00
parent a60a345bb4
commit c00f3822bf
5 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/dialog/Dialog.vue
View File

@ -7,10 +7,10 @@
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
</slot>
<div class="p-dialog-header-icons">
<button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1">
<button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
<span :class="maximizeIconClass"></span>
</button>
<button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" tabindex="-1">
<button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" tabindex="-1" v-ripple>
<span class="p-dialog-header-close-icon pi pi-times"></span>
</button>
</div>
@ -28,6 +28,7 @@
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
inheritAttrs: false,
@ -245,6 +246,9 @@ export default {
ariaLabelledById() {
return this.header != null ? this.ariaId + '_header' : null;
}
},
directives: {
'ripple': Ripple
}
}
</script>
@ -298,6 +302,8 @@ export default {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Fluid */

4
src/components/multiselect/MultiSelect.vue
View File

@ -29,7 +29,7 @@
<input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder">
<span class="p-multiselect-filter-icon pi pi-search"></span>
</div>
<button class="p-multiselect-close p-link" @click="onCloseClick" type="button">
<button class="p-multiselect-close p-link" @click="onCloseClick" type="button" v-ripple>
<span class="p-multiselect-close-icon pi pi-times" />
</button>
</div>
@ -500,6 +500,8 @@ export default {
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.p-fluid .p-multiselect {

8
src/components/overlaypanel/OverlayPanel.vue
View File

@ -4,7 +4,7 @@
<div class="p-overlaypanel-content">
<slot></slot>
</div>
<button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button">
<button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button" v-ripple>
<span class="p-overlaypanel-close-icon pi pi-times"></span>
</button>
</div>
@ -13,6 +13,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -146,6 +147,9 @@ export default {
document.getElementById(this.appendTo).removeChild(this.$refs.container);
}
}
},
directives: {
'ripple': Ripple
}
}
</script>
@ -165,6 +169,8 @@ export default {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Animation */

8
src/components/panel/Panel.vue
View File

@ -7,7 +7,7 @@
<div class="p-panel-icons">
<slot name="icons"></slot>
<a v-if="toggleable" tabindex="0" class="p-panel-header-icon p-panel-toggler" @click="toggle" @keydown.enter="toggle"
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" v-ripple>
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
</a>
</div>
@ -24,6 +24,7 @@
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -58,6 +59,9 @@ export default {
value: this.d_collapsed
});
}
},
directives: {
'ripple': Ripple
}
}
</script>
@ -79,5 +83,7 @@ export default {
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
</style>

8
src/components/sidebar/Sidebar.vue
View File

@ -2,7 +2,7 @@
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave">
<div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
<div class="p-sidebar-content">
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button">
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
<span class="p-sidebar-close-icon pi pi-times" />
</button>
<slot></slot>
@ -13,6 +13,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -133,6 +134,9 @@ export default {
fullScreen() {
return this.position === 'full';
}
},
directives: {
'ripple': Ripple
}
}
</script>
@ -154,6 +158,8 @@ export default {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-sidebar-mask {