6c8c7b2da8
* feat: Camera Widget -- Scaffold the basic structure of the widget * feat: Camera Widget -- Prototype a feature, taking picture * feat: Camera Widget -- Add types for MediaRecorder -- Define media capture status and action types -- Prototype basic video recording, playing features * feat: Camera Widget -- Implement video player -- Add timer for recording and playing video -- Add permission and error handling logic -- Add device selectors * feat: Camera Widget -- Place control buttons above device inputs layer -- Make the widget fully responsive * feat: Camera Widget -- Change the color of caret-down icon to white -- Remove overlaying of web cam and video player -- Add some padding for device inputs * feat: Camera Widget -- Add black background to the container of the widget * feat: Camera Widget -- Change the widget icon * feat: Camera Widget -- Implement the mute feature of a mic or a camera * feat: Camera Widget -- Check media device permissions before getting started * feat: Camera Widget -- Add a fullscreen control * feat: Camera Widget -- Set error text color to white -- Change the layout of control panel * feat: Camera Widget -- Apply layout change for control panel according to app layout change * feat: Camera Widget -- Add a new derived property, videoURL * feat: Switch Group Widget -- Adopt theme changes * feat: Camera Widget -- Make background grey in case of both error and disabled status * feat: Camera Widget -- Update npm dependencies * feat: Camera Widget -- Fix on #8788, using muted property * feat: Camera Widget -- Show off the microphone setting icon only if the current mode is video -- Set isMirrored property to true by default * feat: Camera Widget -- Add photo viewer * feat: Camera Widget -- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture * feat: Camera Widget -- Expose meta properties for the widget * feat: Camera Widget -- Fix on responsiveness issue * feat: Camera Widget -- Add type definitions for MediaStream recording * feat: Camera Widget -- Hide isMirroed property for video mode * feat: Camera Widget -- Wrap all the controls with TooltipComponent * feat: Camera Widget -- Implement enter, exit full screen feature * feat: Camera Widget -- Add a widget icon for entity explorer * feat: Camera Widget -- Fix on the typo for the label of onRecordingStop property * feat: Camera Widget -- Enable/disable media tracks * feat: Camera Widget -- Set the video's height to 100% in fullscreen mode * feat: Camera Widget -- Add overlayers on Webcam * feat: Camera Widget -- Set position to relative on fullscreen wrapper div -- Set the photo viewer's height to 100% * feat: Camera Widget -- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged * feat: Camera Widget -- Refactor code base, eliminating commented code blocks * feat: Camera Widget -- Revert all the changes needed for keeping status when the widget is dragged -- Set mirroed property to false for video mode
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { createGlobalStyle } from "styled-components";
|
|
import { Theme } from "constants/DefaultTheme";
|
|
import { Classes } from "@blueprintjs/core";
|
|
import { Classes as CsClasses } from "components/ads/common";
|
|
|
|
export const GLOBAL_STYLE_TOOLTIP_CLASSNAME = "ads-global-tooltip";
|
|
|
|
export const TooltipStyles = createGlobalStyle<{
|
|
theme: Theme;
|
|
}>`
|
|
.${Classes.PORTAL} .${Classes.TOOLTIP}.${GLOBAL_STYLE_TOOLTIP_CLASSNAME}, .${
|
|
Classes.TOOLTIP
|
|
}.${GLOBAL_STYLE_TOOLTIP_CLASSNAME} {
|
|
max-width: 350px;
|
|
overflow-wrap: anywhere;
|
|
.${Classes.POPOVER_CONTENT} {
|
|
padding: 10px 12px;
|
|
border-radius: 0px;
|
|
background-color: ${(props) => props.theme.colors.tooltip.darkBg};
|
|
color: ${(props) => props.theme.colors.tooltip.darkText};
|
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
div.${Classes.POPOVER_ARROW} {
|
|
path {
|
|
fill: ${(props) => props.theme.colors.tooltip.darkBg};
|
|
stroke: ${(props) => props.theme.colors.tooltip.darkBg};
|
|
}
|
|
display: block;
|
|
}
|
|
.${CsClasses.BP3_POPOVER_ARROW_BORDER},
|
|
.${CsClasses.BP3_POPOVER_ARROW_FILL} {
|
|
fill: ${(props) => props.theme.colors.tooltip.darkBg};
|
|
}
|
|
}
|
|
`;
|