Skip to content

Commit b1339e1

Browse files
dvcoldvcol
committed
fix(settings): adds interpolation description
1 parent 0d9b141 commit b1339e1

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎src/components/views/settings/SettingsLinks.vue

+70
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ import {
88
NFormItem,
99
NIcon,
1010
NInput,
11+
NLi,
12+
NP,
1113
NPopconfirm,
1214
NSelect,
1315
NSwitch,
16+
NText,
17+
NUl,
1418
} from 'naive-ui';
1519
1620
import { computed, onActivated, reactive, ref, toRaw } from 'vue';
@@ -98,6 +102,8 @@ const getType = (link: CustomLink) => {
98102
return 'success';
99103
};
100104
105+
const keywords = ['trakt', 'imdb', 'tmdb', 'tvdb', 'season', 'episode', 'title', 'alias'];
106+
101107
const formRef = ref<FormInst>();
102108
const containerRef = ref<HTMLDivElement>();
103109
</script>
@@ -118,6 +124,30 @@ const containerRef = ref<HTMLDivElement>();
118124
</NSwitch>
119125
</SettingsFormItem>
120126

127+
<NP class="template-description">
128+
<NText>{{ i18n('template_description') }}</NText>
129+
130+
<div class="keywords-header">{{ i18n('template_keywords_header') }}</div>
131+
132+
<NUl class="keywords-list">
133+
<NLi v-for="keyword of keywords" :key="keyword" class="item">
134+
<span class="keyword">{{ i18n(`template_keywords_${keyword}`) }}</span> -
135+
<span>{{ i18n(`template_keywords_${keyword}_description`) }}</span>
136+
</NLi>
137+
</NUl>
138+
139+
<NP class="keywords-example">
140+
<NText class="header">{{ i18n('template_example_line_1') }}</NText>
141+
<code class="code">
142+
<span>{{ i18n('template_example_template') }}</span>
143+
</code>
144+
<NText class="header">{{ i18n('template_example_line_2') }}</NText>
145+
<code class="code">
146+
<span>{{ i18n('template_example_result') }}</span>
147+
</code>
148+
</NP>
149+
</NP>
150+
121151
<!-- Content -->
122152
<NForm ref="formRef" :model="form">
123153
<TransitionGroup
@@ -274,6 +304,46 @@ const containerRef = ref<HTMLDivElement>();
274304
}
275305
}
276306
307+
.template-description {
308+
margin: 0;
309+
font-size: 1rem;
310+
white-space: pre-wrap;
311+
312+
.keywords {
313+
&-header {
314+
margin-top: 1rem;
315+
}
316+
317+
&-list {
318+
margin: 1rem;
319+
320+
.keyword {
321+
color: var(--white-mute);
322+
font-weight: 600;
323+
transition: color 0.3s var(--n-bezier);
324+
}
325+
}
326+
327+
&-example {
328+
margin: 1.5rem 0;
329+
330+
.code {
331+
display: flex;
332+
justify-content: center;
333+
margin: 1rem;
334+
color: var(--white);
335+
font-weight: 400;
336+
337+
span {
338+
padding: 0.25ch 1ch;
339+
background: var(--code-grey);
340+
border-radius: 4px;
341+
}
342+
}
343+
}
344+
}
345+
}
346+
277347
.form-switch {
278348
display: flex;
279349
flex: 1 1 auto;

‎src/i18n/en/settings/settings-links.json

+88
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,93 @@
3030
"settings__links__label_open_in_background": {
3131
"message": "Open links in background (popup stay active)",
3232
"description": "Label for the open in new tab checkbox"
33+
},
34+
"settings__links__template_description": {
35+
"message": "When using keywords enclosed in double accolades, some specific data can be dynamically inserted into a template URL. Media information will be interpolated conditionally on the context where the link appear. For example, if the link is in a movie context, the season and episode keywords will be empty.",
36+
"description": "Description for the template interpolation feature"
37+
},
38+
"settings__links__template_keywords_header": {
39+
"message": "The following keywords are supported",
40+
"description": "Header for the keywords section"
41+
},
42+
"settings__links__template_keywords_trakt": {
43+
"message": "trakt (string)",
44+
"description": "Label for the trakt keyword"
45+
},
46+
"settings__links__template_keywords_trakt_description": {
47+
"message": "The trakt ID",
48+
"description": "Description for the trakt keyword"
49+
},
50+
"settings__links__template_keywords_imdb": {
51+
"message": "imdb (string)",
52+
"description": "Label for the imdb keyword"
53+
},
54+
"settings__links__template_keywords_imdb_description": {
55+
"message": "The imdb ID",
56+
"description": "Description for the imdb keyword"
57+
},
58+
"settings__links__template_keywords_tmdb": {
59+
"message": "tmdb (string)",
60+
"description": "Label for the tmdb keyword"
61+
},
62+
"settings__links__template_keywords_tmdb_description": {
63+
"message": "The tmdb ID",
64+
"description": "Description for the tmdb keyword"
65+
},
66+
"settings__links__template_keywords_tvdb": {
67+
"message": "tvdb (string)",
68+
"description": "Label for the tvdb keyword"
69+
},
70+
"settings__links__template_keywords_tvdb_description": {
71+
"message": "The tvdb ID",
72+
"description": "Description for the tvdb keyword"
73+
},
74+
"settings__links__template_keywords_season": {
75+
"message": "season (number)",
76+
"description": "Label for the season keyword"
77+
},
78+
"settings__links__template_keywords_season_description": {
79+
"message": "The season number, if applicable",
80+
"description": "Description for the season keyword"
81+
},
82+
"settings__links__template_keywords_episode": {
83+
"message": "episode (number)",
84+
"description": "Label for the episode keyword"
85+
},
86+
"settings__links__template_keywords_episode_description": {
87+
"message": "The episode number, if applicable",
88+
"description": "Description for the episode keyword"
89+
},
90+
"settings__links__template_keywords_title": {
91+
"message": "title (string)",
92+
"description": "Label for the title keyword"
93+
},
94+
"settings__links__template_keywords_title_description": {
95+
"message": "The title of the media",
96+
"description": "Description for the title keyword"
97+
},
98+
"settings__links__template_keywords_alias": {
99+
"message": "alias (string)",
100+
"description": "Label for the alias keyword"
101+
},
102+
"settings__links__template_keywords_alias_description": {
103+
"message": "An optional alias for a show or movie (defaults to title if none exist)",
104+
"description": "Description for the alias keyword"
105+
},
106+
"settings__links__template_example_line_1": {
107+
"message": "For example",
108+
"description": "Line 1 for the Example for the trakt keyword"
109+
},
110+
"settings__links__template_example_line_2": {
111+
"message": "Interpolates to",
112+
"description": "Line2 for the Example for the trakt keyword"
113+
},
114+
"settings__links__template_example_template": {
115+
"message": "https://www.my-url.com/search/s{{season}}e{{episode}}+{{alias}}",
116+
"description": "Example template for the trakt keyword"
117+
},
118+
"settings__links__template_example_result": {
119+
"message": "https://www.my-url.com/search/s01e05+my-alias",
120+
"description": "Result for the example template for the trakt keyword"
33121
}
34122
}

‎src/styles/base.scss

+2
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@
6969
--white-15: rgb(255 255 255 / 15%);
7070
--white-50: rgb(255 255 255 / 50%);
7171
--white-70: rgb(255 255 255 / 70%);
72+
--white-80: rgb(255 255 255 / 80%);
7273
--black: #181818;
74+
--code-grey: rgb(228 228 228 / 20%);
7375
--border-grey: rgb(70 70 70);
7476
--border-white: rgb(255 255 255 / 20%);
7577
--primary-color: #63e2b7;

0 commit comments

Comments
 (0)