-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PullToRefresh] New component
PullToRefresh (#1679)
* Intial adding of component * - Consolidate PullUp and PullDown in one compoent - Add examples * - Remove iframes - Use fluent names and tokens in razor and CSS - Reorg class file * Add touch emulator to Client * Process review comments * - Fix pull up logic. - Add parameter to set tip height - Show example with progress bar instead of ring * Try to include script as ts * Fix building assets project Remove loadTouchEmulator * - Pull script in - Add basic example, update other samples - Add ShowStaticTip and StatusUpdateMessageTimeout params -Add unit tests * Update DragDistance to new TipHeight * Cleanup Tabs tryout issue fixing thingy * - Update example to use bigger DragDistance * - Add more tests - Process review comments
- Loading branch information
Showing
41 changed files
with
1,463 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
examples/Demo/Shared/Pages/PullToRefresh/Examples/PullDownBasic.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <FluentStack Orientation="Orientation.Vertical" VerticalGap="5"> | ||
| <div> | ||
| <FluentSwitch @bind-Value="@(enabled)" CheckedMessage="Pull is enabled" UncheckedMessage="Pull is disabled" /> | ||
| <FluentSwitch @bind-Value="@direction" CheckedMessage="Pull up" UncheckedMessage="Pull down" /> | ||
| </div> | ||
| <FluentPullToRefresh Style="border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius)* 1px); width: 100%;" | ||
| Disabled="@(!enabled)" | ||
| Direction="@(direction ? PullDirection.Up : PullDirection.Down)" | ||
| OnRefreshAsync="OnRefreshAsync"> | ||
| <div style="height: 150px; width: 100%; padding: 5px;"> | ||
| Content to refresh. Pull counter: @Counter | ||
| </div> | ||
| </FluentPullToRefresh> | ||
| </FluentStack> | ||
|
|
||
| @code { | ||
| bool enabled = true; | ||
| bool direction = false; | ||
| int Counter = 0; | ||
|
|
||
| async Task<bool> OnRefreshAsync() | ||
| { | ||
| Counter++; | ||
| await Task.Delay(250); | ||
| return true; | ||
| } | ||
| } |
33 changes: 33 additions & 0 deletions
33
examples/Demo/Shared/Pages/PullToRefresh/Examples/PullDownDefault.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <FluentPullToRefresh Direction="@PullDirection.Down" | ||
| OnRefreshAsync="OnRefreshAsync" | ||
| ShowStaticTip="false" | ||
| Style="height: 400px; width: 400px; "> | ||
| <PullingTemplate> | ||
| Pull to refresh | ||
| </PullingTemplate> | ||
| <ReleaseTemplate> | ||
| Release to update | ||
| </ReleaseTemplate> | ||
| <CompletedTemplate> | ||
| Update completed | ||
| </CompletedTemplate> | ||
|
|
||
| <ChildContent> | ||
| <FluentListbox Height="300px" Items="@Enumerable.Range(1, ItemsCount).Select(i => $"Item {i}")" /> | ||
| </ChildContent> | ||
| </FluentPullToRefresh> | ||
|
|
||
|
|
||
| @code { | ||
| int RefreshCount = 0; | ||
| int ItemsCount = 2; | ||
|
|
||
| public async Task<bool> OnRefreshAsync() | ||
| { | ||
| RefreshCount++; | ||
| DemoLogger.WriteLine($"Pull down refresh count {RefreshCount}"); | ||
| await Task.Delay(1000); | ||
| ItemsCount += 3; | ||
| return true; | ||
| } | ||
| } |
54 changes: 54 additions & 0 deletions
54
examples/Demo/Shared/Pages/PullToRefresh/Examples/PullUpDefault.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| @inject IJSRuntime js | ||
| <style> | ||
| .pull-up-demo { | ||
| height: 51.2vh; | ||
| max-width: 400px; | ||
| border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest); | ||
| border-radius: calc(var(--control-corner-radius)* 1px); | ||
| overflow: auto; | ||
| } | ||
| .pull-content { | ||
| user-select: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-end; | ||
| padding: calc(var(--design-unit) * 2px); | ||
| height: calc(100% - 50px); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="pull-up-demo"> | ||
| <FluentPullToRefresh Direction="@PullDirection.Up" OnRefreshAsync="OnRefreshAsync" TipHeight="50" DragDistance="100" > | ||
| <LoadingTemplate> | ||
| <FluentProgress Width="150px;"/> | ||
| </LoadingTemplate> | ||
| <ChildContent> | ||
| <div class="pull-content"> | ||
| @for (int i = 1; i <= count; i++) | ||
| { | ||
| <span @key="i">item @i</span> | ||
| } | ||
| </div> | ||
| </ChildContent> | ||
| </FluentPullToRefresh> | ||
| </div> | ||
|
|
||
| @code { | ||
| int refreshcount = 0; | ||
| int count = 3; | ||
|
|
||
| public async Task<bool> OnRefreshAsync() | ||
| { | ||
| refreshcount++; | ||
| if (count < 15) | ||
| { | ||
| await Task.Delay(1000); | ||
| count += 3; | ||
| DemoLogger.WriteLine($"Pull up refresh count {refreshcount}"); | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
| } |
40 changes: 40 additions & 0 deletions
40
examples/Demo/Shared/Pages/PullToRefresh/PullToRefreshPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| @page "/PullToRefresh" | ||
| @using FluentUI.Demo.Shared.Pages.PullToRefresh.Examples | ||
|
|
||
| <h1>PullToRefresh</h1> | ||
|
|
||
| <p> | ||
| The <b>Pull-to-refresh</b> is a touchscreen gesture. It involves touching the screen of a computing device with a finger | ||
| or pressing a button on a pointing device, dragging the screen downward, and then releasing it. | ||
| This action signals the application to refresh the contents of the component. | ||
| Its purpose is to make refreshing immediately accessible and to save valuable screen space that would otherwise be occupied by a refresh button. | ||
| </p> | ||
|
|
||
| <p> | ||
| These features are mainly used on mobile devices. To maintain compatibility with the majority of <b>desktop browsers</b>, an emulator script is included | ||
| and loaded automatically by the component. | ||
| </p> | ||
|
|
||
| <h2 id="example">Examples</h2> | ||
|
|
||
| <DemoSection Title="Default" Component="typeof(PullDownBasic)"></DemoSection> | ||
|
|
||
| <DemoSection Title="Pull down" Component="typeof(PullDownDefault)"> | ||
| <Description> | ||
| With the default settings, the component uses icons for starting and update 'tips'. These can be replaced by using the <code>...Template</code> parameters. | ||
| In this example we are using plain text templates. Also the the inital tip template is hidden until a pull to refresh action is actually started and hidden once an update is finshed. | ||
| The timeout of the update message can be changed. | ||
| </Description> | ||
| </DemoSection> | ||
|
|
||
| <DemoSection Title="Pull up" Component="typeof(PullUpDefault)"> | ||
| <Description> | ||
| This demo has a height set for the 'pull up tip'. Also, the distance the tip has to be pullud has been increased. | ||
|
|
||
| Instead of using a progress ring, this one shows a progress bar. The maximum number of | ||
| items that can be shown is set to 100, so the number of 'pull up's' is limited to 4.</Description> | ||
| </DemoSection> | ||
|
|
||
| <h2 id="documentation">Documentation</h2> | ||
|
|
||
| <ApiDocumentation Component="typeof(FluentPullToRefresh)" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <div style="overflow: auto;"> | ||
| @Body | ||
| </div> |
18 changes: 10 additions & 8 deletions
18
src/Core.Assets/Microsoft.FluentUI.AspNetCore.Components.Assets.esproj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| <Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.705950"> | ||
| <PropertyGroup> | ||
| <DefaultProjectTypeGuid Condition="'$(BuildingInsideVisualStudio)' == 'false'">FAE04EC0-301F-11D3-BF4B-00C04F79EFBC</DefaultProjectTypeGuid> | ||
| <DebugAssetsDirectory>dist\</DebugAssetsDirectory> | ||
| <StaticWebAssetSourceId>Microsoft.FluentUI.AspNetCore.Components</StaticWebAssetSourceId> | ||
| <IsPackable>false</IsPackable> | ||
| <BuildCommand>npm run build</BuildCommand> | ||
| </PropertyGroup> | ||
| <Target Name="Pack" /> | ||
| <PropertyGroup> | ||
| <DefaultProjectTypeGuid Condition="'$(BuildingInsideVisualStudio)' == 'false'">FAE04EC0-301F-11D3-BF4B-00C04F79EFBC</DefaultProjectTypeGuid> | ||
| <DebugAssetsDirectory>dist\</DebugAssetsDirectory> | ||
| <StaticWebAssetSourceId>Microsoft.FluentUI.AspNetCore.Components</StaticWebAssetSourceId> | ||
| <IsPackable>false</IsPackable> | ||
| <BuildCommand>npm run build</BuildCommand> | ||
| </PropertyGroup> | ||
|
|
||
| <Target Name="Pack" /> | ||
|
|
||
| </Project> |
Oops, something went wrong.