Skip to content

Commit 22b9e03

Browse files
bobsingorbobsingor
authored
Merge pull request #307 from embedpdf/fix/snippet-layout-fixes
Fix snippet layout
2 parents 476bab2 + 23f5765 commit 22b9e03

8 files changed

Lines changed: 102 additions & 18 deletions

File tree

‎.changeset/fix-ios-zoom-and-fullscreen-icon.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@embedpdf/snippet': patch
3+
---
4+
5+
- Fixed iOS zoom issue on input focus by changing text size from `text-sm` to `text-base` in form inputs
6+
- Fullscreen button icon now dynamically updates to show exit icon when in fullscreen mode
7+
- Improved zoom menu UI schema with unique item IDs and better responsive behavior

‎viewers/snippet/src/components/comment-sidebar/annotation-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const AnnotationInput = ({
3636
placeholder={placeholder}
3737
value={text}
3838
onInput={(e) => setText(e.currentTarget.value)}
39-
className={`bg-bg-input text-fg-primary placeholder-fg-muted w-full rounded-lg border px-3 py-2 text-sm transition-colors focus:border-transparent focus:outline-none focus:ring-2 ${
39+
className={`bg-bg-input text-fg-primary placeholder-fg-muted w-full rounded-lg border px-3 py-1 text-base transition-colors focus:border-transparent focus:outline-none focus:ring-2 ${
4040
isFocused ? 'border-accent focus:ring-accent' : 'border-border-default focus:ring-accent'
4141
}`}
4242
/>

‎viewers/snippet/src/components/comment-sidebar/edit-comment-form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const EditCommentForm = ({
4545
ref={textareaRef}
4646
value={text}
4747
onInput={(e) => setText(e.currentTarget.value)}
48-
className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1"
48+
className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent w-full rounded-md border px-3 py-2 text-base focus:outline-none focus:ring-1"
4949
rows={3}
5050
/>
5151
<div className="flex flex-wrap gap-2">

‎viewers/snippet/src/components/page-controls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export function PageControls({ documentId }: PageControlsProps) {
146146
onFocus={handleInputFocus}
147147
onBlur={handleInputBlur}
148148
onKeyDown={handleKeyDown}
149-
className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent h-7 w-10 rounded border px-1 text-center text-sm focus:outline-none focus:ring-1"
149+
className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent h-7 w-10 rounded border px-1 text-center text-base focus:outline-none focus:ring-1"
150150
/>
151151
<span className="text-fg-secondary text-sm">&nbsp; {totalPages}</span>
152152
</div>

‎viewers/snippet/src/components/print-modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
145145
value={customPages}
146146
onInput={(e) => setCustomPages((e.target as HTMLInputElement).value)}
147147
disabled={selection !== 'custom' || isLoading}
148-
className={`w-full rounded-md border px-3 py-1 text-sm ${
148+
className={`w-full rounded-md border px-3 py-1 text-base ${
149149
selection !== 'custom' || isLoading
150150
? 'bg-interactive-disabled text-fg-muted'
151151
: 'border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent'

‎viewers/snippet/src/components/search-sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export function SearchSidebar({ documentId, onClose }: SearchSidebarProps) {
156156
placeholder={translate('search.placeholder')}
157157
value={inputValue}
158158
onInput={handleInputChange}
159-
className="border-border-default bg-bg-input focus:border-accent focus:ring-accent w-full rounded-md border py-1 pl-8 pr-9 text-sm focus:outline-none focus:ring-1"
159+
className="border-border-default bg-bg-input focus:border-accent focus:ring-accent w-full rounded-md border py-1 pl-8 pr-9 text-base focus:outline-none focus:ring-1"
160160
/>
161161
{inputValue && (
162162
<div

‎viewers/snippet/src/config/commands.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,8 @@ export const commands: Record<string, Command<State>> = {
456456
'document:fullscreen': {
457457
id: 'document:fullscreen',
458458
labelKey: 'document.fullscreen',
459-
icon: 'fullscreen',
459+
icon: ({ state }) =>
460+
state.plugins['fullscreen']?.isFullscreen ? 'fullscreenExit' : 'fullscreen',
460461
shortcuts: ['F11'],
461462
categories: ['document', 'document-fullscreen'],
462463
action: ({ registry }) => {

‎viewers/snippet/src/config/ui-schema.ts‎

Lines changed: 88 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -705,55 +705,55 @@ export const viewerUISchema: UISchema = {
705705
items: [
706706
{
707707
type: 'command',
708-
id: 'zoom:25',
708+
id: 'zoom-levels-menu:25',
709709
commandId: 'zoom:25',
710710
categories: ['zoom', 'zoom-level', 'zoom-level-25'],
711711
},
712712
{
713713
type: 'command',
714-
id: 'zoom:50',
714+
id: 'zoom-levels-menu:50',
715715
commandId: 'zoom:50',
716716
categories: ['zoom', 'zoom-level', 'zoom-level-50'],
717717
},
718718
{
719719
type: 'command',
720-
id: 'zoom:100',
720+
id: 'zoom-levels-menu:100',
721721
commandId: 'zoom:100',
722722
categories: ['zoom', 'zoom-level', 'zoom-level-100'],
723723
},
724724
{
725725
type: 'command',
726-
id: 'zoom:125',
726+
id: 'zoom-levels-menu:125',
727727
commandId: 'zoom:125',
728728
categories: ['zoom', 'zoom-level', 'zoom-level-125'],
729729
},
730730
{
731731
type: 'command',
732-
id: 'zoom:150',
732+
id: 'zoom-levels-menu:150',
733733
commandId: 'zoom:150',
734734
categories: ['zoom', 'zoom-level', 'zoom-level-150'],
735735
},
736736
{
737737
type: 'command',
738-
id: 'zoom:200',
738+
id: 'zoom-levels-menu:200',
739739
commandId: 'zoom:200',
740740
categories: ['zoom', 'zoom-level', 'zoom-level-200'],
741741
},
742742
{
743743
type: 'command',
744-
id: 'zoom:400',
744+
id: 'zoom-levels-menu:400',
745745
commandId: 'zoom:400',
746746
categories: ['zoom', 'zoom-level', 'zoom-level-400'],
747747
},
748748
{
749749
type: 'command',
750-
id: 'zoom:800',
750+
id: 'zoom-levels-menu:800',
751751
commandId: 'zoom:800',
752752
categories: ['zoom', 'zoom-level', 'zoom-level-800'],
753753
},
754754
{
755755
type: 'command',
756-
id: 'zoom:1600',
756+
id: 'zoom-levels-menu:1600',
757757
commandId: 'zoom:1600',
758758
categories: ['zoom', 'zoom-level', 'zoom-level-1600'],
759759
},
@@ -763,6 +763,60 @@ export const viewerUISchema: UISchema = {
763763
id: 'zoom-menu',
764764
categories: ['zoom'],
765765
items: [
766+
{
767+
type: 'command',
768+
id: 'zoom-menu:25',
769+
commandId: 'zoom:25',
770+
categories: ['zoom', 'zoom-level', 'zoom-level-25'],
771+
},
772+
{
773+
type: 'command',
774+
id: 'zoom-menu:50',
775+
commandId: 'zoom:50',
776+
categories: ['zoom', 'zoom-level', 'zoom-level-50'],
777+
},
778+
{
779+
type: 'command',
780+
id: 'zoom-menu:100',
781+
commandId: 'zoom:100',
782+
categories: ['zoom', 'zoom-level', 'zoom-level-100'],
783+
},
784+
{
785+
type: 'command',
786+
id: 'zoom-menu:125',
787+
commandId: 'zoom:125',
788+
categories: ['zoom', 'zoom-level', 'zoom-level-125'],
789+
},
790+
{
791+
type: 'command',
792+
id: 'zoom-menu:150',
793+
commandId: 'zoom:150',
794+
categories: ['zoom', 'zoom-level', 'zoom-level-150'],
795+
},
796+
{
797+
type: 'command',
798+
id: 'zoom-menu:200',
799+
commandId: 'zoom:200',
800+
categories: ['zoom', 'zoom-level', 'zoom-level-200'],
801+
},
802+
{
803+
type: 'command',
804+
id: 'zoom-menu:400',
805+
commandId: 'zoom:400',
806+
categories: ['zoom', 'zoom-level', 'zoom-level-400'],
807+
},
808+
{
809+
type: 'command',
810+
id: 'zoom-menu:800',
811+
commandId: 'zoom:800',
812+
categories: ['zoom', 'zoom-level', 'zoom-level-800'],
813+
},
814+
{
815+
type: 'command',
816+
id: 'zoom-menu:1600',
817+
commandId: 'zoom:1600',
818+
categories: ['zoom', 'zoom-level', 'zoom-level-1600'],
819+
},
766820
{
767821
type: 'submenu',
768822
id: 'zoom-levels-submenu',
@@ -777,13 +831,13 @@ export const viewerUISchema: UISchema = {
777831
},
778832
{
779833
type: 'command',
780-
id: 'zoom:in',
834+
id: 'zoom-menu:in',
781835
commandId: 'zoom:in',
782836
categories: ['zoom', 'zoom-in'],
783837
},
784838
{
785839
type: 'command',
786-
id: 'zoom:out',
840+
id: 'zoom-menu:out',
787841
commandId: 'zoom:out',
788842
categories: ['zoom', 'zoom-out'],
789843
},
@@ -819,10 +873,32 @@ export const viewerUISchema: UISchema = {
819873
xs: {
820874
maxWidth: 640,
821875
show: ['zoom-levels-submenu', 'divider-zoom-in-out'],
876+
hide: [
877+
'zoom-menu:25',
878+
'zoom-menu:50',
879+
'zoom-menu:100',
880+
'zoom-menu:125',
881+
'zoom-menu:150',
882+
'zoom-menu:200',
883+
'zoom-menu:400',
884+
'zoom-menu:800',
885+
'zoom-menu:1600',
886+
],
822887
},
823888
md: {
824889
minWidth: 768,
825-
hide: ['zoom-levels-submenu', 'divider-zoom-in-out'],
890+
show: [
891+
'zoom-menu:25',
892+
'zoom-menu:50',
893+
'zoom-menu:100',
894+
'zoom-menu:125',
895+
'zoom-menu:150',
896+
'zoom-menu:200',
897+
'zoom-menu:400',
898+
'zoom-menu:800',
899+
'zoom-menu:1600',
900+
],
901+
hide: ['zoom-levels-submenu', 'divider-zoom-in-out', 'zoom-menu:in', 'zoom-menu:out'],
826902
},
827903
},
828904
},

0 commit comments

Comments
 (0)