itob/RBLNews
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

move filter to switch with badge

Browse Source
This commit is contained in:
Tobias Wohlleben 2024-09-19 17:06:43 +02:00
parent e5884f4645
commit 0bec67fa80
6 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.idea/.idea.RBLNews/.idea/deploymentTargetSelector.xml Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="deploymentTargetSelector">
<selectionStates>
<SelectionState runConfigName="RBLNews.Maui">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
</selectionStates>
</component>
</project>

4
.idea/.idea.RBLNews/.idea/encodings.xml Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
</project>

34
RBLNews.Shared/Components/Controls/SwitchWithBadge.razor Normal file
View File

@ -0,0 +1,34 @@
@using RBLFeederCommon.Enums
<Switch @ref="this._switchFilter" Label="@Text" ValueChanged="this.SwitchChanged" />
@code {
private Switch _switchFilter = default!;
private bool _filter = true;
[Parameter]
public RssFeedSources Source { get; set; }
[Parameter]
public string Text { get; set; } = "";
[Parameter]
public bool ShowCount { get; set; }
[Parameter]
public int Count { get; set; }
[Parameter]
public EventCallback<RssFeedSources> OnClickedCallback { get; set; }
Task SwitchChanged(bool value)
{
this._filter = value;
OnClickedCallback.InvokeAsync(Source);
return Task.CompletedTask;
}
}

7
RBLNews.Shared/Components/Controls/SwitchWithBadge.razor.cs Normal file
View File

@ -0,0 +1,7 @@
using Microsoft.AspNetCore.Components;
namespace RBLNews.Shared.Components.Controls;
public partial class SwitchWithBadge : ComponentBase
{
}

7
RBLNews.Shared/Components/Pages/Feeds.razor
View File

@ -2,8 +2,8 @@
@page "/" @page "/"
@using RBLFeederCommon.Enums @using RBLFeederCommon.Enums
@using RBLFeederCommon.Models.RssFeed @using RBLFeederCommon.Models.RssFeed
@using RBLNews.Shared.Components.Controls
@using RBLNews.Shared.Services @using RBLNews.Shared.Services
@using RBLNews.Shared.Components.Controls
@inject IFeedDataService feedDataService @inject IFeedDataService feedDataService
@inject AppLifecycleService appLifecycleService @inject AppLifecycleService appLifecycleService
@ -21,13 +21,12 @@ else
<section id="filter"> <section id="filter">
@foreach (IGrouping<int, int> sGrouping in SourceGroupings) @foreach (IGrouping<int, int> sGrouping in SourceGroupings)
{ {
<BadgeWithCounter <SwitchWithBadge
ShowCount="true"
Source="(RssFeedSources)sGrouping.Key" Source="(RssFeedSources)sGrouping.Key"
OnClickedCallback="OnClicked" OnClickedCallback="OnClicked"
Text="@GetRssSourceName((RssFeedSources)sGrouping.Key)" Text="@GetRssSourceName((RssFeedSources)sGrouping.Key)"
Count="@sGrouping.Count()"> Count="@sGrouping.Count()">
</BadgeWithCounter> </SwitchWithBadge>
} }
</section> </section>
<section id="feeds-list"> <section id="feeds-list">

19
RBLNews.Shared/wwwroot/css/app.css
View File

@ -32,8 +32,8 @@ schrift: #4b4b4b
} }
nav .container-fluid { nav .container-fluid {
padding-right: 0px !important; padding-right: 0 !important;
padding-left: 0px !important; padding-left: 0 !important;
} }
nav .top-row { nav .top-row {
@ -63,16 +63,25 @@ nav .top-row {
background-color: #f75581; background-color: #f75581;
border-color: #DD0741; border-color: #DD0741;
} }
.btn-primary:hover, .btn-outline-primary:hover {
pointer-events: none; .btn-primary:hover {
color: inherit;
background-color: inherit;
border-color: inherit;
} }
.btn-outline-primary { .btn-outline-primary {
color: #DD0741; color: #f75581;
background-color: #fff; background-color: #fff;
border-color: #DD0741; border-color: #DD0741;
} }
.btn-outline-primary:hover {
color: inherit;
background-color: inherit;
border-color: inherit;
}
.text-bg-info { .text-bg-info {
color: #DD0741 !important; color: #DD0741 !important;
background-color: #fff !important; background-color: #fff !important;