[ SYSTEM ]: Linux wordpress 6.1.0-44-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.164-1 (2026-03-09) x86_64
[ SERVER ]: Apache/2.4.66 (Debian) | PHP: 8.2.30
[ USER ]: www-data | IP: 172.19.30.54
GEFORCE FILE MANAGER
/
var
/
www
/
html
/
wordpress
/
wp-content
/
plugins
/
presto-player
/
src
/
admin
/
blocks
/
blocks
/
popup
/
components
/
UPLOAD:
NAME
SIZE
QUICK PERMS
ACTIONS
📄 PreviewToggle.js
680 B
SET
[ EDIT ]
|
[ DEL ]
📄 TriggerSelection.js
4,610 B
SET
[ EDIT ]
|
[ DEL ]
DELETE SELECTED
[ CLOSE ]
EDIT: TriggerSelection.js
/** @jsx jsx */ import { css, jsx } from "@emotion/core"; import { __ } from "@wordpress/i18n"; import ProBadge from "../../../shared/components/ProBadge"; const TriggerSelection = ({ triggerType, onTriggerTypeSelect }) => { return ( <div css={css` display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; width: 100%; max-width: 600px; margin: 0 auto; `} > <div css={css` border: 1px solid #e2e4e7; border-radius: 4px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; ${triggerType === "image" && "background-color: #f0f6fc; border-color: #007cba;"} &:hover { border-color: #007cba; box-shadow: 0 0 0 1px #007cba; } `} onClick={() => onTriggerTypeSelect("image")} > <div css={css` background: #f1f1f1; width: 48px; height: 48px; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; `} > <span className="dashicons dashicons-format-image"></span> </div> <div css={css` font-weight: 500; `} > {__("Image", "presto-player")} </div> <div css={css` font-size: 12px; color: #757575; margin-top: 4px; `} > {__("Image thumbnail trigger", "presto-player")} </div> </div> <div css={css` border: 1px solid #e2e4e7; border-radius: 4px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; ${triggerType === "button" && "background-color: #f0f6fc; border-color: #007cba;"} &:hover { border-color: #007cba; box-shadow: 0 0 0 1px #007cba; } `} onClick={() => onTriggerTypeSelect("button")} > <div css={css` background: #f1f1f1; width: 48px; height: 48px; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; `} > <span className="dashicons dashicons-button"></span> </div> <div css={css` font-weight: 500; `} > {__("Button", "presto-player")} </div> <div css={css` font-size: 12px; color: #757575; margin-top: 4px; `} > {__("Simple button trigger", "presto-player")} </div> </div> <div css={css` border: 1px solid #e2e4e7; border-radius: 4px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; ${triggerType === "custom" && "background-color: #f0f6fc; border-color: #007cba;"} &:hover { border-color: #007cba; box-shadow: 0 0 0 1px #007cba; } `} onClick={() => onTriggerTypeSelect("custom")} > {!prestoPlayer?.hasRequiredProVersion?.popups && ( <div css={css` position: absolute; top: 8px; right: 8px; `} > <ProBadge /> </div> )} <div css={css` background: #f1f1f1; width: 48px; height: 48px; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; `} > <span className="dashicons dashicons-edit"></span> </div> <div css={css` font-weight: 500; `} > {__("Custom", "presto-player")} </div> <div css={css` font-size: 12px; color: #757575; margin-top: 4px; `} > {__("Create your own trigger", "presto-player")} </div> </div> </div> ); }; export default TriggerSelection;