Skip to content

Commit

Permalink
Merge pull request #175 from appwrite/tabs-text-editor
Browse files Browse the repository at this point in the history
Tabs text editor
  • Loading branch information
TorstenDittmann authored Jul 3, 2024
2 parents 53b8849 + 344a6d1 commit cd10ab3
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 0 deletions.
36 changes: 36 additions & 0 deletions apps/pink/src/pages/components/tabs-text-editor.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: Tabs Text Editor
description: An input field in which users can type and edit text.
---

<Preview noFlex>
<section class="tab-text-editor">
<nav class="tab-text-editor-nav">
<ul class="secondary-tabs is-large is-stretch">
<li class="secondary-tabs-item">
<button class="secondary-tabs-button" disabled>
<span class="body-text-2">Item</span>
</button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button">
<span class="body-text-2">Item</span>
</button>
</li>
</ul>
</nav>
<div class="tab-text-editor-content-box">
<textarea class="tab-text-editor-content">Prod=thisisvalue</textarea>
<div class="tab-text-editor-options">
<div class="u-flex u-gap-4">
<button class="button is-text is-only-icon" aria-label="download code file">
<span class="icon-download" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="copy code">
<span class="icon-duplicate" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</section>
</Preview>
2 changes: 2 additions & 0 deletions packages/ui/src/7-components/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
@forward "clickable-list";
@forward "progress-bar";
@forward "top-cover";

@forward "code-panel";
@forward "tab-text-ediror";

@forward "top-banner";

Expand Down
26 changes: 26 additions & 0 deletions packages/ui/src/7-components/_tab-text-ediror.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@use '../abstract' as *;

.tab-text-editor {
--p-tab-text-editor-bg-color: var(--color-neutral-0);

background-color:hsl(var(--p-tab-text-editor-bg-color));
border:solid pxToRem(1) hsl(var(--color-border)); border-radius:var(--border-radius-small);

&-nav { padding:pxToRem(8); border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
&-content-box { position:relative; }
&-content { padding:pxToRem(12); block-size:pxToRem(200); overflow:auto; border-width:0; font-family:var(--code-font); }
&-options {
opacity:0; transition:var(--transition);
padding-inline-end:pxToRem(8); padding-block-end:pxToRem(8);
position:absolute; inset-inline-end:0; inset-block-end:0;
background: linear-gradient(315deg, hsl(var(--p-tab-text-editor-bg-color)) 35%, hsl(var(--p-tab-text-editor-bg-color) / 0) 100%);
> * {filter:none; }
}
&:where(:focus-within, :hover, :focus) {
.tab-text-editor-options { opacity:1; }
}

#{$theme-dark} & {
--p-tab-text-editor-bg-color: var(--color-neutral-100);
}
}

0 comments on commit cd10ab3

Please sign in to comment.