Skip to content

Commit

Permalink
Merge branch 'css-split-out-icons' of github.com:candela97/AugmentedS…
Browse files Browse the repository at this point in the history
…team into candela97-css-split-out-icons
  • Loading branch information
tfedor committed Aug 28, 2024
2 parents 3cfcb28 + be71f27 commit 7671d4b
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 90 deletions.
56 changes: 0 additions & 56 deletions src/css/augmentedsteam.css
Original file line number Diff line number Diff line change
Expand Up @@ -1501,33 +1501,6 @@ label.es_dlc_label > input:checked::after {
padding-left: 28px;
}

/***************************************
* User profiles
* FCommunityProfileLinks
**************************************/
.es_sites_icons {
display: inline-flex;
align-items: center;
}
.es_sites_icons:not(.es_none)::before, .es_sites_custom_icon {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin: 0 5px 0 0;
background-color: #222222;
background-repeat: no-repeat;
background-size: 16px !important;
background-position: 2px 2px !important;
padding: 2px;
border-radius: 3px;
box-shadow: inset 0 0 1px 1px rgb(0, 0, 0), 0 0 0 1px rgba(193, 193, 193, 0.17);
vertical-align: top;
}
.es_sites_icons.es_gray::before, .es_sites_icons .es_gray {
filter: grayscale(100%);
}

/***************************************
* User profiles
* FTwitchShowcase
Expand Down Expand Up @@ -1838,35 +1811,6 @@ label.es_dlc_label > input:checked::after {
vertical-align: baseline;
}

.es_sites_icons.es_steamrepcn_icon:before {
background-image: url("extension://img/ico/srcn.png");
}
.es_sites_icons.es_steamrep_icon:before {
background-image: url("extension://img/ico/steamrep.png");
background-color: rgb(235, 235, 235);
}
.es_sites_icons.es_steamdbcalc_icon:before {
background-image: url("extension://img/ico/steamdb.png");
}
.es_sites_icons.es_steamgifts_icon:before {
background-image: url("extension://img/ico/steamgifts.png");
}
.es_sites_icons.es_steamtrades_icon:before {
background-image: url("extension://img/ico/steamtrades.png");
}
.es_sites_icons.es_bartervg_icon:before {
background-image: url("extension://img/ico/bartervg.png");
}
.es_sites_icons.es_astats_icon:before {
background-image: url("extension://img/ico/achievementstats.png");
}
.es_sites_icons.es_backpacktf_icon:before {
background-image: url("extension://img/ico/backpacktf.png");
}
.es_sites_icons.es_astatsnl_icon:before {
background-image: url("extension://img/ico/astatsnl.png");
}


/* || DOUBLE SLIDER */

Expand Down
1 change: 0 additions & 1 deletion src/html/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<title>Augmented Steam Options</title>
<base target="_blank">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="../css/augmentedsteam.css" rel="stylesheet" type="text/css">
<link href="../css/options.css" rel="stylesheet" type="text/css">
</head>
<body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
</script>


{#if (language === "schinese" || language === "tchinese") && Settings.profile_steamrepcn}
<ProfileLink id="steamrepcn" href="https://steamrepcn.com/profiles/{steamId}">
{language === "schinese" ? "查看信誉记录" : "確認信譽記錄"}
</ProfileLink>
{/if}

{#if Settings.profile_steamrep}
<ProfileLink id="steamrep" href="https://steamrep.com/profiles/{steamId}">SteamRep</ProfileLink>
{/if}
Expand Down Expand Up @@ -48,12 +54,6 @@
</ProfileLink>
{/if}

{#if (language === "schinese" || language === "tchinese") && Settings.profile_steamrepcn}
<ProfileLink id="steamrepcn" href="https://steamrepcn.com/profiles/{steamId}">
{language === "schinese" ? "查看信誉记录" : "確認信譽記錄"}
</ProfileLink>
{/if}

{#each Settings.profile_custom_link as customLink}
{#if customLink.enabled}
<ProfileLink
Expand Down
22 changes: 14 additions & 8 deletions src/js/Content/Modules/Community/ProfileLink.svelte
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
<script lang="ts">
import Settings from "@Options/Data/Settings";
import external from "@Content/externalLink";
import ProfileLinkIcon from "@Options/Modules/Icons/ProfileLinkIcon.svelte";
export let id: string;
export let href: string;
export let iconUrl: string|undefined = undefined;
const iconType: string = Settings.show_profile_link_images;
const mainType = iconUrl ? "none" : iconType;
const iconType: "gray"|"color"|"none" = Settings.show_profile_link_images;
</script>


<div class="es_profile_link profile_count_link">
<a class="es_sites_icons es_{id}_icon es_{mainType}" {href} use:external>

{#if iconType !== "none" && iconUrl}
<i class="es_sites_custom_icon es_{iconType}" style="background-image: url({iconUrl});"></i>
<div class="profile_count_link">
<a class="link" {href} use:external>
{#if iconType !== "none"}
<ProfileLinkIcon {id} {iconType} {iconUrl} />
{/if}

<span class="count_link_label"><slot></slot></span>
<span class="profile_count_link_total">&nbsp;</span> <!-- Steam spacing -->
</a>
</div>


<style>
.link {
display: inline-flex;
align-items: center;
}
</style>
62 changes: 62 additions & 0 deletions src/js/Options/Modules/Icons/ProfileLinkIcon.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<script lang="ts">
export let id: string;
export let iconType: string;
export let iconUrl: string|undefined = undefined;
</script>


{#if id === "custom" && iconUrl}
<i class="es_sites_icons es_{iconType}" style="background-image: url({iconUrl});"></i>
{:else}
<i class="es_sites_icons es_{id}_icon es_{iconType}"></i>
{/if}


<style>
.es_sites_icons {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 5px 0 0;
background-color: #222222;
background-repeat: no-repeat;
background-size: 16px !important;
background-position: 2px 2px !important;
padding: 2px;
border-radius: 3px;
box-shadow: inset 0 0 1px 1px rgb(0, 0, 0), 0 0 0 1px rgba(193, 193, 193, 0.17);
vertical-align: top;
}
.es_sites_icons.es_gray {
filter: grayscale(100%);
}
.es_sites_icons.es_steamrepcn_icon {
background-image: url("extension://img/ico/srcn.png");
}
.es_sites_icons.es_steamrep_icon {
background-image: url("extension://img/ico/steamrep.png");
background-color: rgb(235, 235, 235);
}
.es_sites_icons.es_steamdbcalc_icon {
background-image: url("extension://img/ico/steamdb.png");
}
.es_sites_icons.es_steamgifts_icon {
background-image: url("extension://img/ico/steamgifts.png");
}
.es_sites_icons.es_steamtrades_icon {
background-image: url("extension://img/ico/steamtrades.png");
}
.es_sites_icons.es_bartervg_icon {
background-image: url("extension://img/ico/bartervg.png");
}
.es_sites_icons.es_astats_icon {
background-image: url("extension://img/ico/achievementstats.png");
}
.es_sites_icons.es_backpacktf_icon {
background-image: url("extension://img/ico/backpacktf.png");
}
.es_sites_icons.es_astatsnl_icon {
background-image: url("extension://img/ico/astatsnl.png");
}
</style>
29 changes: 10 additions & 19 deletions src/js/Options/Modules/Options/CommunityOptions.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
import HideSpamCommentsSettings from "./Settings/HideSpamCommentsSettings.svelte";
import SubOptions from "./Components/SubOptions.svelte";
import QuickSellSettings from "./Settings/QuickSellSettings.svelte";
import ProfileLink from "./Components/ProfileLink.svelte";
let settings: Writable<SettingsSchema> = writable(Settings);
</script>
Expand Down Expand Up @@ -154,34 +155,32 @@
<h3>{L(__options_profileLinks)}</h3>
{#if $settings.language === "schinese" || $settings.language === "tchinese"}
<Toggle bind:value={$settings.profile_steamrepcn}>
<span class="link">
<i class="es_sites_icons es_steamrepcn_icon"></i>SteamrepCN
</span>
<ProfileLink id="steamrepcn">SteamrepCN</ProfileLink>
</Toggle>
{/if}
<Toggle bind:value={$settings.profile_steamrep}>
<span class="link"><i class="es_sites_icons es_steamrep_icon"></i>SteamRep</span>
<ProfileLink id="steamrep">SteamRep</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_steamdbcalc}>
<span class="link"><i class="es_sites_icons es_steamdbcalc_icon"></i>SteamDB</span>
<ProfileLink id="steamdbcalc">SteamDB</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_steamgifts}>
<span class="link"><i class="es_sites_icons es_steamgifts_icon"></i>SteamGifts</span>
<ProfileLink id="steamgifts">SteamGifts</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_steamtrades}>
<span class="link"><i class="es_sites_icons es_steamtrades_icon"></i>SteamTrades</span>
<ProfileLink id="steamtrades">SteamTrades</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_bartervg}>
<span class="link"><i class="es_sites_icons es_bartervg_icon"></i>Barter.vg</span>
<ProfileLink id="bartervg">Barter.vg</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_astats}>
<span class="link"><i class="es_sites_icons es_astats_icon"></i>Achievement Stats</span>
<ProfileLink id="astats">Achievement Stats</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_backpacktf}>
<span class="link"><i class="es_sites_icons es_backpacktf_icon"></i>Backpack.tf</span>
<ProfileLink id="backpacktf">Backpack.tf</ProfileLink>
</Toggle>
<Toggle bind:value={$settings.profile_astatsnl}>
<span class="link"><i class="es_sites_icons es_astatsnl_icon"></i>AStats.nl</span>
<ProfileLink id="astatsnl">Astats.nl</ProfileLink>
</Toggle>
</OptionGroup>

Expand All @@ -205,11 +204,3 @@
<Toggle bind:value={$settings.replacecommunityhublinks}>{L(__options_replacecommunityhublinks)}</Toggle>
<Toggle bind:value={$settings.hideannouncementcomments}>{L(__options_hideannouncementcomments)}</Toggle>
</Section>


<style>
.link {
display: flex;
align-items: center;
}
</style>
18 changes: 18 additions & 0 deletions src/js/Options/Modules/Options/Components/ProfileLink.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script lang="ts">
import ProfileLinkIcon from "../../Icons/ProfileLinkIcon.svelte";
export let id: string;
</script>


<span class="link">
<ProfileLinkIcon {id} iconType="color" /><slot></slot>
</span>


<style>
.link {
display: inline-flex;
align-items: center;
}
</style>

0 comments on commit 7671d4b

Please sign in to comment.