Commit 3b5db978 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '619-MbHeadline' into 'master'

Resolve "MbHeadline add Icons"

See merge request !171
parents 607ff8bb b3b4b148
......@@ -17,14 +17,20 @@ q-card.mb-card.full-width.mb-bg-bg-light(
:clickable="true"
@mouseenter.native="handleMouseoverForOverlay"
@mouseleave.native="overlayCacheHover = false"
@click.native="handleClickedItem"
)
.q-pa-md
.q-px-md.q-py-sm
// CONTENT ----------------------------------------------------------------------------------------------------------
// Title
mb-headline(
mb-headline.cursor-pointer.q-mb-md(
:class="{'q-my-md': !visibleData.preview}"
:title="parsedData.title"
:icon-name="visibleData.iconName"
:icon-name="[visibleData.iconName, 'groups', 'image', 'dynamic_feed']"
:recent-activities="[1,2,3,4]"
@headlineClicked="handleClickedItem"
@iconClicked="handleClickedIcon"
@recentActivitiesClicked="handleRecentActivitiesClicked"
)
// tags
card-tag-module(
......@@ -131,6 +137,15 @@ export default {
},
handleResize (size) {
this.containerWidth = size.width
},
handleClickedItem () {
this.$emit('itemClicked', this.data)
},
handleClickedIcon (icon) {
console.log(icon)
},
handleRecentActivitiesClicked (activities) {
console.log(activities)
}
}
}
......
<template lang="pug">
.q-my-sm.text-caption.mb-text-fg-light(v-if="createdAt") {{$t('general.created')}}
.q-my-xs.text-caption.mb-text-fg-light(v-if="createdAt") {{$t('general.created')}}
| &nbsp;{{ DateTime.fromISO(createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
</template>
......
<template lang="pug">
.q-my-sm.text-caption.mb-text-fg-light(v-if="lastUpdate") {{$t('general.updated')}}
.q-my-xs.text-caption.mb-text-fg-light(v-if="lastUpdate") {{$t('general.updated')}}
| &nbsp;{{ DateTime.fromISO(lastUpdate).toLocaleString(DateTime.DATETIME_SHORT) }}
</template>
......
<template lang="pug">
.tag-container.q-mt-xs(v-if="tags")
.tag-container.q-my-xs(v-if="tags")
// Tag Chips
.tags.flex.no-wrap.hide-scrollbar
mb-chip.q-ml-sm(
......
......@@ -62,7 +62,7 @@ export default {
getTags () {
return this.data.row
? this.data.row.tags
: this.data.title
: this.data.tags
},
getAuthor () {
return this.data.row
......@@ -90,6 +90,7 @@ export default {
: this.data.createdAt
},
getIconName () {
// TODO: Add type icons
return 'celebration'
}
}
......
<template lang="pug">
.flex.no-wrap.justify-between.items-center
.mb-headline
// Headline String
.full-width(
:class="[{'expand': expand }, contentClass, iconPosition === 'left' ? 'q-pl-sm' : 'q-pr-sm']"
.full-width.flex.justify-between.items-center.no-wrap(
:class="[contentClass]"
)
v-clamp(
:max-lines="$q.platform.has.touch ? 2 : 1"
:max-lines="hasTouch ? 2 : 1"
location="middle"
:expanded="expand"
autoresize
ref="clamper"
@clampchange="handleClamp"
@click.native="onHeadlineClicked"
) {{title}}
// Icon if text can be clamped and unclamped (Touch)
template(v-slot:after)
q-icon(
v-if="$q.platform.has.touch && toggleClamped"
:name="expand ? 'expand_less' : 'expand_more'"
size="sm"
@click="expand = !expand"
)
// Tooltop for all devices with mouse input
mb-tooltip(v-if="clamped") {{ title }}
mb-tooltip(v-if="isClamped") {{ title }}
//// Expand if clamped
q-icon.self-end(
v-if="hasTouch && isClamped"
:name="expand ? 'expand_less' : 'expand_more'"
size="sm"
@click.prevent.self="expand = !expand"
)
// Icon and recent activities
.icons-container.flex.no-wrap.full-width(
v-if="iconName || recentActivities"
:class="[recentActivities ? 'justify-between' : 'justify-start']"
)
.icons-wrapper
template(v-for="icon in icons")
q-icon.q-mr-sm(:name="icon" size="sm" @click="iconClicked(icon)")
mb-tooltip {{icon}}
// Icon and Position
q-icon(v-if="iconName" :class="[iconPosition === 'left' ? 'order-first' : 'order-last']" :name="iconName" size="sm")
.recents(v-if="recentActivities")
q-badge(color="mb-blue-100" @click="recentActivitiesClicked") {{recentActivities.length}}
mb-tooltip {{$t('general.recent_activities')}}
</template>
<script>
......@@ -35,40 +47,37 @@ export default {
name: 'MbHeadline',
components: { VClamp },
props: {
title: { type: String, default: undefined },
title: String,
contentClass: { type: String, default: 'mb-subheadline' },
iconName: { type: String, default: undefined },
iconPosition: { type: String, default: 'right' }
iconName: [String, Array],
recentActivities: Array
},
data () {
return {
expand: false,
clamped: false,
toggleClamped: false
isClamped: false
}
},
computed: {
handledIconPosition () {
if (this.$q.platform.has.touch) {
return 'left'
}
else {
return this.iconPosition
}
hasTouch () {
return this.$q.platform.has.touch
},
isTruncated () {
return true
}
},
watch: {
clamped () {
this.toggleClamped = true
icons () {
return typeof this.iconName === 'string' ? [this.iconName] : this.iconName
}
},
methods: {
handleClamp (clamp) {
// save clamped always true is headline could be clamped (For the toggle)
this.clamped = clamp
this.isClamped = clamp
},
onHeadlineClicked () {
this.$emit('headlineClicked', true)
},
iconClicked (icon) {
this.$emit('iconClicked', icon)
},
recentActivitiesClicked () {
this.$emit('recentActivitiesClicked', this.recentActivities)
}
}
}
......
......@@ -80,9 +80,6 @@ export default {
}
}
},
mounted () {
console.log(this.$refs.mbSwiper)
},
methods: {
handleIndexChange () {
const { isBeginning, isEnd } = this.$refs.mbSwiper.swiperInstance
......
......@@ -10,19 +10,25 @@
:ratio="16/9"
:cover="true"
:width="'200px'"
@click.native="onItemClicked"
)
mb-popup-proxy
mb-img(:src="'https://picsum.photos/203/305'")
.q-pa-md
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem dolorum error, exercitationem perspiciatis quasi quia sint soluta vitae? Culpa cumque, doloribus inventore laborum modi possimus quibusdam reiciendis voluptatem.
//mb-popup-proxy
// mb-img(:src="'https://picsum.photos/203/305'")
// .q-pa-md
// | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem dolorum error, exercitationem perspiciatis quasi quia sint soluta vitae? Culpa cumque, doloribus inventore laborum modi possimus quibusdam reiciendis voluptatem.
</template>
<script>
export default {
name: 'PreviewContent',
props: ['props']
props: ['props'],
methods: {
onItemClicked () {
this.$emit('itemClicked', true)
}
}
}
</script>
......
<template lang="pug">
.full-height.cursor-pointer(@click="onItemClicked(props)")
.full-height.cursor-pointer
mb-headline(
:title="props.value"
@headlineClicked="onItemClicked"
:icon-name="'celebration'"
:recent-activities="[1,2,3,4]"
)
// TODO: Icon Name changes to type (Timeline, Grid, Image, etc.)
</template>
<script>
......@@ -14,12 +16,6 @@ export default {
props: ['props'],
methods: {
onItemClicked (props) {
// if (this.currentPage === 'groups') {
// this.$emit('itemInfo', props)
// }
// else if (this.currentPage === 'projects') {
// this.$router.push({ name: 'site.project', params: { id: props.key, props: props } })
// }
this.$emit('itemClicked', props)
}
}
......
......@@ -10,7 +10,10 @@
// preview image
template(v-if="props.col.name === 'preview'")
preview-content(:props="props")
preview-content(
:props="props"
@itemClicked="onItemClicked"
)
// name
template(v-else-if="props.col.name === 'title'")
......
......@@ -9,6 +9,7 @@
:content-type="contentType || 'assets'"
:visible-columns="visibleColumns",
:no-delete="noDelete"
@itemClicked="onItemClicked(props)"
)
</template>
......@@ -31,6 +32,11 @@
'col-6': width < 599
}
}
},
methods: {
onItemClicked (props) {
this.$emit('itemClicked', props)
}
}
}
</script>
......
......@@ -42,5 +42,6 @@ export default {
userInformation: 'User Information',
yes: 'Yes',
last_edited: 'Last edited',
add_new: 'Add new'
add_new: 'Add new',
recent_activities: 'Recent activities'
}
......@@ -516,13 +516,16 @@
br
| (default: .mb-subheadline)
div iconName :
span.text-mb-green-100 String
div iconPosition :
span.text-mb-green-100 String
br
| left / right
br
| (default: 'right')
span.text-mb-green-100 String || Array
div recentActivities :
span.text-mb-green-100 Array
template(v-slot:events)
div @headlineClicked :
span.text-mb-red-100 triggered if text is clicked
div @iconClicked :
span.text-mb-red-100 triggered if an icon is clicked. returns the icon
div @recentActivitiesClicked :
span.text-mb-red-100 triggered if clicked on recntActivities badge. returns the activities
template(v-slot:examples)
mb-headline(
title="Headline Title"
......@@ -531,13 +534,9 @@
title="Headline Title"
icon-name="delete"
)
mb-headline(
title="Headline Title"
icon-name="person"
icon-position="left"
)
mb-headline(
title="Headline Title very long and the long titles will be truncated in the middle"
:recent-activities="[1,2,3,4,5]"
)
// mb-logo
// mb-logo
......
......@@ -8,7 +8,7 @@
mb-swiper(:slides-per-view="4")
mb-swiper-slide(v-for="(project, i) in dummyRecentProjects" :key="i")
mb-card(
@click.native="handleClickedItem(project)"
@itemClicked="handleClickedItem(project)"
:data="project"
content-type="projects"
)
......@@ -139,6 +139,7 @@
this.create.type = obj.label
},
handleClickedItem (item) {
console.log(item)
this.$router.push({ name: 'site.project', params: { id: item.key || item._id, props: item } })
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment