| | |
| | | > |
| | | <PortalToFollowElemTrigger asChild> |
| | | <div className={` |
| | | h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg |
| | | p-0.5 text-[13px] shadow-lg backdrop-blur-[5px] |
| | | p-0.5 h-9 cursor-pointer text-[13px] backdrop-blur-[5px] rounded-lg |
| | | bg-components-actionbar-bg shadow-lg border-[0.5px] border-components-actionbar-border |
| | | hover:bg-state-base-hover |
| | | ${workflowReadOnly && '!cursor-not-allowed opacity-50'} |
| | | `}> |
| | | <div className={cn( |
| | | 'flex h-8 w-[98px] items-center justify-between rounded-lg', |
| | | 'flex items-center justify-between w-[98px] h-8 rounded-lg', |
| | | )}> |
| | | <TipPopup |
| | | title={t('workflow.operator.zoomOut')} |
| | | shortcuts={['ctrl', '-']} |
| | | > |
| | | <div |
| | | className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`} |
| | | className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`} |
| | | onClick={(e) => { |
| | | if (zoom <= 0.25) |
| | | return |
| | |
| | | zoomOut() |
| | | }} |
| | | > |
| | | <RiZoomOutLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' /> |
| | | <RiZoomOutLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' /> |
| | | </div> |
| | | </TipPopup> |
| | | <div onClick={handleTrigger} className={cn('system-sm-medium w-[34px] text-text-tertiary hover:text-text-secondary')}>{Number.parseFloat(`${zoom * 100}`).toFixed(0)}%</div> |
| | | <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div> |
| | | <TipPopup |
| | | title={t('workflow.operator.zoomIn')} |
| | | shortcuts={['ctrl', '+']} |
| | | > |
| | | <div |
| | | className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`} |
| | | className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`} |
| | | onClick={(e) => { |
| | | if (zoom >= 2) |
| | | return |
| | |
| | | zoomIn() |
| | | }} |
| | | > |
| | | <RiZoomInLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' /> |
| | | <RiZoomInLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' /> |
| | | </div> |
| | | </TipPopup> |
| | | </div> |
| | | </div> |
| | | </PortalToFollowElemTrigger> |
| | | <PortalToFollowElemContent className='z-10'> |
| | | <div className='w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'> |
| | | <div className='w-[145px] backdrop-blur-[5px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'> |
| | | { |
| | | ZOOM_IN_OUT_OPTIONS.map((options, i) => ( |
| | | <Fragment key={i}> |
| | |
| | | options.map(option => ( |
| | | <div |
| | | key={option.key} |
| | | className='system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover' |
| | | className='flex items-center justify-between space-x-1 py-1.5 pl-3 pr-2 h-8 rounded-lg hover:bg-state-base-hover cursor-pointer system-md-regular text-text-secondary' |
| | | onClick={() => handleZoom(option.key)} |
| | | > |
| | | <span>{option.text}</span> |