openreplay/frontend/app/components/Session_/Player/Controls/controls.module.css
Delirium 2ed4bba33e
feat(tracker/ui): support for multi tab sessions (#1236)
* feat(tracker): add support for multi tab sessions

* feat(backend): added support of multitabs

* fix(backend): added support of deprecated batch meta message to pre-decoder

* fix(backend): fixed nil meta issue for TabData messages in sink

* feat(player): add tabmanager

* feat(player): basic tabchange event support

* feat(player): pick tabstate for console panel and timeline

* fix(player): only display tabs that are created

* feat(player): connect performance, xray and events to tab state

* feat(player): merge all tabs data for overview

* feat(backend/tracker): extract tabdata into separate message from batchmeta

* fix(tracker): fix new session check

* fix(backend): remove batchmetadeprecated

* fix(backend): fix switch case

* fix(player): fix for tab message size

* feat(tracker): check for active tabs with broadcast channel

* feat(tracker): prevent multiple messages

* fix(tracker): ignore beacons from same tab, only ask if token isnt present yet, add small delay before start to wait for answer

* feat(player): support new msg struct in assist player

* fix(player): fix some livepl components for multi tab states

* feat(tracker): add option to disable multitab

* feat(tracker): add multitab to assist plugin

* feat(player): back compat for tab id

* fix(ui): fix missing list in controls

* fix(ui): optional list update

* feat(ui): fix visuals for multitab; use window focus event for tabs

* fix(tracker): fix for dying tests (added tabid to writer, refactored other tests)

* feat(ui): update LivePlayerSubHeader.tsx to support tabs

* feat(backend): added tabs support to devtools mob files

* feat(ui): connect state to current tab properly

* feat(backend): added multitab support to assits

* feat(backend): removed data check in agent message

* feat(backend): debug on

* fix(backend): fixed typo in message broadcast

* feat(backend): fixed issue in connect method

* fix(assist): fixed typo

* feat(assist): added more debug logs

* feat(assist): removed one log

* feat(assist): more logs

* feat(assist): use query.peerId

* feat(assist): more logs

* feat(assist): fixed session update

* fix(assist): fixed getSessions

* fix(assist): fixed request_control broadcast

* fix(assist): fixed typo

* fix(assist): added missed line

* fix(assist): fix typo

* feat(tracker): multitab support for assist sessions

* fix(tracker): fix dead tests (tabid prop)

* fix(tracker): fix yaml

* fix(tracker): timers issue

* fix(ui): fix ui E2E tests with magic?

* feat(assist): multitabs support for ee version

* fix(assist): added missed method import

* fix(tracker): fix fix events in assist

* feat(assist): added back compatibility for sessions without tabId

* fix(assist): apply message's top layer structure before broadcast call

* fix(assist): added random tabID for prev version

* fix(assist): added random tabID for prev version (ee)

* feat(assist): added debug logs

* fix(assist): fix typo in sessions_agents_count method

* fix(assist): fixed more typos in copy-pastes

* fix(tracker): fix restart timings

* feat(backend): added tabIDs for some events

* feat(ui): add tab change event to the user steps bar

* Revert "feat(backend): added tabIDs for some events"

This reverts commit 1467ad7f9f.

* feat(ui): revert timeline and xray to grab events from all tabs

* fix(ui): fix typo

---------

Co-authored-by: Alexander Zavorotynskiy <zavorotynskiy@pm.me>
2023-06-07 10:40:32 +02:00

115 lines
1.9 KiB
CSS

@import 'icons.css';
@keyframes fade {
0% { opacity: 1}
50% { opacity: 0}
100% { opacity: 1}
}
.controls {
padding-top: 10px;
position: relative;
}
.buttons {
display: flex;
justify-content: space-between;
align-items: center;
height: 55px;
padding-left: 10px;
padding-right: 0;
}
.buttonsLeft {
margin-right: auto;
display: flex;
align-items: center;
}
.butonsRight {
display: flex;
align-items: center;
}
.speedButton {
cursor: pointer;
color: $gray-darkest;
font-size: 14px;
padding: 0 10px;
height: 30px;
border-radius: 3px;
background-color: $gray-lightest;
&:hover {
background-color: $active-blue;
color: $teal;
transition: all 0.2s;
}
}
.skipIntervalButton {
font-weight: normal !important;
display: flex;
align-items: center;
cursor: pointer;
font-size: 13px;
color: $gray-darkest;
background-color: $gray-lightest;
padding: 0 10px;
height: 30px;
border-radius: 3px;
/* margin: 0 5px; */
&:hover {
background-color: $active-blue;
transition: all 0.2s;
color: $teal;
}
&.active {
background: repeating-linear-gradient( 125deg, #efefef, #efefef 3px, #ddd 3px, #efefef 5px );
}
}
.divider {
height: 30px;
width: 1px;
margin: 0 5px;
background-color: $gray-light-shade;
}
.withCheckIcon {
color: $gray-darkest;
& .checkIcon {
/* opacity: 1 !important; */
display: block;
}
}
.liveTag {
cursor: pointer;
user-select: none;
height: 26px;
width: 56px;
border-radius: 3px;
background-color: $gray-light;
display: flex;
align-items: center;
justify-content: center;
color: $gray-dark;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
margin-right: 10px;
& svg {
fill: $gray-dark;
}
&[data-is-live=true] {
background-color: #42AE5E;
color: white;
& svg {
fill: white;
animation: fade 1s infinite;
}
}
}