a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

converted block option buttons to toolbar buttons so that they can benefti from having tooltips

celine 5e966d82 83e9360a

+98 -91
+98 -91
components/Blocks/BlockOptions.tsx
··· 16 16 import { useEntitySetContext } from "components/EntitySetProvider"; 17 17 import { v7 } from "uuid"; 18 18 import { Input } from "components/Input"; 19 + import { ToolbarButton } from "components/Toolbar"; 20 + import * as Tooltip from "@radix-ui/react-tooltip"; 19 21 20 22 type Props = { 21 23 parent: string; ··· 36 38 : focusedElement?.parent; 37 39 38 40 return ( 39 - <div 40 - className={`blockOptionsWrapper sm:group-hover/text:block group-focus-within/text:block hidden 41 + <Tooltip.Provider> 42 + <div 43 + className={`blockOptionsWrapper sm:group-hover/text:block group-focus-within/text:block hidden 41 44 absolute right-2 sm:right-3 ${props.first ? "top-2 sm:top-3" : "top-1"}`} 42 - > 43 - <div className="blockOptionsContent flex gap-1 items-center"> 44 - <label 45 - className="blockOptionsImage hover:cursor-pointer flex place-items-center" 46 - onMouseDown={(e) => e.preventDefault()} 47 - > 48 - <div className="text-tertiary hover:text-accent "> 49 - <BlockImageSmall /> 50 - </div> 51 - <div className="hidden"> 52 - <input 53 - type="file" 54 - accept="image/*" 55 - onChange={async (e) => { 56 - let file = e.currentTarget.files?.[0]; 57 - if (!file || !rep) return; 58 - if (props.factID) 59 - await rep.mutate.retractFact({ factID: props.factID }); 60 - let entity = props.entityID; 61 - if (!entity) { 62 - entity = v7(); 63 - await rep?.mutate.addBlock({ 64 - parent: props.parent, 65 - permission_set: entity_set.set, 66 - type: "text", 67 - position: generateKeyBetween( 68 - props.position, 69 - props.nextPosition, 70 - ), 71 - newEntityID: entity, 72 - }); 73 - } 74 - await rep.mutate.assertFact({ 75 - entity, 45 + > 46 + <div className="blockOptionsContent flex gap-1 items-center"> 47 + <ToolbarButton 48 + tooltipContent="Add an Image" 49 + className="hover:bg-transparent hover:text-accent text-tertiary" 50 + > 51 + <label onMouseDown={(e) => e.preventDefault()}> 52 + <BlockImageSmall className="hover:text-accent" /> 53 + <div className="hidden"> 54 + <input 55 + type="file" 56 + accept="image/*" 57 + onChange={async (e) => { 58 + let file = e.currentTarget.files?.[0]; 59 + if (!file || !rep) return; 60 + if (props.factID) 61 + await rep.mutate.retractFact({ factID: props.factID }); 62 + let entity = props.entityID; 63 + if (!entity) { 64 + entity = v7(); 65 + await rep?.mutate.addBlock({ 66 + parent: props.parent, 67 + permission_set: entity_set.set, 68 + type: "text", 69 + position: generateKeyBetween( 70 + props.position, 71 + props.nextPosition, 72 + ), 73 + newEntityID: entity, 74 + }); 75 + } 76 + await rep.mutate.assertFact({ 77 + entity, 78 + attribute: "block/type", 79 + data: { type: "block-type-union", value: "image" }, 80 + }); 81 + await addImage(file, rep, { 82 + entityID: entity, 83 + attribute: "block/image", 84 + }); 85 + }} 86 + /> 87 + </div> 88 + </label> 89 + </ToolbarButton> 90 + 91 + <BlockLinkButton {...props} /> 92 + 93 + <ToolbarButton 94 + tooltipContent="Add a card" 95 + className="hover:bg-transparent hover:text-accent text-tertiary" 96 + onClick={async () => { 97 + if (!props.entityID) { 98 + let entity = v7(); 99 + 100 + await rep?.mutate.addBlock({ 101 + permission_set: entity_set.set, 102 + parent: props.parent, 103 + type: "card", 104 + position: generateKeyBetween( 105 + props.position, 106 + props.nextPosition, 107 + ), 108 + newEntityID: entity, 109 + }); 110 + useUIState.getState().openCard(props.parent, entity); 111 + if (rep) focusCard(entity, rep); 112 + } else { 113 + await rep?.mutate.assertFact({ 114 + entity: props.entityID, 76 115 attribute: "block/type", 77 - data: { type: "block-type-union", value: "image" }, 116 + data: { type: "block-type-union", value: "card" }, 78 117 }); 79 - await addImage(file, rep, { 80 - entityID: entity, 81 - attribute: "block/image", 118 + let entityID = v7(); 119 + await rep?.mutate.addBlock({ 120 + parent: props.entityID, 121 + position: "a0", 122 + newEntityID: entityID, 123 + type: "text", 124 + permission_set: entity_set.set, 82 125 }); 83 - }} 84 - /> 85 - </div> 86 - </label> 87 - <BlockLinkButton {...props} /> 88 - 89 - <button 90 - className="blockOptionsCard text-tertiary hover:text-accent" 91 - onMouseDown={(e) => e.preventDefault()} 92 - onClick={async () => { 93 - if (!props.entityID) { 94 - let entity = v7(); 95 - 96 - await rep?.mutate.addBlock({ 97 - permission_set: entity_set.set, 98 - parent: props.parent, 99 - type: "card", 100 - position: generateKeyBetween( 101 - props.position, 102 - props.nextPosition, 103 - ), 104 - newEntityID: entity, 105 - }); 106 - useUIState.getState().openCard(props.parent, entity); 107 - if (rep) focusCard(entity, rep); 108 - } else { 109 - await rep?.mutate.assertFact({ 110 - entity: props.entityID, 111 - attribute: "block/type", 112 - data: { type: "block-type-union", value: "card" }, 113 - }); 114 - let entityID = v7(); 115 - await rep?.mutate.addBlock({ 116 - parent: props.entityID, 117 - position: "a0", 118 - newEntityID: entityID, 119 - type: "text", 120 - permission_set: entity_set.set, 121 - }); 122 - useUIState.getState().openCard(props.parent, props.entityID); 123 - if (rep) focusCard(props.entityID, rep, "focusFirstBlock"); 124 - } 125 - }} 126 - > 127 - <BlockCardSmall /> 128 - </button> 126 + useUIState.getState().openCard(props.parent, props.entityID); 127 + if (rep) focusCard(props.entityID, rep, "focusFirstBlock"); 128 + } 129 + }} 130 + > 131 + <BlockCardSmall className="hover:text-accent" /> 132 + </ToolbarButton> 133 + </div> 129 134 </div> 130 - </div> 135 + </Tooltip.Provider> 131 136 ); 132 137 } 133 138 ··· 157 162 <div 158 163 className={`max-w-sm flex gap-2 hover:text-accent rounded-md ${linkOpen ? "text-secondary" : " text-tertiary"}`} 159 164 > 160 - <button 161 - onMouseDown={(e) => e.preventDefault()} 165 + <ToolbarButton 166 + tooltipContent="Add a Link" 167 + className="hover:bg-transparent hover:text-accent text-tertiary" 162 168 onClick={() => { 163 169 setLinkOpen(!linkOpen); 164 170 }} 165 171 > 166 - <BlockLinkSmall /> 167 - </button> 172 + <BlockLinkSmall className="hover:text-accent" /> 173 + </ToolbarButton> 174 + 168 175 {linkOpen && ( 169 176 <> 170 177 <Separator />