From 4b8198fa2198da394b71e43fe4c59862a7014287 Mon Sep 17 00:00:00 2001 From: Rick Staa Date: Thu, 12 Jan 2023 22:52:34 +0100 Subject: [PATCH] Revert "Add loading Animation to Most used Language card (#2197)" (#2396) This reverts commit 77dcdab42c306fd49e71e32a2335d6c06a90baf1. --- api/top-langs.js | 2 - readme.md | 1 - src/cards/top-languages-card.js | 82 ++++++++------------------------ src/cards/types.d.ts | 1 - src/common/createProgressNode.js | 19 ++++---- 5 files changed, 29 insertions(+), 76 deletions(-) diff --git a/api/top-langs.js b/api/top-langs.js index 19cccb894e33a..d183d3b455ca0 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -29,7 +29,6 @@ export default async (req, res) => { locale, border_radius, border_color, - disable_animations, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -76,7 +75,6 @@ export default async (req, res) => { border_radius, border_color, locale: locale ? locale.toLowerCase() : null, - disable_animations: parseBoolean(disable_animations), }), ); } catch (err) { diff --git a/readme.md b/readme.md index 716bda22758c6..bfe042fcc2032 100644 --- a/readme.md +++ b/readme.md @@ -304,7 +304,6 @@ You can provide multiple comma-separated values in the bg_color option to render - `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`. - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`. - `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`. -- `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`. > **Warning** > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 9396ff8e73d5e..602d1b811b5df 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -39,53 +39,46 @@ const getLongestLang = (arr) => * Creates a node to display usage of a programming language in percentage * using text and a horizontal progress bar. * - * @param {object} props Function properties. + * @param {object[]} props Function properties. * @param {number} props.width The card width * @param {string} props.name Name of the programming language. * @param {string} props.color Color of the programming language. * @param {string} props.progress Usage of the programming language in percentage. - * @param {number} props.index Index of the programming language. * @returns {string} Programming language SVG node. */ -const createProgressTextNode = ({ width, color, name, progress, index }) => { - const staggerDelay = (index + 3) * 150; +const createProgressTextNode = ({ width, color, name, progress }) => { const paddingRight = 95; const progressTextX = width - paddingRight + 10; const progressWidth = width - paddingRight; return ` - - ${name} - ${progress}% - ${createProgressNode({ - x: 0, - y: 25, - color, - width: progressWidth, - progress, - progressBarBackgroundColor: "#ddd", - delay: staggerDelay + 300, - })} - + ${name} + ${progress}% + ${createProgressNode({ + x: 0, + y: 25, + color, + width: progressWidth, + progress, + progressBarBackgroundColor: "#ddd", + })} `; }; /** * Creates a text only node to display usage of a programming language in percentage. * - * @param {object} props Function properties. + * @param {object[]} props Function properties. * @param {Lang} props.lang Programming language object. * @param {number} props.totalSize Total size of all languages. - * @param {number} props.index Index of the programming language. * @returns {string} Compact layout programming language SVG node. */ -const createCompactLangNode = ({ lang, totalSize, index }) => { +const createCompactLangNode = ({ lang, totalSize }) => { const percentage = ((lang.size / totalSize) * 100).toFixed(2); - const staggerDelay = (index + 3) * 150; const color = lang.color || "#858585"; return ` - + ${lang.name} ${percentage}% @@ -111,6 +104,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => { createCompactLangNode({ lang, totalSize, + // @ts-ignore index, }), ); @@ -140,13 +134,12 @@ const createLanguageTextNode = ({ langs, totalSize }) => { */ const renderNormalLayout = (langs, width, totalLanguageSize) => { return flexLayout({ - items: langs.map((lang, index) => { + items: langs.map((lang) => { return createProgressTextNode({ - width, + width: width, name: lang.name, color: lang.color || DEFAULT_LANG_COLOR, progress: ((lang.size / totalLanguageSize) * 100).toFixed(2), - index, }); }), gap: 40, @@ -194,7 +187,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => { return ` - + ${compactProgressBar} @@ -283,7 +276,6 @@ const renderTopLanguages = (topLangs, options = {}) => { langs_count = DEFAULT_LANGS_COUNT, border_radius, border_color, - disable_animations, } = options; const i18n = new I18n({ @@ -332,43 +324,11 @@ const renderTopLanguages = (topLangs, options = {}) => { colors, }); - if (disable_animations) card.disableAnimations(); - + card.disableAnimations(); card.setHideBorder(hide_border); card.setHideTitle(hide_title); card.setCSS( - ` - @keyframes slideInAnimation { - from { - width: 0; - } - to { - width: calc(100%-100px); - } - } - @keyframes growWidthAnimation { - from { - width: 0; - } - to { - width: 100%; - } - } - .lang-name { - font: 400 11px "Segoe UI", Ubuntu, Sans-Serif; - fill: ${colors.textColor}; - } - .stagger { - opacity: 0; - animation: fadeInAnimation 0.3s ease-in-out forwards; - } - #rect-mask rect{ - animation: slideInAnimation 1s ease-in-out forwards; - } - .lang-progress{ - animation: growWidthAnimation 0.6s ease-in-out forwards; - } - `, + `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`, ); return card.render(` diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index c5945d48be71e..502314c41fa92 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -37,7 +37,6 @@ export type TopLangOptions = CommonOptions & { layout: "compact" | "normal"; custom_title: string; langs_count: number; - disable_animations: boolean; }; type WakaTimeOptions = CommonOptions & { diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js index 2825583c7406a..c36818b193b2f 100644 --- a/src/common/createProgressNode.js +++ b/src/common/createProgressNode.js @@ -10,7 +10,6 @@ import { clampValue } from "./utils.js"; * @param {string} createProgressNodeParams.color Progress color. * @param {string} createProgressNodeParams.progress Progress value. * @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color. - * @param {number} createProgressNodeParams.delay Delay before animation starts. * @returns {string} Progress node. */ const createProgressNode = ({ @@ -20,22 +19,20 @@ const createProgressNode = ({ color, progress, progressBarBackgroundColor, - delay, }) => { const progressPercentage = clampValue(progress, 2, 100); return ` - - - + + `; };