Skip to content

Commit

Permalink
many style improvements. also filter now includes branch name of commit
Browse files Browse the repository at this point in the history 
usability didn't change otherwise
  • Loading branch information
@phil294
phil294 committed Oct 12, 2022
1 parent 23a68e5 commit 1496dac
Show file tree
Hide file tree
Showing 7 changed files with 151 additions and 120 deletions.
6 changes: 0 additions & 6 deletions src/extension.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,6 @@ module.exports.activate = (###* @type vscode.ExtensionContext ### context) =>
<meta http-equiv='Content-Security-Policy' content=\"default-src 'none'; style-src #{view.cspSource} 'unsafe-inline'; script-src #{view.cspSource}; font-src #{view.cspSource};\">
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href='#{get_uri 'web-dist', 'css', 'app.css'}' rel='stylesheet'>
<style>
@font-face {
font-family: 'OverpassMono-Bold';
src: url('#{get_uri 'media'}/OverpassMono-Bold.ttf') format('truetype');
}
</style>
<title>#{EXT_NAME}</title>
</head>
<body>
Expand Down
4 changes: 3 additions & 1 deletion web/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ body, html
height 100%
.fill
@extend .fill-w, .fill-h
.gap-3
gap 3px
.gap-5
gap 5px
.gap-10
Expand Down Expand Up @@ -145,7 +147,7 @@ button
color inherit // FF bug
user-select none
cursor pointer
color var(--vscode-gitDecoration-modifiedResourceForeground)
color #E5B567 // var(--vscode-gitDecoration-modifiedResourceForeground)
.btn, input[type="submit"], input[type="reset"], input[type="button"]
display inline-flex
align-items center
Expand Down
39 changes: 13 additions & 26 deletions web/src/views/MainView.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,28 @@ export default

``###* @type {Ref<Commit[]>} ###
returned_commits = ref []
``###* @type {Ref<string | null>} ###
txt_filter = ref null
txt_filter = ref ''
``###* @type {Ref<'filter' | 'search'>} ###
txt_filter_type = ref 'filter'
clear_filter = =>
txt_filter.value = ''
if selected_commit.value
selected_i = commits.value.findIndex (c) => c == selected_commit.value
commits_scroller_ref.value?.scrollToItem selected_i - Math.floor(visible_commits.value.length / 2) + 2
``###* @type {Ref<HTMLElement | null>} ###
txt_filter_ref = ref null
txt_filter_filter = (###* @type Commit ### commit) =>
["subject", "hash", "author_name", "author_email"].some (prop) =>
#@ts-ignore
commit[prop].toLowerCase().includes(txt_filter.value?.toLowerCase())
search_for = txt_filter.value.toLowerCase()
for str from [commit.subject, commit.hash, commit.author_name, commit.author_email, commit.branch?.name]
return true if str?.includes(search_for)
commits = computed =>
if txt_filter.value == null or txt_filter_type.value == 'search'
if not txt_filter.value or txt_filter_type.value == 'search'
return returned_commits.value
returned_commits.value.filter txt_filter_filter
txt_filter_last_i = -1
txt_filter_toggle_dialog = =>
if txt_filter.value == null
txt_filter.value = ''
await new Promise (ok) => setTimeout(ok, 0)
txt_filter_ref.value?.focus()
else
txt_filter.value = null
txt_filter_last_i = -1
document.addEventListener 'keyup', (e) =>
if e.ctrlKey and e.key == 'f'
txt_filter_toggle_dialog()
txt_filter_ref.value?.focus()
select_searched_commit_debouncer = -1
txt_filter_enter = (###* @type KeyboardEvent ### event) =>
return if txt_filter_type.value == 'filter'
Expand Down Expand Up @@ -136,19 +132,12 @@ export default

show_invisible_branches = ref false

scroll_pixel_buffer = 200 # 200 is also the default
scroll_item_height = 22 # must be synced with css (v-bind doesn't work with coffee)
``###* @type {Ref<Commit[]>} ###
visible_commits = ref []
scroll_item_offset = ref 0
visible_commits_debouncer = 0
commits_scroller_updated = (###* @type number ### start_index, ###* @type number ### end_index) =>
buffer_indices_amt = Math.floor(scroll_pixel_buffer / scroll_item_height) # those are invisible
if start_index > 0
start_index += buffer_indices_amt
if end_index < commits.value.length - 1
end_index -= buffer_indices_amt
scroll_item_offset.value = start_index + 1
scroll_item_offset.value = start_index
window.clearTimeout visible_commits_debouncer
visible_commits_debouncer = window.setTimeout (=>
visible_commits.value = commits.value.slice(start_index, end_index)
Expand Down Expand Up @@ -238,14 +227,12 @@ export default
invisible_branches
commits_scroller_ref
scroll_to_branch_tip
scroll_pixel_buffer
scroll_item_height
selected_commit
txt_filter
txt_filter_ref
txt_filter_type
txt_filter_enter
txt_filter_toggle_dialog
clear_filter
hovered_branch_name
global_actions
branch_drop
Expand Down
175 changes: 105 additions & 70 deletions web/src/views/MainView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,63 @@
summary Configure...
git-input :git_action="log_action" hide_result="" :action="run_log" ref="git_input_ref"
.row.flex-1
#log.col.flex-1
#left.col.flex-noshrink
p v-if="!commits.length"
| No commits found
nav.row.align-center.justify-space-between.gap-10
ul#branches.row.align-center.wrap
ul#branches.row.align-center.wrap.flex-1.gap-3
li.ref.branch.visible.active v-for="branch of visible_branches" :class="{is_head:branch.name===head_branch, is_hovered:branch.name===hovered_branch_name}"
button :style="{color:branch.color}" @click="scroll_to_branch_tip(branch)" title="Jump to branch tip" v-drag="branch.name" v-drop="branch_drop(branch.name)"
| {{ branch.name }}
li.show-invisible_branches v-if="invisible_branches.length"
button @click="show_invisible_branches = ! show_invisible_branches"
| Show all >>
template v-if="show_invisible_branches"
li.ref.branch.invisible v-for="branch of invisible_branches"
li.ref.branch.invisible v-for="branch of invisible_branches" :class="{is_head:branch.name===head_branch}"
button :style="{color:branch.color}" @click="scroll_to_branch_tip(branch)" title="Jump to branch tip" v-drag="branch.name" v-drop="branch_drop(branch.name)"
| {{ branch.name }}
li Click on any of the branch names to scroll to the tip of it.
li Click on any of the branch names to jump to the tip of it.
aside#actions.center.gap-5
input#txt-filter v-if="txt_filter!==null" v-model="txt_filter" placeholder="Type to search for commit summary, hash, author" ref="txt_filter_ref" @keyup.enter="txt_filter_enter($event)"
label#filter-type-filter.row.align-center v-if="txt_filter!==null"
input type="radio" v-model="txt_filter_type" value="filter"
| Filter
label#filter-type-search.row.align-center v-if="txt_filter!==null"
input type="radio" v-model="txt_filter_type" value="search"
| Search
git-action-button.global-action v-for="action of global_actions" :git_action="action" @change="do_log()"

button#toggle-txt-filter.btn @click="txt_filter_toggle_dialog()" title="Open search/filter dialog. Also via Ctrl+f" 🔍
button#refresh.btn @click="do_log()" title="Refresh" ⟳
recycle-scroller#commits.scroller.fill-w.flex-1 role="list" :items="commits" :item-size="scroll_item_height" v-slot="{ item: commit }" key-field="i" :buffer="scroll_pixel_buffer" :emit-update="true" @update="commits_scroller_updated" ref="commits_scroller_ref" tabindex="-1"
.row.commit :class="commit === selected_commit ? 'active' : null"
aside#search.center.gap-5.justify-flex-end
input#txt-filter v-model="txt_filter" placeholder="🔍 search subject, hash, author" ref="txt_filter_ref" @keyup.enter="txt_filter_enter($event)"
button#clear-filter v-if="txt_filter" @click="clear_filter()"
| ✖
label#filter-type-filter.row.align-center
input type="radio" v-model="txt_filter_type" value="filter"
| Filter
label#filter-type-search.row.align-center
input type="radio" v-model="txt_filter_type" value="search"
| Search
recycle-scroller#log.scroller.fill-w.flex-1 role="list" :items="commits" v-slot="{ item: commit }" key-field="i" size-field="scroll_height" :buffer="0" :emit-update="true" @update="commits_scroller_updated" ref="commits_scroller_ref" tabindex="-1"
.row.commit :class="{active:commit===selected_commit,empty:!commit.hash}"
.vis :style="vis_style"
span.vis-v v-for="v of commit.vis" :style="v.branch? {color:v.branch.color} : undefined" :class="{is_head:v.branch&&v.branch.name===head_branch}" :data-branch-name="v.branch? v.branch.name : undefined"
| {{ v.char }}
.info.flex-1.row.gap-20 v-if="commit.hash" @click="commit_clicked(commit)"
.subject.flex-1
button
.hash.flex-noshrink {{ commit.hash }}
.subject-wrapper.flex-1.row.align-center
div.vis.vis-v :style="commit.branch? {color:commit.branch.color} : undefined"
| ●
.ref v-for="ref of commit.refs" :class="{is_head:ref.name===head_branch,branch:ref.type==='branch'}" v-drag="ref.type==='branch'?ref.name:undefined" v-drop="ref.type==='branch'?branch_drop(ref.name):undefined"
span :style="{color:ref.color}"
| {{ ref.name }}
span {{ commit.subject }}
.author.flex-noshrink {{ commit.author_name }}
.stats.flex-noshrink.row.align-center.justify-flex-end.gap-5 v-if="commit.stats"
.changes title="Changed lines in amount of files"
.subject {{ commit.subject }}
.author.flex-noshrink :title="commit.author_email"
| {{ commit.author_name }}
.stats.flex-noshrink.row.align-center.justify-flex-end.gap-5
.changes v-if="commit.stats" title="Changed lines in amount of files"
span: strong {{ commit.stats.insertions + commit.stats.deletions }}
span.grey in
span.grey {{ commit.stats.files_changed }}
progress.diff :value="(commit.stats.insertions / (commit.stats.insertions + commit.stats.deletions)) || 0" title="Ratio insertions / deletions"
progress.diff v-if="commit.stats" :value="(commit.stats.insertions / (commit.stats.insertions + commit.stats.deletions)) || 0" title="Ratio insertions / deletions"
.datetime.flex-noshrink {{ commit.datetime }}
button
.hash.flex-noshrink {{ commit.hash }}
#selected-commit.flex-noshrink
selected-commit.active.padding v-if="selected_commit" :commit="selected_commit" @change="do_log()"
#right.flex-1.col
selected-commit#selected-commit.active.flex-1.fill-w.padding v-if="selected_commit" :commit="selected_commit" @change="do_log()"
#resize-hint v-if="selected_commit"
| ← resize

popup v-if="drag_drop_target_branch_name" @close="drag_drop_target_branch_name=''"
.drag-drop-branch-actions.col.center.gap-5
Expand All @@ -76,7 +82,6 @@ details
font-style italic
display inline
padding 2px 4px
margin 0 5px
border 1px solid #505050
border-radius 7px
white-space pre
Expand All @@ -89,10 +94,14 @@ details
&.dragenter
background white !important
color red !important
#log
#left
width calc(100% - 400px)
resize horizontal
overflow auto
position relative
> nav
margin 5px 0
padding 5px 0
margin 0 0 5px 0
position sticky
top 5px
z-index 2
Expand All @@ -102,52 +111,78 @@ details
:deep(button.btn)
font-size 21px
padding 0 2px
#toggle-txt-filter.btn
margin-left 15px
input#txt-filter
width 425px
font-size 12px
border 2px solid orange
> aside#search
padding 6px
input#txt-filter
width 425px
font-family monospace
padding 0
background black
color #d5983d
#clear-filter
position relative
right 20px
width 0
color grey
.active
box-shadow 0 0 3px 0px gold
.is_head
box-shadow 0px 0px 6px 4px #ffffff30, 0px 0px 4px 0px #ffffff30 inset
border-radius 25px
.is_head
box-shadow 0px 0px 6px 4px #ffffff30, 0px 0px 4px 0px #ffffff30 inset
border-radius 25px
#commits.scroller
&:focus
// Need tabindex so that pgUp/Down works consistently (idk why, probably vvs bug), but focus outline adds no value here
outline none
.commit
--h 22px // must be synced with JS
height var(--h)
line-height var(--h)
.vis
font-weight bold
font-size 13px
font-family 'OverpassMono-Bold', monospace
.info
cursor pointer
> *
white-space pre
overflow hidden
text-overflow ellipsis
> .subject
min-width 150px
.hash, > .datetime
#log.scroller
&:focus
// Need tabindex so that pgUp/Down works consistently (idk why, probably vvs bug), but focus outline adds no value here
outline none
.commit
--h 18px // must be synced with JS
&.empty
--h 11px // same
height var(--h)
line-height var(--h)
&.active
box-shadow 0 0 3px 0px gold
.vis
font-weight bold
font-family monospace
> .datetime, > .author
color grey
> .datetime
font-size 12px
.stats
width 120px
#selected-commit
width 350px
overflow auto
.info
cursor pointer
border-top 1px solid #2e2e2e
> *
white-space pre
overflow hidden
text-overflow ellipsis
.subject, .datetime, .hash
font-family monospace
> .subject-wrapper
min-width 150px
display inline-flex
> *
text-overflow ellipsis
> .ref
overflow hidden
flex 0 3 auto
min-width 55px
margin 0 1px
> .subject
overflow hidden
flex 1 1 30%
> .datetime, > .author
color grey
> .datetime
font-size 12px
.stats
width 93px
#right
#selected-commit
overflow auto
#resize-hint
color #555555
font-size small
padding-left 10px
</style>

<style lang="stylus">
.vue-recycle-scroller__item-view.hover > .commit
background #323232
Expand Down
32 changes: 18 additions & 14 deletions web/src/views/SelectedCommit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,35 @@ div
h3 Changed files:
ul.changed-files
li v-for="file of changed_files"
button.row.center.gap-5 @click="show_diff(file.path)"
.change-count {{ (file.insertions + file.deletions) || 0 }}
button.change.row.center.gap-5 @click="show_diff(file.path)"
.count {{ (file.insertions + file.deletions) || 0 }}
progress.diff :value="(file.insertions / (file.insertions + file.deletions)) || 0" title="Ratio insertions / deletions"
.flex-1 {{ file.path }}
.path.flex-1 {{ file.path }}
</template>

<script lang="coffee" src="./SelectedCommit.coffee"></script>

<style lang="stylus">
#selected-commit
width 350px
h2.summary
white-space pre
overflow hidden
text-overflow ellipsis
<style lang="stylus" scoped>
h2.summary
white-space pre-line
word-break break-word
overflow hidden
text-overflow ellipsis
.selected-input
width: clamp(200px, 50vw, 50vw)
.changed-files
padding 0
white-space pre
overflow auto
.change-count
.change
font-family monospace
text-align right
width 2rem
> .count
text-align right
width 2rem
> .path
white-space pre
// white-space pre-line
// text-indent -1rem
// padding-left 1rem
.body
white-space pre-wrap
word-break break-word
Expand Down
Loading

0 comments on commit 1496dac

Please sign in to comment.