From 65d48472031bc096b3da35e005ac24cb1334eee4 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. --- readme.md | 56 ++++++++++++++++------- src/cards/top-languages-card.js | 76 ++++++++------------------------ src/common/createProgressNode.js | 19 ++++---- 3 files changed, 66 insertions(+), 85 deletions(-) diff --git a/readme.md b/readme.md index 7a602284601261..3cf6c1740f51f7 100644 --- a/readme.md +++ b/readme.md @@ -80,22 +80,46 @@ Visit and make a small donation to hel # Features -- [GitHub Stats Card](#github-stats-card) -- [GitHub Extra Pins](#github-extra-pins) -- [Top Languages Card](#top-languages-card) -- [Wakatime Week Stats](#wakatime-week-stats) -- [Themes](#themes) - - [Responsive Card Theme](#responsive-card-theme) -- [Customization](#customization) - - [Common Options](#common-options) - - [Stats Card Exclusive Options](#stats-card-exclusive-options) - - [Repo Card Exclusive Options](#repo-card-exclusive-options) - - [Language Card Exclusive Options](#language-card-exclusive-options) - - [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options) -- [Deploy Yourself](#deploy-on-your-own) - - [On Vercel](#on-vercel) - - [On other platforms](#on-other-platforms) - - [Keep your fork up to date](#keep-your-fork-up-to-date) +- [Features](#features) +- [GitHub Stats Card](#github-stats-card) + - [Hiding individual stats](#hiding-individual-stats) + - [Adding private contributions count to total commits count](#adding-private-contributions-count-to-total-commits-count) + - [Showing icons](#showing-icons) + - [Themes](#themes) + - [All inbuilt themes](#all-inbuilt-themes) + - [Responsive Card Theme](#responsive-card-theme) + - [Use the transparent theme](#use-the-transparent-theme) + - [Add transparent alpha channel to a themes bg\_color](#add-transparent-alpha-channel-to-a-themes-bg_color) + - [Use GitHub's theme context tag](#use-githubs-theme-context-tag) + - [Use GitHub's new media feature](#use-githubs-new-media-feature) + - [Customization](#customization) + - [Common Options](#common-options) + - [Gradient in bg\_color](#gradient-in-bg_color) + - [Stats Card Exclusive Options](#stats-card-exclusive-options) + - [Repo Card Exclusive Options](#repo-card-exclusive-options) + - [Language Card Exclusive Options](#language-card-exclusive-options) + - [Wakatime Card Exclusive Options](#wakatime-card-exclusive-options) +- [GitHub Extra Pins](#github-extra-pins) + - [Usage](#usage) + - [Demo](#demo) +- [Top Languages Card](#top-languages-card) + - [Usage](#usage-1) + - [Exclude individual repositories](#exclude-individual-repositories) + - [Hide individual languages](#hide-individual-languages) + - [Show more languages](#show-more-languages) + - [Compact Language Card Layout](#compact-language-card-layout) + - [Hide Progress Bars](#hide-progress-bars) + - [Demo](#demo-1) +- [Wakatime Week Stats](#wakatime-week-stats) + - [Demo](#demo-2) + - [All Demos](#all-demos) + - [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards) + - [Deploy on your own](#deploy-on-your-own) + - [On Vercel](#on-vercel) + - [:film\_projector: Check Out Step By Step Video Tutorial By @codeSTACKr](#film_projector-check-out-step-by-step-video-tutorial-by-codestackr) + - [On other platforms](#on-other-platforms) + - [Keep your fork up to date](#keep-your-fork-up-to-date) + - [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project) # GitHub Stats Card diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index ce8e12a839c773..d205bf0d95e5e9 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -39,41 +39,36 @@ 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 {boolean} props.hideProgress Whether to hide percentage. @@ -82,11 +77,10 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => { */ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => { const percentage = ((lang.size / totalSize) * 100).toFixed(2); - const staggerDelay = (index + 3) * 150; const color = lang.color || "#858585"; return ` - + ${lang.name} ${hideProgress ? "" : percentage + "%"} @@ -143,13 +137,12 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => { */ 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, @@ -294,7 +287,6 @@ const renderTopLanguages = (topLangs, options = {}) => { langs_count = DEFAULT_LANGS_COUNT, border_radius, border_color, - disable_animations, } = options; const i18n = new I18n({ @@ -348,43 +340,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/common/createProgressNode.js b/src/common/createProgressNode.js index 2825583c7406af..c36818b193b2fb 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 ` - - - + + `; };