Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4b8198f

Browse files
authored
Revert "Add loading Animation to Most used Language card (anuraghazra#2197)" (anuraghazra#2396)
This reverts commit77dcdab.
1 parent70f0264 commit4b8198f

File tree

5 files changed

+29
-76
lines changed

5 files changed

+29
-76
lines changed

‎api/top-langs.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default async (req, res) => {
2929
locale,
3030
border_radius,
3131
border_color,
32-
disable_animations,
3332
}=req.query;
3433
res.setHeader("Content-Type","image/svg+xml");
3534

@@ -76,7 +75,6 @@ export default async (req, res) => {
7675
border_radius,
7776
border_color,
7877
locale:locale ?locale.toLowerCase() :null,
79-
disable_animations:parseBoolean(disable_animations),
8078
}),
8179
);
8280
}catch(err){

‎readme.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,6 @@ You can provide multiple comma-separated values in the bg_color option to render
304304
-`langs_count` - Show more languages on the card, between 1-10_(number)_. Default`5`.
305305
-`exclude_repo` - Exclude specified repositories_(Comma-separated values)_. Default:`[] (blank array)`.
306306
-`custom_title` - Sets a custom title for the card_(string)_. Default`Most Used Languages`.
307-
-`disable_animations` - Disables all animations in the card_(boolean)_. Default:`false`.
308307

309308
>**Warning**
310309
>Language names should be URI-escaped, as specified in[Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)

‎src/cards/top-languages-card.js‎

Lines changed: 21 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -39,53 +39,46 @@ const getLongestLang = (arr) =>
3939
* Creates a node to display usage of a programming language in percentage
4040
* using text and a horizontal progress bar.
4141
*
42-
*@param {object} props Function properties.
42+
*@param {object[]} props Function properties.
4343
*@param {number} props.width The card width
4444
*@param {string} props.name Name of the programming language.
4545
*@param {string} props.color Color of the programming language.
4646
*@param {string} props.progress Usage of the programming language in percentage.
47-
*@param {number} props.index Index of the programming language.
4847
*@returns {string} Programming language SVG node.
4948
*/
50-
constcreateProgressTextNode=({ width, color, name, progress, index})=>{
51-
conststaggerDelay=(index+3)*150;
49+
constcreateProgressTextNode=({ width, color, name, progress})=>{
5250
constpaddingRight=95;
5351
constprogressTextX=width-paddingRight+10;
5452
constprogressWidth=width-paddingRight;
5553

5654
return`
57-
<g class="stagger" style="animation-delay:${staggerDelay}ms">
58-
<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
59-
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
60-
${createProgressNode({
61-
x:0,
62-
y:25,
63-
color,
64-
width:progressWidth,
65-
progress,
66-
progressBarBackgroundColor:"#ddd",
67-
delay:staggerDelay+300,
68-
})}
69-
</g>
55+
<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
56+
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
57+
${createProgressNode({
58+
x:0,
59+
y:25,
60+
color,
61+
width:progressWidth,
62+
progress,
63+
progressBarBackgroundColor:"#ddd",
64+
})}
7065
`;
7166
};
7267

7368
/**
7469
* Creates a text only node to display usage of a programming language in percentage.
7570
*
76-
*@param {object} props Function properties.
71+
*@param {object[]} props Function properties.
7772
*@param {Lang} props.lang Programming language object.
7873
*@param {number} props.totalSize Total size of all languages.
79-
*@param {number} props.index Index of the programming language.
8074
*@returns {string} Compact layout programming language SVG node.
8175
*/
82-
constcreateCompactLangNode=({ lang, totalSize, index})=>{
76+
constcreateCompactLangNode=({ lang, totalSize})=>{
8377
constpercentage=((lang.size/totalSize)*100).toFixed(2);
84-
conststaggerDelay=(index+3)*150;
8578
constcolor=lang.color||"#858585";
8679

8780
return`
88-
<g>
81+
<g>
8982
<circle cx="5" cy="6" r="5" fill="${color}" />
9083
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
9184
${lang.name}${percentage}%
@@ -111,6 +104,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
111104
createCompactLangNode({
112105
lang,
113106
totalSize,
107+
//@ts-ignore
114108
index,
115109
}),
116110
);
@@ -140,13 +134,12 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
140134
*/
141135
constrenderNormalLayout=(langs,width,totalLanguageSize)=>{
142136
returnflexLayout({
143-
items:langs.map((lang,index)=>{
137+
items:langs.map((lang)=>{
144138
returncreateProgressTextNode({
145-
width,
139+
width:width,
146140
name:lang.name,
147141
color:lang.color||DEFAULT_LANG_COLOR,
148142
progress:((lang.size/totalLanguageSize)*100).toFixed(2),
149-
index,
150143
});
151144
}),
152145
gap:40,
@@ -194,7 +187,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => {
194187

195188
return`
196189
<mask id="rect-mask">
197-
<rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
190+
<rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
198191
</mask>
199192
${compactProgressBar}
200193
@@ -283,7 +276,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
283276
langs_count=DEFAULT_LANGS_COUNT,
284277
border_radius,
285278
border_color,
286-
disable_animations,
287279
}=options;
288280

289281
consti18n=newI18n({
@@ -332,43 +324,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
332324
colors,
333325
});
334326

335-
if(disable_animations)card.disableAnimations();
336-
327+
card.disableAnimations();
337328
card.setHideBorder(hide_border);
338329
card.setHideTitle(hide_title);
339330
card.setCSS(
340-
`
341-
@keyframes slideInAnimation {
342-
from {
343-
width: 0;
344-
}
345-
to {
346-
width: calc(100%-100px);
347-
}
348-
}
349-
@keyframes growWidthAnimation {
350-
from {
351-
width: 0;
352-
}
353-
to {
354-
width: 100%;
355-
}
356-
}
357-
.lang-name {
358-
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
359-
fill:${colors.textColor};
360-
}
361-
.stagger {
362-
opacity: 0;
363-
animation: fadeInAnimation 0.3s ease-in-out forwards;
364-
}
365-
#rect-mask rect{
366-
animation: slideInAnimation 1s ease-in-out forwards;
367-
}
368-
.lang-progress{
369-
animation: growWidthAnimation 0.6s ease-in-out forwards;
370-
}
371-
`,
331+
`.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill:${colors.textColor} }`,
372332
);
373333

374334
returncard.render(`

‎src/cards/types.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export type TopLangOptions = CommonOptions & {
3737
layout:"compact"|"normal";
3838
custom_title:string;
3939
langs_count:number;
40-
disable_animations:boolean;
4140
};
4241

4342
typeWakaTimeOptions=CommonOptions&{

‎src/common/createProgressNode.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { clampValue } from "./utils.js";
1010
*@param {string} createProgressNodeParams.color Progress color.
1111
*@param {string} createProgressNodeParams.progress Progress value.
1212
*@param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
13-
*@param {number} createProgressNodeParams.delay Delay before animation starts.
1413
*@returns {string} Progress node.
1514
*/
1615
constcreateProgressNode=({
@@ -20,22 +19,20 @@ const createProgressNode = ({
2019
color,
2120
progress,
2221
progressBarBackgroundColor,
23-
delay,
2422
})=>{
2523
constprogressPercentage=clampValue(progress,2,100);
2624

2725
return`
2826
<svg width="${width}" x="${x}" y="${y}">
2927
<rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
30-
<svg data-testid="lang-progress" width="${progressPercentage}%">
31-
<rect
32-
height="8"
33-
fill="${color}"
34-
rx="5" ry="5" x="0" y="0"
35-
class="lang-progress"
36-
style="animation-delay:${delay}ms;"
37-
/>
38-
</svg>
28+
<rect
29+
height="8"
30+
fill="${color}"
31+
rx="5" ry="5" x="0" y="0"
32+
data-testid="lang-progress"
33+
width="${progressPercentage}%"
34+
>
35+
</rect>
3936
</svg>
4037
`;
4138
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp