Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(#635): Support isExpanded on KtDrawer #641

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+76 −62
Open

feat(#635): Support isExpanded on KtDrawer #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb53df5
refact(mixins): move scrollbar mixin to kotti-style
carsoli Jun 23, 2022
54d4152
feat(635): support isExpanded prop to allow expansion by default
carsoli Jun 23, 2022
7adaca5
refact(KtDrawer): simplify padding/margin logic
carsoli Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 19 additions & 15 deletions packages/documentation/pages/usage/components/drawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ It is best to place secondary functionality or information into the drawer, and

![Structure](~/assets/img/drawer_structure.png)

- **Drawer:** The size of drawer depends on information density.
- **Handle:** By clicking the handles, the drawer can be `Expanded` to display more information.
- **Background:** The background should be black `#000000` with `46%` opacity.

## Size

<div class="element-example">
Expand Down Expand Up @@ -54,6 +50,24 @@ It is best to place secondary functionality or information into the drawer, and
</KtDrawer>
</div>

## Expansion

<div class="element-example" >
<KtButton type="primary" class="mr-16px" @click="showDefaultExpanded=true" label="Show Expanded-by-default Drawer" />
<KtDrawer v-if="showDefaultExpanded" isExpanded @close="showDefaultExpanded=false">
<div slot="drawer-header">
<h2>Default Size Drawer</h2>
</div>
<div slot="drawer-body">
<p>This drawer is expanded by default.</p>
</div>
<div slot="drawer-footer">
<KtButton @click="showDefaultExpanded=false" class="w-100" label="Close Drawer" />
</div>
</KtDrawer>

</div>

There are different ways to customize the width of the drawer.

Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer.
Expand Down Expand Up @@ -125,17 +139,6 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta
</div>

</ShowCase>

## Usage

### Attributes

| Attribute | Description | Type | Accepted values | Default |
| :--------------------- | :----------------------------------------- | :-------- | :-------------- | :------ |
| `disallowCloseOutside` | closed drawer when click outside of drawer | `Boolean` | — | `true` |
| `defaultWidth` | width when drawer is closed | `String` | CSS width | — |
| `expandWidth` | width when drawer is expanded | `String` | CSS width | — |
| `isWide` | wide drawer | `Boolean` | — | `false` |
</template>

<script lang="ts">
Expand All @@ -155,6 +158,7 @@ export default defineComponent({
return {
component: KtDrawer,
customizeWidthDrawer: false,
showDefaultExpanded: false,
showDrawer: false,
showWideDrawer: false,
}
Expand Down
2 changes: 1 addition & 1 deletion packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default defineComponent<{
</script>

<style lang="scss" scoped>
@import '../../kotti-field/mixins';
@import '../../kotti-style/_mixins.scss';

.kt-comment-inline-edit {
position: relative;
Expand Down
36 changes: 22 additions & 14 deletions packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<slot name="drawer-footer" />
</div>
<div class="kt-drawer__handle" @click="onDrawerHandleClick">
<i v-if="isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
<i v-if="_isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
<i v-else class="yoco" v-text="Yoco.Icon.CHEVRON_LEFT" />
</div>
</div>
Expand All @@ -22,7 +22,7 @@

<script lang="ts">
import { Yoco } from '@3yourmind/yoco'
import { computed, defineComponent, ref } from '@vue/composition-api'
import { computed, defineComponent, ref, watch } from '@vue/composition-api'

import { makeProps } from '../make-props'

Expand All @@ -32,22 +32,31 @@ export default defineComponent<KottiDrawer.PropsInternal>({
name: 'KtDrawer',
props: makeProps(KottiDrawer.propsSchema),
setup(props, { emit }) {
const isExpanded = ref(false)
const _isExpanded = ref(false)
watch(
() => props.isExpanded,
(shouldExpand) => {
_isExpanded.value = shouldExpand
},
{ immediate: true },
)

return {
_isExpanded,
drawerClass: computed(() => ({
'kt-drawer__container': true,
'kt-drawer__container--is-expanded': isExpanded.value,
'kt-drawer__container--is-expanded': _isExpanded.value,
'kt-drawer__container--is-wide': props.isWide,
})),
drawerWidth: computed(() => {
return props.defaultWidth === null || props.expandWidth === null
? {}
: { width: isExpanded.value ? props.expandWidth : props.defaultWidth }
: {
width: _isExpanded.value ? props.expandWidth : props.defaultWidth,
}
}),
isExpanded,
onDrawerHandleClick: () => {
isExpanded.value = !isExpanded.value
_isExpanded.value = !_isExpanded.value
},
onOutsideDrawerClick: () => {
if (!props.disallowCloseOutside) {
Expand All @@ -69,6 +78,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({

<style lang="scss" scoped>
@import '../kotti-style/_variables.scss';
@import '../kotti-style/_mixins.scss';

.kt-drawer {
&__mask {
Expand All @@ -80,7 +90,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.5s ease;
transition: opacity var(--transition-long) ease;
}

&__container {
Expand All @@ -92,11 +102,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
width: var(--kt-drawer-default-width);
height: 100%;
padding: var(--unit-6);
padding-left: var(--unit-8);
overflow-y: auto;
background-color: var(--ui-background);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
transition: all var(--transition-long) ease;

&--is-expanded {
width: 50%;
Expand Down Expand Up @@ -133,9 +141,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
}

&__body {
@include prettify-scrollbar;
flex: 1 1 auto;
padding: 0 0.8rem;
margin: 0 -0.8rem 0.8rem -0.8rem;
padding-bottom: var(--unit-4);
overflow-y: auto;
}

Expand All @@ -149,7 +157,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({

&-enter {
opacity: 0;
transition: opacity 0.5s;
transition: opacity var(--transition-long);
}

&-leave-active {
Expand Down
1 change: 1 addition & 0 deletions packages/kotti-ui/source/kotti-drawer/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export namespace KottiDrawer {
defaultWidth: z.string().nullable().default(null),
disallowCloseOutside: z.boolean().default(false),
expandWidth: z.string().nullable().default(null),
isExpanded: z.boolean().default(false),
isWide: z.boolean().default(false),
})

Expand Down
2 changes: 1 addition & 1 deletion packages/kotti-ui/source/kotti-field-select/components/Options.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ export default defineComponent({
</script>

<style lang="scss" scoped>
@import '../../kotti-field/mixins.scss';
@import '../../kotti-style/_mixins.scss';

.kt-field-select__options {
position: relative;
Expand Down
5 changes: 3 additions & 2 deletions packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,9 @@ export default defineComponent<KottiFieldTextArea.PropsInternal>({
})
</script>

<style lang="scss">
@import '../kotti-field/mixins';
<style lang="scss" scoped>
@import '../kotti-style/_mixins.scss';
@import '../kotti-field/mixins.scss';

.kt-field-text-area {
$vertical-padding: 0.6em;
Expand Down
29 changes: 0 additions & 29 deletions packages/kotti-ui/source/kotti-field/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,35 +391,6 @@
}
}

@mixin prettify-scrollbar {
&::-webkit-scrollbar {
opacity: 0;
}

scrollbar-width: thin;
scrollbar-color: var(--ui-background) var(--ui-background);

&:active,
&:hover {
scrollbar-color: var(--ui-03) var(--ui-background);
transition: scrollbar-color var(--transition-medium) ease-out;

&::-webkit-scrollbar {
width: 5px;
height: 5px;
opacity: 1;
transition: opacity var(--transition-medium) ease-out;
}

&::-webkit-scrollbar-thumb {
cursor: all-scroll;

background-color: var(--ui-03);
border-radius: var(--field-border-radius);
}
}
}

@mixin sizes {
$fontSizes: (
'small': var(--font-size-small),
Expand Down
28 changes: 28 additions & 0 deletions packages/kotti-ui/source/kotti-style/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
@mixin prettify-scrollbar {
&::-webkit-scrollbar {
opacity: 0;
}

scrollbar-width: thin;
scrollbar-color: var(--ui-background) var(--ui-background);

&:active,
&:hover {
scrollbar-color: var(--ui-03) var(--ui-background);
transition: scrollbar-color var(--transition-medium) ease-out;

&::-webkit-scrollbar {
width: 5px;
height: 5px;
opacity: 1;
transition: opacity var(--transition-medium) ease-out;
}

&::-webkit-scrollbar-thumb {
cursor: all-scroll;

background-color: var(--ui-03);
border-radius: var(--field-border-radius);
}
}
}
1 change: 1 addition & 0 deletions packages/kotti-ui/source/kotti-style/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// Utility classes
@import 'utilities';
@import 'media';
@import 'mixins';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure, but this looks like a no-op.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i moved it under kotti-style, so

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FlorianWendelborn can this be resolved?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still seems like a noop

Copy link
Contributor Author

@carsoli carsoli Feb 2, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you either elaborate on why you think it is or test it?


// Layout
@import 'layout';
Expand Down