mirror of
https://github.com/go-gitea/gitea.git
synced 2025-10-31 21:28:11 +09:00
21a1d76911
### The CustomEvent prefix There was already `ce-quick-submit`, the `ce-` prefix seems better than `us-`. Rename the only `us-` prefixed `us-load-context-popup` to `ce-` prefixed. ### Styles and Attributes in Go HTML Template https://github.com/go-gitea/gitea/pull/21855#issuecomment-1429643073 Suggest to stick to `class="c1 {{if $var}}c2{{end}}"` The readability and maintainability should be applied to the code which is read by developers, but not for the generated outputs. The template code is the code for developers, while the generated HTML are only for browsers. The `class="c1 {{if $var}}c2{{end}}"` style is clearer for developers and more intuitive, and the generated HTML also makes browsers happy (a few spaces do not affect anything) Think about a more complex case: * `class="{{if $active}}active{{end}} menu item {{if $show}}show{{end}} {{if $warn}}warn{{end}}"` * --vs-- * `class="{{if $active}}active {{end}}menu item{{if $show}} show{{end}}{{if $warn}} warn{{end}}"` The first style make it clearer to see each CSS class name with its `{{if}}` block. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<template>
|
|
<div ref="root">
|
|
<div v-if="loading" class="ui active centered inline loader"/>
|
|
<div v-if="!loading && issue !== null">
|
|
<p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
|
|
<p><svg-icon :name="icon" :class="[color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
|
|
<p>{{ body }}</p>
|
|
<div>
|
|
<div
|
|
v-for="label in labels"
|
|
:key="label.name"
|
|
class="ui label"
|
|
:style="{ color: label.textColor, backgroundColor: label.color }"
|
|
>
|
|
{{ label.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!loading && issue === null">
|
|
<p><small>{{ i18nErrorOccurred }}</small></p>
|
|
<p>{{ i18nErrorMessage }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import $ from 'jquery';
|
|
import {SvgIcon} from '../svg.js';
|
|
import {useLightTextOnBackground} from '../utils.js';
|
|
|
|
const {appSubUrl, i18n} = window.config;
|
|
|
|
export default {
|
|
components: {SvgIcon},
|
|
data: () => ({
|
|
loading: false,
|
|
issue: null,
|
|
i18nErrorOccurred: i18n.error_occurred,
|
|
i18nErrorMessage: null,
|
|
}),
|
|
computed: {
|
|
createdAt() {
|
|
return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
|
|
},
|
|
|
|
body() {
|
|
const body = this.issue.body.replace(/\n+/g, ' ');
|
|
if (body.length > 85) {
|
|
return `${body.substring(0, 85)}…`;
|
|
}
|
|
return body;
|
|
},
|
|
|
|
icon() {
|
|
if (this.issue.pull_request !== null) {
|
|
if (this.issue.state === 'open') {
|
|
return 'octicon-git-pull-request'; // Open PR
|
|
} else if (this.issue.pull_request.merged === true) {
|
|
return 'octicon-git-merge'; // Merged PR
|
|
}
|
|
return 'octicon-git-pull-request'; // Closed PR
|
|
} else if (this.issue.state === 'open') {
|
|
return 'octicon-issue-opened'; // Open Issue
|
|
}
|
|
return 'octicon-issue-closed'; // Closed Issue
|
|
},
|
|
|
|
color() {
|
|
if (this.issue.state === 'open') {
|
|
return 'green';
|
|
} else if (this.issue.pull_request !== null && this.issue.pull_request.merged === true) {
|
|
return 'purple';
|
|
}
|
|
return 'red';
|
|
},
|
|
|
|
labels() {
|
|
return this.issue.labels.map((label) => {
|
|
let textColor;
|
|
if (useLightTextOnBackground(label.color)) {
|
|
textColor = '#eeeeee';
|
|
} else {
|
|
textColor = '#111111';
|
|
}
|
|
return {name: label.name, color: `#${label.color}`, textColor};
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
|
|
const data = e.detail;
|
|
if (!this.loading && this.issue === null) {
|
|
this.load(data);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
load(data) {
|
|
this.loading = true;
|
|
this.i18nErrorMessage = null;
|
|
$.get(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`).done((issue) => {
|
|
this.issue = issue;
|
|
}).fail((jqXHR) => {
|
|
if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
|
|
this.i18nErrorMessage = jqXHR.responseJSON.message;
|
|
} else {
|
|
this.i18nErrorMessage = i18n.network_error;
|
|
}
|
|
}).always(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|