Skip to content

Commit

Permalink
Update code buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Nov 27, 2023
1 parent f70fc9f commit 019b52b
Showing 1 changed file with 21 additions and 52 deletions.
73 changes: 21 additions & 52 deletions src/app/showcase/layout/doc/app.code.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,90 +8,59 @@ import { useCodeSandbox, useStackBlitz } from './codeeditor';
@Component({
selector: 'app-code',
template: `
<div *ngIf="code" class="relative doc-section-code">
<div class="flex surface-card align-items-center justify-content-end absolute z-2" style="right: .75rem; top: .75rem; gap: .75rem">
<div class="flex align-items-center gap-2" *ngIf="fullCodeVisible">
<button
*ngIf="code.html"
pButton
label="HTML"
(click)="changeLang('html')"
class="py-0 px-2 h-2rem p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center"
[ngClass]="{ 'doc-section-code-active text-primary': lang === 'html' }"
></button>
<button
*ngIf="code.typescript"
pButton
label="TypeScript"
(click)="changeLang('typescript')"
class="py-0 px-2 h-2rem p-button-text p-button-plain inline-flex align-items-center justify-content-center"
[ngClass]="{ 'doc-section-code-active text-primary': lang === 'typescript' }"
></button>
<div *ngIf="code" class="doc-section-code">
<div class="doc-section-code-buttons scalein animation-duration-300">
<ng-container *ngIf="fullCodeVisible">
<button *ngIf="code.html" (click)="changeLang('html')" class="py-0 px-2 border-round h-2rem" [ngClass]="{ 'code-active': lang === 'html' }"><span>HTML</span></button>
<button *ngIf="code.typescript" (click)="changeLang('typescript')" class="py-0 px-2 border-round h-2rem" [ngClass]="{ 'code-active': lang === 'typescript' }"><span>TS</span></button>
<button
*ngIf="code.data"
pButton
icon="pi pi-database"
pTooltip="View Data"
tooltipPosition="bottom"
tooltipStyleClass="doc-section-code-tooltip"
(click)="changeLang('data')"
class="p-button-rounded p-button-text text-sm p-button-plain p-0 w-2rem h-2rem inline-flex align-items-center justify-content-center"
class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
[ngClass]="{ 'doc-section-code-active text-primary': lang === 'data' }"
></button>
</div>
<button
*ngIf="!hideToggleCode"
pButton
icon="pi pi-code"
pTooltip="Toggle Full Code"
tooltipStyleClass="doc-section-code-tooltip"
tooltipPosition="bottom"
class="p-button-rounded p-button-text text-sm p-button-plain p-0 w-2rem h-2rem inline-flex align-items-center justify-content-center"
(click)="toggleCode()"
></button>
>
<i class="pi pi-database"></i>
</button>
</ng-container>
<button *ngIf="!hideToggleCode" pTooltip="Toggle Full Code" tooltipStyleClass="doc-section-code-tooltip" tooltipPosition="bottom" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" (click)="toggleCode()">
<i class="pi pi-code"></i>
</button>
<button
pButton
pTooltip="Edit in CodeSandbox"
tooltipPosition="bottom"
tooltipStyleClass="doc-section-code-tooltip"
*ngIf="!hideCodeSandbox && !hideToggleCode"
class="p-button-rounded p-button-text text-sm p-button-plain p-0 w-2rem h-2rem inline-flex align-items-center justify-content-center"
class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
(click)="openCodeSandbox()"
>
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: block">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
/>
</svg>
</button>
<button
pButton
pTooltip="Edit in StackBlitz"
tooltipPosition="bottom"
tooltipStyleClass="doc-section-code-tooltip"
*ngIf="!hideStackBlitz && !hideToggleCode"
class="p-button-rounded p-button-text text-sm p-button-plain p-0 w-2rem h-2rem inline-flex align-items-center justify-content-center"
class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
(click)="openStackBlitz()"
>
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: block">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
<path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
</svg>
</button>
<button
pButton
type="button"
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
(click)="copyCode()"
icon="pi pi-copy"
pTooltip="Copy Code"
tooltipPosition="bottom"
tooltipStyleClass="doc-section-code-tooltip"
></button>
<button type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" (click)="copyCode()" pTooltip="Copy Code" tooltipPosition="bottom" tooltipStyleClass="doc-section-code-tooltip">
<i class="pi pi-copy"></i>
</button>
</div>
<pre *ngIf="lang === 'basic'" class="language-markup"><code #codeElement>
Expand Down

0 comments on commit 019b52b

Please sign in to comment.