Skip to content

Commit

Permalink
Convert .html files to .svelte files - by VS Code svelte formatter
Browse files Browse the repository at this point in the history
  • Loading branch information
@stanleychh
stanleychh authored Jan 13, 2022
1 parent 6f189d3 commit 3209694
Show file tree
Hide file tree
Showing 16 changed files with 1,831 additions and 1,640 deletions.
4 changes: 2 additions & 2 deletions core/src/App.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,9 @@
import Backdrop from './Backdrop.html';
import SplitView from './SplitView.html';
import LeftNav from './navigation/LeftNav.html';
import TopNav from './navigation/TopNav.html';
import TopNav from './navigation/TopNav.svelte';
import TabNav from './navigation/TabNav.html';
import GlobalNav from './navigation/GlobalNav.html';
import GlobalNav from './navigation/GlobalNav.svelte';
import Breadcrumb from './navigation/Breadcrumb.html';
import {
afterUpdate,
Expand Down
2 changes: 1 addition & 1 deletion core/src/TopNavDropDown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
/>
{/if}
<script>
import BadgeCounter from './navigation/BadgeCounter.html';
import BadgeCounter from './navigation/BadgeCounter.svelte';
import MobileTopNav from './navigation/MobileTopNavDropDown.html';
import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
import { Routing } from './services/routing';
Expand Down
19 changes: 11 additions & 8 deletions core/src/navigation/BadgeCounter.html → core/src/navigation/BadgeCounter.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
{#if node && node.badgeCounter} {#await node.badgeCounter.count()} {:then count} {#if
count > 0}
<span
class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
aria-label="{node.badgeCounter.label}"
>{count}</span
>
{/if} {:catch error} {/await} {/if}
<script>
export let node;
</script>

{#if node && node.badgeCounter}
{#await node.badgeCounter.count() then count}
{#if count > 0}
<span
class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
aria-label={node.badgeCounter.label}>{count}</span
>
{/if}
{/await}
{/if}

<style type="text/scss">
:global(.fd-shellbar__action) {
.fd-shellbar__counter--notification {
Expand Down
256 changes: 137 additions & 119 deletions core/src/navigation/ContextSwitcher.html → core/src/navigation/ContextSwitcher.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,7 @@
{#if contextSwitcherEnabled}
<!-- DESKTOP VERSION (popover): -->
{#if !isMobile}
<div class="fd-shellbar__action fd-shellbar__action--desktop">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control" on:click|stopPropagation="{()=> {}}">
{#if addNavHrefForAnchor && (selectedOption !== config.defaultLabel) }
<a
href="{selectedNodePath}"
class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
aria-expanded="{dropDownStates.contextSwitcherPopover || false}"
aria-haspopup="true"
title="{selectedLabel ? selectedLabel : config.defaultLabel}"
on:click|preventDefault="{()=> {if (renderAsDropdown) toggleDropdownState()}}"
aria-disabled="{!renderAsDropdown}"
data-testid="luigi-contextswitcher-button"
>
{#if selectedOption && customSelectedOptionRenderer } {@html
customSelectedOptionRenderer(selectedOption)} {:else} {#if !selectedLabel}
{$getTranslation(config.defaultLabel)} {:else} {selectedLabel} {/if}
<i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
{/if}
</a>
{:else}
<button
class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
aria-expanded="{dropDownStates.contextSwitcherPopover || false}"
aria-haspopup="true"
title="{selectedLabel ? selectedLabel : config.defaultLabel}"
on:click="{()=> {if (renderAsDropdown) toggleDropdownState()}}"
aria-disabled="{!renderAsDropdown}"
data-testid="luigi-contextswitcher-button"
>
{#if selectedOption && customSelectedOptionRenderer } {@html
customSelectedOptionRenderer(selectedOption)} {:else} {#if
!selectedLabel}{$getTranslation(config.defaultLabel)} {:else}{selectedLabel}{/if}
<i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
{/if}
</button>
{/if}
</div>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.contextSwitcherPopover || false)}"
id="contextSwitcherPopover"
data-testid="luigi-contextswitcher-popover"
>
<ContextSwitcherNav
{actions}
{config}
{customOptionsRenderer}
{options}
{selectedLabel}
{selectedOption}
{getNodeName}
{getRouteLink}
{getTestId}
{getTranslation}
{isMobile}
on:onActionClick="{onActionClick}"
on:goToOption="{goToOption}"
/>
</div>
</div>
</div>
{/if}
<!-- MOBILE VERSION (fullscreen dialog): -->
{#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
<div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
<div
class="fd-dialog__content fd-dialog__content--mobile"
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title-3"
>
<div class="fd-dialog__header fd-bar fd-bar--header">
<div class="fd-bar__left">
<div class="fd-bar__element">
<h2 class="fd-title fd-title--h5" id="dialog-title-3">
{#if !selectedLabel} {$getTranslation(config.defaultLabel)} {/if} {#if
selectedLabel} {selectedLabel} {/if}
</h2>
</div>
</div>
</div>
<div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
<ContextSwitcherNav
{actions}
{config}
{customOptionsRenderer}
{options}
{selectedLabel}
{selectedOption}
{getNodeName}
{getRouteLink}
{getTestId}
{getTranslation}
{isMobile}
on:onActionClick="{onActionClick}"
on:goToOption="{goToOption}"
/>
</div>
<footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
<div class="fd-bar__right">
<div class="fd-bar__element">
<button
class="fd-button fd-button--light fd-dialog__decisive-button"
on:click="{toggleDropdownState}"
data-testid="mobile-topnav-close"
>
Cancel
</button>
</div>
</div>
</footer>
</div>
</div>
{/if} {/if}
<script>
import { createEventDispatcher, onMount, getContext, beforeUpdate } from 'svelte';
import { ContextSwitcherHelpers } from './services/context-switcher';
import ContextSwitcherNav from './ContextSwitcherNav.html';
import ContextSwitcherNav from './ContextSwitcherNav.svelte';
import { LuigiConfig } from '../core-api';
import { Routing } from '../services/routing';
import {
Expand Down Expand Up @@ -351,6 +233,142 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-3">
}
</script>

{#if contextSwitcherEnabled}
<!-- DESKTOP VERSION (popover): -->
{#if !isMobile}
<div class="fd-shellbar__action fd-shellbar__action--desktop">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control" on:click|stopPropagation={() => {}}>
{#if addNavHrefForAnchor && selectedOption !== config.defaultLabel}
<a
href={selectedNodePath}
class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
aria-expanded={dropDownStates.contextSwitcherPopover || false}
aria-haspopup="true"
title={selectedLabel ? selectedLabel : config.defaultLabel}
on:click|preventDefault={() => {
if (renderAsDropdown) toggleDropdownState();
}}
aria-disabled={!renderAsDropdown}
data-testid="luigi-contextswitcher-button"
>
{#if selectedOption && customSelectedOptionRenderer}
{@html customSelectedOptionRenderer(selectedOption)}
{:else}
{#if !selectedLabel}
{$getTranslation(config.defaultLabel)}
{:else}
{selectedLabel}
{/if}
<i class="sap-icon--megamenu fd-shellbar__button--icon" />
{/if}
</a>
{:else}
<button
class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
aria-expanded={dropDownStates.contextSwitcherPopover || false}
aria-haspopup="true"
title={selectedLabel ? selectedLabel : config.defaultLabel}
on:click={() => {
if (renderAsDropdown) toggleDropdownState();
}}
aria-disabled={!renderAsDropdown}
data-testid="luigi-contextswitcher-button"
>
{#if selectedOption && customSelectedOptionRenderer}
{@html customSelectedOptionRenderer(selectedOption)}
{:else}
{#if !selectedLabel}{$getTranslation(config.defaultLabel)}
{:else}{selectedLabel}{/if}
<i class="sap-icon--megamenu fd-shellbar__button--icon" />
{/if}
</button>
{/if}
</div>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden={!(dropDownStates.contextSwitcherPopover || false)}
id="contextSwitcherPopover"
data-testid="luigi-contextswitcher-popover"
>
<ContextSwitcherNav
{actions}
{config}
{customOptionsRenderer}
{options}
{selectedLabel}
{selectedOption}
{getNodeName}
{getRouteLink}
{getTestId}
{getTranslation}
{isMobile}
on:onActionClick={onActionClick}
on:goToOption={goToOption}
/>
</div>
</div>
</div>
{/if}
<!-- MOBILE VERSION (fullscreen dialog): -->
{#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
<div
class="fd-dialog fd-dialog--active"
on:click|stopPropagation={() => {}}
>
<div
class="fd-dialog__content fd-dialog__content--mobile"
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title-3"
>
<div class="fd-dialog__header fd-bar fd-bar--header">
<div class="fd-bar__left">
<div class="fd-bar__element">
<h2 class="fd-title fd-title--h5" id="dialog-title-3">
{#if !selectedLabel}
{$getTranslation(config.defaultLabel)}
{/if}
{#if selectedLabel} {selectedLabel} {/if}
</h2>
</div>
</div>
</div>
<div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
<ContextSwitcherNav
{actions}
{config}
{customOptionsRenderer}
{options}
{selectedLabel}
{selectedOption}
{getNodeName}
{getRouteLink}
{getTestId}
{getTranslation}
{isMobile}
on:onActionClick={onActionClick}
on:goToOption={goToOption}
/>
</div>
<footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
<div class="fd-bar__right">
<div class="fd-bar__element">
<button
class="fd-button fd-button--light fd-dialog__decisive-button"
on:click={toggleDropdownState}
data-testid="mobile-topnav-close"
>
Cancel
</button>
</div>
</div>
</footer>
</div>
</div>
{/if}
{/if}

<style type="text/scss">
.lui-ctx-switch-menu {
max-width: 30vw;
Expand Down
Loading

0 comments on commit 3209694

Please sign in to comment.