Skip to content

Commit e31bc10

Browse files
LewisYoulLewisYoul
committed
feature/Modify actionbar and use on all snippet displays
1 parent f96e80e commit e31bc10

File tree

5 files changed

+21
-46
lines changed

5 files changed

+21
-46
lines changed

‎app/javascript/action-button-bar.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ export default {
6565
return [
6666
{ type: 'heart', count: this.snippetDup.likes_count, action: this.likeAction(), hasActioned: this.snippetDup.liked_by_current_user },
6767
{ type: 'comment', count: this.snippetDup.comments_count, action: this.commentAction(), hasActioned: false },
68-
{ type: 'share' , count: 0, action: () => { console.log('sharing') }, hasActioned: false },
69-
{ type: 'folder' , count: 0, action: this.fileAction, hasActioned: false }
68+
{ type: 'star' , count: 0, action: this.fileAction, hasActioned: false }
7069
]
7170
}
7271
},
@@ -128,8 +127,6 @@ export default {
128127
.action-button-bar {
129128
&--wrapper {
130129
display: flex;
131-
// border: 1px solid lightgrey;
132-
// border-top: none;
133130
}
134131
}
135132
</style>

‎app/javascript/action-button.vue‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div @click.prevent="performAction" class="action-button--wrapper">
3-
<action-icon :type="type" :actioned="hasActioned"></action-icon>
4-
<span class="action-button--count">{{ count }}</span>
3+
<img style="margin-left: 10px; margin-bottom: 2px;" :src="`/icons/${type}.svg`" width="14">
4+
<span style="font-size: 12px; margin-left: 4px;">{{ count }}</span>
55
</div>
66
</template>
77

@@ -19,23 +19,9 @@ export default {
1919
hasActioned: { required: true, type: Boolean },
2020
},
2121
22-
created(){
23-
console.log(this.type, this.hasActioned)
24-
},
25-
2622
methods: {
2723
performAction() {
28-
console.log(`performing action for ${this.type} on snippet ${this.snippet.filename}`)
2924
this.action()
30-
// .then(res => {
31-
// console.log(res)
32-
// const comment = res.data.like
33-
// // console.log(this.snippet)
34-
// this.count += 1
35-
// // this.resetCommentForm()
36-
// // this.$emit('commentCreated', comment)
37-
// })
38-
// .catch(console.error)
3925
}
4026
}
4127
}
@@ -44,16 +30,12 @@ export default {
4430
<style lang="scss" scoped>
4531
.action-button {
4632
&--wrapper {
47-
flex: 1;
48-
text-align:center;
49-
color: grey;
50-
margin-top: 11px;
51-
margin-bottom: 11px;
33+
display: flex;
34+
align-items: center;
5235
font-size: 14px;
5336
5437
&:hover {
5538
cursor: pointer;
56-
color: #003F63;
5739
}
5840
}
5941

‎app/javascript/snippet-preview.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
<div class="snippet-preview--author-wrapper">
55
<user-preview :user="snippet.user" :date="snippet.created_at"/>
66
<div>
7-
<div style="font-size: 14px;">
8-
<span style="display: inline-block; font-family: Helvetica, sans serif; font-weight: lighter;">{{ snippet.language }}</span>
7+
<div style="display: flex; flex-direction: column;">
8+
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px;">
9+
<span class="language-tag">{{ snippet.language }}</span>
10+
</div>
11+
<action-button-bar :snippet="snippet"></action-button-bar>
912
</div>
1013
</div>
1114
</div>
1215
<p class="snippet-preview--description">{{ snippet.description }}</p>
1316
<div style="display: flex; flex-direction: column;">
14-
<!-- <snippet-header :filename="snippet.filename" :href="snippetUrl"></snippet-header> -->
15-
<!-- <a class="snippet-preview--content-wrapper" v-html="snippet.highlighted_body" :href="snippetUrl"></a> -->
1617
<code-highlight class="snippet-preview--content" :highlighted-code="snippet.highlighted_body"></code-highlight>
17-
<action-button-bar :snippet="snippet"></action-button-bar>
1818
</div>
1919
</a>
2020
</card>

‎app/javascript/snippet-show.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
<div>
33
<card>
44
<div class="snippet-preview--author-wrapper">
5-
<user-preview :user="snippet.user" :date="snippet.created_at"/>
6-
<div>
7-
<div style="font-size: 14px;">
8-
<span style="display: inline-block; font-family: Helvetica, sans serif; font-weight: lighter;">{{ snippet.language }}</span>
5+
<user-preview :user="snippet.user" :date="snippet.created_at"/>
6+
<div>
7+
<div style="display: flex; flex-direction: column;">
8+
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px;">
9+
<span class="language-tag">{{ snippet.language }}</span>
10+
</div>
11+
<action-button-bar :snippet="snippet"></action-button-bar>
12+
</div>
913
</div>
1014
</div>
11-
</div>
1215
<p class="snippet-show--description">{{ snippetDup.description }}</p>
1316
<div style="display: flex; flex-direction: column;">
1417
<code-highlight style="overflow-x: scroll;" :highlighted-code="snippet.highlighted_body"></code-highlight>
15-
<action-button-bar :snippet="snippetDup"></action-button-bar>
1618
</div>
1719
</card>
1820
<div class="snippet-show--comments-wrapper">

‎app/javascript/snipt.vue‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,15 @@
2929
<img style="border-radius: 50%; margin-right: 10px;" src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" height="24" width="24" />
3030
<span style="font-size: 14px; color: grey;">{{ snippet.user.name }} <span style="margin: 0px 5px;">|</span> {{ snippet.created_at }}</span>
3131
</div>
32-
<div style="display: flex; align-items: center;">
33-
<img style="margin-left: 10px; margin-bottom: 2px;" src="/icons/heart.svg" width="14">
34-
<span style="font-size: 12px; margin-left: 4px;">{{ snippet.likes_count }}</span>
35-
<img style="margin-left: 10px; margin-bottom: 2px;" src="/icons/comment.svg" width="14">
36-
<span style="font-size: 12px; margin-left: 4px;">{{ snippet.comments_count }}</span>
37-
<img style="margin-left: 10px; margin-bottom: 2px;" src="/icons/star.svg" width="14">
38-
<span style="font-size: 12px; margin-left: 4px;">0</span>
39-
</div>
32+
<action-button-bar :snippet="snippet"></action-button-bar>
4033
</div>
4134
</a>
4235
</list-item>
4336
</div>
4437
</template>
4538

4639
<script>
40+
import ActionButtonBar from './action-button-bar';
4741
import ActionSnippet from './action-snippet';
4842
import ListItem from './list-item';
4943
import Modal from './modal';
@@ -57,7 +51,7 @@ import { EventBus } from './event-bus.js';
5751
import { store } from './store';
5852
5953
export default {
60-
components: { MoreButton, ListItem, ActionSnippet, Modal, Popover },
54+
components: { ActionButtonBar, MoreButton, ListItem, ActionSnippet, Modal, Popover },
6155
6256
mixins: [snippetsMixin, foldersMixin],
6357

0 commit comments

Comments
 (0)