diff options
author | Phil Hughes <me@iamphill.com> | 2018-10-15 13:06:54 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-10-23 11:12:37 +0300 |
commit | d95465db2cf79c0c95584e23c005a14302fc2c88 (patch) | |
tree | 0a882bd348db1d98f5b3e8f39ba17de1297f04b5 /app/assets/javascripts/vue_shared/components/file_row.vue | |
parent | 2d00e7fce5b33f2a8c89dccd33d5d1758cc846c7 (diff) |
Dynamically truncate the text in the file row
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/file_row.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/file_row.vue | 26 |
1 files changed, 25 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 7c34d776c7f..510c5eb5fca 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -39,10 +39,16 @@ export default { required: false, default: 'name', }, + shouldTruncateStart: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { mouseOver: false, + truncateStart: 0, }; }, computed: { @@ -65,6 +71,13 @@ export default { 'is-open': this.file.opened, }; }, + outputText() { + const text = this.file[this.displayTextKey]; + + if (this.truncateStart === 0) return text; + + return `...${text.substring(this.truncateStart, text.length)}`; + }, }, watch: { 'file.active': function fileActiveWatch(active) { @@ -77,6 +90,15 @@ export default { if (this.hasPathAtCurrentRoute()) { this.scrollIntoView(true); } + + if (this.shouldTruncateStart) { + const { scrollWidth, offsetWidth } = this.$refs.textOutput; + const textOverflow = scrollWidth - offsetWidth; + + if (textOverflow > 0) { + this.truncateStart = Math.ceil(textOverflow / 5) + 3; + } + } }, methods: { toggleTreeOpen(path) { @@ -144,6 +166,7 @@ export default { class="file-row-name-container" > <span + ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated" > @@ -161,7 +184,7 @@ export default { :size="16" class="append-right-5" /> - {{ file[displayTextKey] }} + {{ outputText }} </span> <component :is="extraComponent" @@ -181,6 +204,7 @@ export default { :extra-component="extraComponent" :show-changed-icon="showChangedIcon" :display-text-key="displayTextKey" + :should-truncate-start="shouldTruncateStart" @toggleTreeOpen="toggleTreeOpen" @clickFile="clickedFile" /> |