Skip to content

Commit b55c2df

Browse files
skjnldsvskjnldsv
authored
Merge pull request #1895 from nextcloud/enh/noid/counterbubble
2 parents f9bb5d8 + 9c06ee0 commit b55c2df

File tree

6 files changed

+129
-17
lines changed

6 files changed

+129
-17
lines changed

‎src/components/AppNavigationCounter/AppNavigationCounter.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
-
2121
-->
2222

23-
<docs>
23+
<docs>
2424

2525
### Normal Counter
2626

@@ -46,6 +46,9 @@
4646

4747
<script>
4848
49+
/**
50+
* @deprecated use [CounterBubble](#/Components/CounterBubble) instead
51+
*/
4952
export default {
5053
name: 'AppNavigationCounter',
5154

‎src/components/AppNavigationItem/AppNavigationItem.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ Just nest the counter into `<AppNavigationItem>` and add `slot="counter"` to it.
6464

6565
```
6666
<AppNavigationItem title="Item with counter" icon="icon-folder">
67-
<AppNavigationCounter slot="counter">
67+
<CounterBubble slot="counter">
6868
99+
69-
</AppNavigationCounter>
69+
</CounterBubble>
7070
</AppNavigationItem>
7171
```
7272

‎src/components/CounterBubble/CounterBubble.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!--
2+
- @copyright Copyright (c) 2019 Marco Ambrosini <[email protected]>
3+
-
4+
- @author Marco Ambrosini <[email protected]>
5+
-
6+
- @license GNU AGPL version 3 or any later version
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-
21+
-->
22+
23+
<docs>
24+
25+
### Normal Counter
26+
27+
```
28+
<CounterBubble>314+</CounterBubble>
29+
```
30+
31+
### Highlighted Counter (i.e. mentions)
32+
33+
```
34+
<CounterBubble :highlighted="true">@admin</CounterBubble>
35+
<CounterBubble :highlighted="true">314+</CounterBubble>
36+
```
37+
38+
</docs>
39+
40+
<template>
41+
<div :class="{ 'counter-bubble__counter--highlighted': highlighted }"
42+
class="counter-bubble__counter">
43+
<slot />
44+
</div>
45+
</template>
46+
47+
<script>
48+
49+
export default {
50+
name: 'CounterBubble',
51+
52+
props: {
53+
highlighted: {
54+
type: Boolean,
55+
default: false,
56+
},
57+
},
58+
}
59+
60+
</script>
61+
62+
<style lang="scss" scoped>
63+
.counter-bubble__counter {
64+
font-size: calc(var(--default-font-size) * .8);
65+
overflow: hidden;
66+
width: fit-content;
67+
max-width: $clickable-area;
68+
text-align: center;
69+
text-overflow: ellipsis;
70+
line-height: 1em;
71+
padding: 4px 8px;
72+
border-radius: var(--border-radius-pill);
73+
background-color: var(--color-background-darker);
74+
75+
&--highlighted {
76+
padding: 4px 6px;
77+
color: var(--color-primary-text);
78+
background-color: var(--color-primary);
79+
}
80+
}
81+
82+
</style>

‎src/components/CounterBubble/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* @copyright Copyright (c) 2021 Vincent Petry <[email protected]>
3+
*
4+
* @author Vincent Petry <[email protected]>
5+
*
6+
* @license GNU AGPL version 3 or any later version
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import CounterBubble from './CounterBubble'
24+
25+
export default CounterBubble

‎src/components/ListItem/ListItem.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@
3030
:counter-number="44"
3131
:counter-highlighted="true">
3232
<template #icon>
33-
<avatar size="44" user="janedoe" display-name="Jane Doe" />
33+
<avatar :size="44" user="janedoe" display-name="Jane Doe" />
3434
</template>
3535
<template #subtitle>
3636
In this slot you can put both text and other components such as icons
3737
</template>
38-
<AppNavigationCounter #counter>
38+
<CounterBubble #counter>
3939
7
40-
</AppNavigationCounter>
40+
</CounterBubble>
4141
<template #actions>
4242
<ActionButton>
4343
Button one
@@ -54,14 +54,14 @@
5454
:title="'Title of the element'"
5555
:bold="false">
5656
<template #icon>
57-
<avatar size="44" user="janedoe" display-name="Jane Doe" />
57+
<avatar :size="44" user="janedoe" display-name="Jane Doe" />
5858
</template>
5959
<template #subtitle>
6060
In this slot you can put both text and other components such as icons
6161
</template>
62-
<AppNavigationCounter #counter>
62+
<CounterBubble #counter>
6363
7
64-
</AppNavigationCounter>
64+
</CounterBubble>
6565
<template #actions>
6666
<ActionButton>
6767
Button one
@@ -79,14 +79,14 @@
7979
:bold="false"
8080
:details="'One hour ago'">
8181
<template #icon>
82-
<avatar size="44" user="janedoe" display-name="Jane Doe" />
82+
<avatar :size="44" user="janedoe" display-name="Jane Doe" />
8383
</template>
8484
<template #subtitle>
8585
In this slot you can put both text and other components such as icons
8686
</template>
87-
<AppNavigationCounter #counter>
87+
<CounterBubble #counter>
8888
7
89-
</AppNavigationCounter>
89+
</CounterBubble>
9090
</listItem>
9191
</ul>
9292

@@ -145,11 +145,11 @@
145145

146146
<!-- Counter -->
147147
<span v-if="!displayActions" class="line-two__counter">
148-
<AppNavigationCounter
148+
<CounterBubble
149149
v-if="counterNumber != 0"
150150
:highlighted="counterHighlighted">
151151
{{ counterNumber }}
152-
</AppNavigationCounter>
152+
</CounterBubble>
153153
</span>
154154
</div>
155155
</div>
@@ -182,14 +182,14 @@
182182

183183
<script>
184184
import Actions from '../Actions'
185-
import AppNavigationCounter from '../AppNavigationCounter'
185+
import CounterBubble from '../CounterBubble'
186186
187187
export default {
188188
name: 'ListItem',
189189
190190
components: {
191191
Actions,
192-
AppNavigationCounter,
192+
CounterBubble,
193193
},
194194
195195
props: {
@@ -268,7 +268,7 @@ export default {
268268
269269
/**
270270
* If different from from 0 this component will display the
271-
* AppNavigationCounter component
271+
* CounterBubble component
272272
*/
273273
counterNumber: {
274274
type: [Number, String],

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import Breadcrumbs from './Breadcrumbs'
5454
import CheckboxRadioSwitch from './CheckboxRadioSwitch'
5555
import ColorPicker from './ColorPicker'
5656
import Content from './Content'
57+
import CounterBubble from './CounterBubble'
5758
import DatetimePicker from './DatetimePicker'
5859
import EmptyContent from './EmptyContent'
5960
import ListItem from './ListItem'
@@ -100,6 +101,7 @@ export {
100101
CheckboxRadioSwitch,
101102
ColorPicker,
102103
Content,
104+
CounterBubble,
103105
DatetimePicker,
104106
EmptyContent,
105107
ListItem,

0 commit comments

Comments
 (0)