From f0e23800c3e10ec2881ec8cbb7619b590a82ede4 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 20 Jul 2017 16:20:48 +0100
Subject: [PATCH] Covert vue components to single file components
---
app/assets/javascripts/repo/repo_file.js | 32 ---------------
app/assets/javascripts/repo/repo_file.vue | 38 ++++++++++++++++++
.../javascripts/repo/repo_file_options.js | 28 -------------
.../javascripts/repo/repo_file_options.vue | 33 ++++++++++++++++
.../javascripts/repo/repo_loading_file.js | 34 ----------------
.../javascripts/repo/repo_loading_file.vue | 39 +++++++++++++++++++
...v_directory.js => repo_prev_directory.vue} | 18 +++++----
app/assets/javascripts/repo/repo_sidebar.js | 8 ++--
app/assets/javascripts/repo/repo_store.js | 2 +-
.../repo/{repo_tab.js => repo_tab.vue} | 25 +++++++-----
app/assets/javascripts/repo/repo_tabs.js | 2 +-
11 files changed, 142 insertions(+), 117 deletions(-)
delete mode 100644 app/assets/javascripts/repo/repo_file.js
create mode 100644 app/assets/javascripts/repo/repo_file.vue
delete mode 100644 app/assets/javascripts/repo/repo_file_options.js
create mode 100644 app/assets/javascripts/repo/repo_file_options.vue
delete mode 100644 app/assets/javascripts/repo/repo_loading_file.js
create mode 100644 app/assets/javascripts/repo/repo_loading_file.vue
rename app/assets/javascripts/repo/{repo_prev_directory.js => repo_prev_directory.vue} (61%)
rename app/assets/javascripts/repo/{repo_tab.js => repo_tab.vue} (59%)
diff --git a/app/assets/javascripts/repo/repo_file.js b/app/assets/javascripts/repo/repo_file.js
deleted file mode 100644
index ce669861619..00000000000
--- a/app/assets/javascripts/repo/repo_file.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const RepoFile = {
- template: `
- <tr v-if='!loading.tree || hasFiles' :class='{"active": activeFile.url === file.url}'>
- <td>
- <i class='fa' :class='file.icon' :style='{"margin-left": file.level * 10 + "px"}'></i>
- <a :href='file.url' @click.prevent='linkClicked(file)' class='repo-file-name' :title='file.url'>{{file.name}}</a>
- </td>
- <td v-if='!isMini' class='hidden-sm hidden-xs'>
- <div class='commit-message'>{{file.lastCommitMessage}}</div>
- </td>
- <td v-if='!isMini' class='hidden-xs'>
- <span>{{file.lastCommitUpdate}}</span>
- </td>
- </tr>
- `,
- props: {
- name: 'repo-file',
- file: Object,
- isTree: Boolean,
- isMini: Boolean,
- loading: Object,
- hasFiles: Boolean,
- activeFile: Object,
- },
-
- methods: {
- linkClicked(file) {
- this.$emit('linkclicked', file);
- },
- },
-};
-export default RepoFile;
diff --git a/app/assets/javascripts/repo/repo_file.vue b/app/assets/javascripts/repo/repo_file.vue
new file mode 100644
index 00000000000..0aa88921133
--- /dev/null
+++ b/app/assets/javascripts/repo/repo_file.vue
@@ -0,0 +1,38 @@
+<script>
+const RepoFile = {
+ props: {
+ name: 'repo-file',
+ file: Object,
+ isTree: Boolean,
+ isMini: Boolean,
+ loading: Object,
+ hasFiles: Boolean,
+ activeFile: Object,
+ },
+
+ methods: {
+ linkClicked(file) {
+ this.$emit('linkclicked', file);
+ },
+ },
+};
+
+export default RepoFile;
+</script>
+
+<template>
+<tr v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
+ <td>
+ <i class="fa" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+ <a :href="file.url" @click.prevent="linkClicked(file)" class="repo-file-name" :title="file.url">{{file.name}}</a>
+ </td>
+
+ <td v-if="!isMini" class="hidden-sm hidden-xs">
+ <div class="commit-message">{{file.lastCommitMessage}}</div>
+ </td>
+
+ <td v-if="!isMini" class="hidden-xs">
+ <span>{{file.lastCommitUpdate}}</span>
+ </td>
+</tr>
+</template>
diff --git a/app/assets/javascripts/repo/repo_file_options.js b/app/assets/javascripts/repo/repo_file_options.js
deleted file mode 100644
index 3efa6d7c13d..00000000000
--- a/app/assets/javascripts/repo/repo_file_options.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const RepoFileOptions = {
- template: `
- <tr v-if='isMini' class='repo-file-options'>
- <td>
- <span class='title'>{{projectName}}</span>
- <ul>
- <li>
- <a href='#' title='New File'>
- <i class='fa fa-file-o'></i>
- </a>
- </li>
- <li>
- <a href='#' title='New Folder'>
- <i class='fa fa-folder-o'></i>
- </a>
- </li>
- </ul>
- </td>
- </tr>
- `,
- props: {
- name: 'repo-file-options',
- isMini: Boolean,
- projectName: String,
- },
-};
-
-export default RepoFileOptions;
diff --git a/app/assets/javascripts/repo/repo_file_options.vue b/app/assets/javascripts/repo/repo_file_options.vue
new file mode 100644
index 00000000000..361232b6b2c
--- /dev/null
+++ b/app/assets/javascripts/repo/repo_file_options.vue
@@ -0,0 +1,33 @@
+<script>
+const RepoFileOptions = {
+ props: {
+ name: 'repo-file-options',
+ isMini: Boolean,
+ projectName: String,
+ },
+};
+
+export default RepoFileOptions;
+</script>
+
+<template>
+<tr v-if="isMini" class="repo-file-options">
+ <td>
+ <span class="title">{{projectName}}</span>
+
+ <ul>
+ <li>
+ <a href="#" title="New File">
+ <i class="fa fa-file-o"></i>
+ </a>
+ </li>
+
+ <li>
+ <a href="#" title="New Folder">
+ <i class="fa fa-folder-o"></i>
+ </a>
+ </li>
+ </ul>
+ </td>
+ </tr>
+</template>
diff --git a/app/assets/javascripts/repo/repo_loading_file.js b/app/assets/javascripts/repo/repo_loading_file.js
deleted file mode 100644
index 2e02710fc89..00000000000
--- a/app/assets/javascripts/repo/repo_loading_file.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const RepoLoadingFile = {
- template: `
- <tr v-if='loading.tree && !hasFiles'>
- <td>
- <div class="animation-container animation-container-small">
- <div v-for="n in 6" :class="lineOfCode(n)"></div>
- </div>
- </td>
- <td v-if="!isMini" class='hidden-sm hidden-xs'>
- <div class="animation-container">
- <div v-for="n in 6" :class="lineOfCode(n)"></div>
- </div>
- </td>
- <td v-if="!isMini" class='hidden-xs'>
- <div class="animation-container animation-container-small">
- <div v-for="n in 6" :class="lineOfCode(n)"></div>
- </div>
- </td>
- </tr>
- `,
-
- methods: {
- lineOfCode(n) {
- return `line-of-code-${n}`;
- },
- },
-
- props: {
- loading: Object,
- hasFiles: Boolean,
- isMini: Boolean,
- },
-};
-export default RepoLoadingFile;
diff --git a/app/assets/javascripts/repo/repo_loading_file.vue b/app/assets/javascripts/repo/repo_loading_file.vue
new file mode 100644
index 00000000000..677c7cbe12d
--- /dev/null
+++ b/app/assets/javascripts/repo/repo_loading_file.vue
@@ -0,0 +1,39 @@
+<script>
+const RepoLoadingFile = {
+ methods: {
+ lineOfCode(n) {
+ return `line-of-code-${n}`;
+ },
+ },
+
+ props: {
+ loading: Object,
+ hasFiles: Boolean,
+ isMini: Boolean,
+ },
+};
+
+export default RepoLoadingFile;
+</script>
+
+<template>
+<tr v-if="loading.tree && !hasFiles">
+ <td>
+ <div class="animation-container animation-container-small">
+ <div v-for="n in 6" :class="lineOfCode(n)"></div>
+ </div>
+ </td>
+
+ <td v-if="!isMini" class="hidden-sm hidden-xs">
+ <div class="animation-container">
+ <div v-for="n in 6" :class="lineOfCode(n)"></div>
+ </div>
+ </td>
+
+ <td v-if="!isMini" class="hidden-xs">
+ <div class="animation-container animation-container-small">
+ <div v-for="n in 6" :class="lineOfCode(n)"></div>
+ </div>
+ </td>
+</tr>
+</template>
diff --git a/app/assets/javascripts/repo/repo_prev_directory.js b/app/assets/javascripts/repo/repo_prev_directory.vue
similarity index 61%
rename from app/assets/javascripts/repo/repo_prev_directory.js
rename to app/assets/javascripts/repo/repo_prev_directory.vue
index bd341510525..1201bd3c877 100644
--- a/app/assets/javascripts/repo/repo_prev_directory.js
+++ b/app/assets/javascripts/repo/repo_prev_directory.vue
@@ -1,11 +1,5 @@
+<script>
const RepoPreviousDirectory = {
- template: `
- <tr>
- <td colspan='3'>
- <a :href='prevUrl' @click.prevent='linkClicked(prevUrl)'>..</a>
- </td>
- </tr>
- `,
props: {
name: 'repo-previous-directory',
prevUrl: String,
@@ -17,4 +11,14 @@ const RepoPreviousDirectory = {
},
},
};
+
export default RepoPreviousDirectory;
+</script>
+
+<template>
+<tr>
+ <td colspan="3">
+ <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
+ </td>
+</tr>
+</template>
diff --git a/app/assets/javascripts/repo/repo_sidebar.js b/app/assets/javascripts/repo/repo_sidebar.js
index d8037786399..0af2aeef6d7 100644
--- a/app/assets/javascripts/repo/repo_sidebar.js
+++ b/app/assets/javascripts/repo/repo_sidebar.js
@@ -2,10 +2,10 @@ import Vue from 'vue';
import Service from './repo_service';
import Helper from './repo_helper';
import Store from './repo_store';
-import RepoPreviousDirectory from './repo_prev_directory';
-import RepoFileOptions from './repo_file_options';
-import RepoFile from './repo_file';
-import RepoLoadingFile from './repo_loading_file';
+import RepoPreviousDirectory from './repo_prev_directory.vue';
+import RepoFileOptions from './repo_file_options.vue';
+import RepoFile from './repo_file.vue';
+import RepoLoadingFile from './repo_loading_file.vue';
import RepoMiniMixin from './repo_mini_mixin';
export default class RepoSidebar {
diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js
index 612b7b61158..87088cfdd89 100644
--- a/app/assets/javascripts/repo/repo_store.js
+++ b/app/assets/javascripts/repo/repo_store.js
@@ -55,7 +55,7 @@ const RepoStore = {
toggleRawPreview() {
this.activeFile.raw = !this.activeFile.raw;
- this.activeFileLabel = this.activeFile.raw ? 'Display rendered file' : 'Display source';
+ this.activeFileLabel = this.activeFile.raw ? 'Display rendered file' : 'Display source';
},
setActiveFiles(file) {
diff --git a/app/assets/javascripts/repo/repo_tab.js b/app/assets/javascripts/repo/repo_tab.vue
similarity index 59%
rename from app/assets/javascripts/repo/repo_tab.js
rename to app/assets/javascripts/repo/repo_tab.vue
index 40a81c63ef7..11456a7ab8f 100644
--- a/app/assets/javascripts/repo/repo_tab.js
+++ b/app/assets/javascripts/repo/repo_tab.vue
@@ -1,16 +1,7 @@
-import RepoHelper from './repo_helper';
+<script>
import RepoStore from './repo_store';
const RepoTab = {
- template: `
- <li>
- <a href='#' @click.prevent='xClicked(tab)' v-if='!tab.loading'>
- <i class='fa' :class="changedClass"></i>
- </a>
- <a href='#' v-if='!tab.loading' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
- <i v-if='tab.loading' class='fa fa-spinner fa-spin'></i>
- </li>
- `,
props: {
name: 'repo-tab',
tab: Object,
@@ -36,4 +27,18 @@ const RepoTab = {
},
},
};
+
export default RepoTab;
+</script>
+
+<template>
+<li>
+ <a href="#" @click.prevent="xClicked(tab)" v-if="!tab.loading">
+ <i class="fa" :class="changedClass"></i>
+ </a>
+
+ <a href="#" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
+
+ <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
+</li>
+</template>
diff --git a/app/assets/javascripts/repo/repo_tabs.js b/app/assets/javascripts/repo/repo_tabs.js
index d55dd2fd26c..073438a14a5 100644
--- a/app/assets/javascripts/repo/repo_tabs.js
+++ b/app/assets/javascripts/repo/repo_tabs.js
@@ -1,6 +1,6 @@
import Vue from 'vue';
import Store from './repo_store';
-import RepoTab from './repo_tab';
+import RepoTab from './repo_tab.vue';
import RepoMiniMixin from './repo_mini_mixin';
export default class RepoTabs {
--
2.30.9