2017-04-19 22:25:48 +02:00
|
|
|
/*
|
|
|
|
This file is part of Telegram Desktop,
|
2018-01-03 11:23:14 +01:00
|
|
|
the official desktop application for the Telegram messaging service.
|
2017-04-19 22:25:48 +02:00
|
|
|
|
2018-01-03 11:23:14 +01:00
|
|
|
For license and copyright information please follow this link:
|
|
|
|
https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
|
2017-04-19 22:25:48 +02:00
|
|
|
*/
|
2019-09-17 18:13:12 +02:00
|
|
|
using "ui/basic.style";
|
2017-04-19 22:25:48 +02:00
|
|
|
|
|
|
|
using "ui/widgets/widgets.style";
|
2017-04-27 21:04:45 +02:00
|
|
|
using "window/window.style";
|
2017-04-19 22:25:48 +02:00
|
|
|
|
2018-05-27 10:24:47 +02:00
|
|
|
CallSignalBars {
|
|
|
|
width: pixels;
|
|
|
|
radius: pixels;
|
|
|
|
skip: pixels;
|
|
|
|
color: color;
|
|
|
|
inactiveOpacity: double;
|
|
|
|
}
|
|
|
|
|
2018-03-31 03:45:40 +02:00
|
|
|
callRadius: 6px;
|
2017-04-19 22:25:48 +02:00
|
|
|
callShadow: Shadow {
|
|
|
|
left: icon {{ "call_shadow_left", windowShadowFg }};
|
|
|
|
topLeft: icon {{ "call_shadow_top_left", windowShadowFg }};
|
|
|
|
top: icon {{ "call_shadow_top", windowShadowFg }};
|
|
|
|
topRight: icon {{ "call_shadow_top_left-flip_horizontal", windowShadowFg }};
|
|
|
|
right: icon {{ "call_shadow_left-flip_horizontal", windowShadowFg }};
|
|
|
|
bottomRight: icon {{ "call_shadow_top_left-flip_vertical-flip_horizontal", windowShadowFg }};
|
|
|
|
bottom: icon {{ "call_shadow_top-flip_vertical", windowShadowFg }};
|
|
|
|
bottomLeft: icon {{ "call_shadow_top_left-flip_vertical", windowShadowFg }};
|
|
|
|
extend: margins(9px, 8px, 9px, 10px);
|
|
|
|
fallback: windowShadowFgFallback;
|
|
|
|
}
|
|
|
|
|
2020-08-07 15:28:41 +02:00
|
|
|
callWidthMin: 380px;
|
|
|
|
callHeightMin: 440px;
|
2020-08-07 16:33:34 +02:00
|
|
|
callWidth: 720px;
|
2020-08-07 15:28:41 +02:00
|
|
|
callHeight: 540px;
|
|
|
|
|
|
|
|
callBottomControlsHeight: 85px;
|
|
|
|
|
|
|
|
CallBodyLayout {
|
|
|
|
height: pixels;
|
|
|
|
photoTop: pixels;
|
|
|
|
photoSize: pixels;
|
|
|
|
nameTop: pixels;
|
|
|
|
statusTop: pixels;
|
|
|
|
}
|
|
|
|
|
|
|
|
callBodyLayout: CallBodyLayout {
|
|
|
|
height: 284px;
|
|
|
|
photoTop: 21px;
|
|
|
|
photoSize: 180px;
|
|
|
|
nameTop: 221px;
|
|
|
|
statusTop: 254px;
|
|
|
|
}
|
|
|
|
callBodyWithPreview: CallBodyLayout {
|
|
|
|
height: 185px;
|
|
|
|
photoTop: 21px;
|
|
|
|
photoSize: 100px;
|
|
|
|
nameTop: 132px;
|
|
|
|
statusTop: 163px;
|
|
|
|
}
|
|
|
|
|
|
|
|
callOutgoingPreviewMin: size(360px, 120px);
|
|
|
|
callOutgoingPreview: size(540px, 180px); // default, for height == callHeight.
|
2020-08-13 13:16:39 +02:00
|
|
|
callOutgoingPreviewMax: size(1620px, 540px);
|
2020-08-04 11:06:48 +02:00
|
|
|
callOutgoingDefaultSize: size(160px, 110px);
|
|
|
|
|
2020-08-13 13:16:39 +02:00
|
|
|
callInnerPadding: 12px;
|
|
|
|
|
2020-08-07 15:28:41 +02:00
|
|
|
callFingerprintPadding: margins(9px, 4px, 9px, 5px);
|
|
|
|
callFingerprintTop: 11px;
|
|
|
|
callFingerprintSkip: 3px;
|
|
|
|
callFingerprintBottom: -16px;
|
|
|
|
|
2017-04-19 22:25:48 +02:00
|
|
|
callButton: IconButton {
|
2020-08-07 15:28:41 +02:00
|
|
|
width: 64px;
|
|
|
|
height: 64px;
|
2017-04-19 22:25:48 +02:00
|
|
|
|
2017-04-29 20:00:27 +02:00
|
|
|
iconPosition: point(-1px, -1px);
|
2017-04-19 22:25:48 +02:00
|
|
|
|
2020-08-07 15:28:41 +02:00
|
|
|
rippleAreaPosition: point(10px, 10px);
|
|
|
|
rippleAreaSize: 44px;
|
2017-04-19 22:25:48 +02:00
|
|
|
ripple: defaultRippleAnimation;
|
|
|
|
}
|
2020-08-07 15:28:41 +02:00
|
|
|
callButtonLabel: FlatLabel(defaultFlatLabel) {
|
|
|
|
textFg: callNameFg;
|
|
|
|
}
|
2017-04-19 22:25:48 +02:00
|
|
|
|
|
|
|
callAnswer: CallButton {
|
|
|
|
button: IconButton(callButton) {
|
|
|
|
icon: icon {{ "call_answer", callIconFg }};
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callAnswerRipple;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bg: callAnswerBg;
|
2017-05-05 12:14:40 +02:00
|
|
|
angle: 135.;
|
2017-05-07 21:09:20 +02:00
|
|
|
outerRadius: 12px;
|
|
|
|
outerBg: callAnswerBgOuter;
|
2020-08-07 15:28:41 +02:00
|
|
|
label: callButtonLabel;
|
2017-04-19 22:25:48 +02:00
|
|
|
}
|
|
|
|
callHangup: CallButton {
|
|
|
|
button: IconButton(callButton) {
|
|
|
|
icon: icon {{ "call_discard", callIconFg }};
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callHangupRipple;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bg: callHangupBg;
|
2017-05-07 21:09:20 +02:00
|
|
|
outerBg: callHangupBg;
|
2020-08-07 15:28:41 +02:00
|
|
|
label: callButtonLabel;
|
2017-04-19 22:25:48 +02:00
|
|
|
}
|
2017-04-29 20:00:27 +02:00
|
|
|
callCancel: CallButton {
|
|
|
|
button: IconButton(callButton) {
|
|
|
|
icon: icon {{ "box_button_close", callCancelFg }};
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callCancelRipple;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bg: callCancelBg;
|
2017-05-07 21:09:20 +02:00
|
|
|
outerBg: callCancelBg;
|
2020-08-07 15:28:41 +02:00
|
|
|
label: callButtonLabel;
|
2017-04-29 20:00:27 +02:00
|
|
|
}
|
2020-08-07 15:28:41 +02:00
|
|
|
callMuteToggle: CallButton {
|
|
|
|
button: IconButton(callButton) {
|
|
|
|
icon: icon {{ "call_record_active", callIconFg }};
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callMuteRipple;
|
|
|
|
}
|
2017-04-19 22:25:48 +02:00
|
|
|
}
|
2020-08-07 15:28:41 +02:00
|
|
|
bg: callMuteRipple;
|
|
|
|
outerBg: callMuteRipple;
|
|
|
|
label: callButtonLabel;
|
2017-04-19 22:25:48 +02:00
|
|
|
}
|
|
|
|
callUnmuteIcon: icon {{ "call_record_muted", callIconFg }};
|
2020-08-07 15:28:41 +02:00
|
|
|
callCameraToggle: CallButton(callMuteToggle) {
|
|
|
|
button: IconButton(callButton) {
|
|
|
|
icon: icon {{ "call_camera_active", callIconFg }};
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callMuteRipple;
|
|
|
|
}
|
2020-07-16 18:23:55 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
callNoCameraIcon: icon {{ "call_camera_muted", callIconFg }};
|
2017-04-19 22:25:48 +02:00
|
|
|
|
2017-04-25 18:45:41 +02:00
|
|
|
callName: FlatLabel(defaultFlatLabel) {
|
2017-11-10 16:45:10 +01:00
|
|
|
minWidth: 260px;
|
2017-05-04 14:29:32 +02:00
|
|
|
maxHeight: 30px;
|
2017-04-25 18:45:41 +02:00
|
|
|
textFg: callNameFg;
|
|
|
|
align: align(top);
|
|
|
|
style: TextStyle(defaultTextStyle) {
|
|
|
|
font: font(21px semibold);
|
|
|
|
linkFont: font(21px semibold);
|
|
|
|
linkFontOver: font(21px semibold underline);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
callStatus: FlatLabel(defaultFlatLabel) {
|
2017-11-10 16:45:10 +01:00
|
|
|
minWidth: 260px;
|
2017-04-25 18:45:41 +02:00
|
|
|
maxHeight: 20px;
|
|
|
|
textFg: callStatusFg;
|
|
|
|
align: align(top);
|
|
|
|
style: TextStyle(defaultTextStyle) {
|
|
|
|
font: font(14px);
|
|
|
|
linkFont: font(14px);
|
|
|
|
linkFontOver: font(14px underline);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-04-25 22:36:04 +02:00
|
|
|
callBarHeight: 38px;
|
|
|
|
callBarMuteToggle: IconButton {
|
|
|
|
width: 41px;
|
|
|
|
height: 38px;
|
|
|
|
|
|
|
|
icon: icon {{ "call_record_active", callBarFg }};
|
2020-07-16 18:23:55 +02:00
|
|
|
iconPosition: point(3px, 2px);
|
2017-04-25 22:36:04 +02:00
|
|
|
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: callBarMuteRipple;
|
|
|
|
}
|
|
|
|
rippleAreaPosition: point(5px, 3px);
|
|
|
|
rippleAreaSize: 32px;
|
|
|
|
}
|
|
|
|
callBarUnmuteIcon: icon {{ "call_record_muted", callBarFg }};
|
|
|
|
callBarRightSkip: 12px;
|
|
|
|
callBarSkip: 10px;
|
|
|
|
callBarHangup: IconButton(callBarMuteToggle) {
|
|
|
|
icon: icon {{ "call_discard", callBarFg }};
|
2020-07-16 18:23:55 +02:00
|
|
|
iconPosition: point(3px, 1px);
|
2017-04-25 22:36:04 +02:00
|
|
|
}
|
|
|
|
callBarLabel: LabelSimple(defaultLabelSimple) {
|
|
|
|
font: semiboldFont;
|
|
|
|
textFg: callBarFg;
|
|
|
|
}
|
2017-05-14 21:44:50 +02:00
|
|
|
callBarInfoLabel: FlatLabel(defaultFlatLabel) {
|
|
|
|
maxHeight: 28px;
|
|
|
|
align: align(top);
|
|
|
|
textFg: callBarFg;
|
|
|
|
style: TextStyle(defaultTextStyle) {
|
|
|
|
font: semiboldFont;
|
|
|
|
}
|
|
|
|
}
|
2017-04-25 22:36:04 +02:00
|
|
|
callBarLabelTop: 10px;
|
2017-04-27 21:04:45 +02:00
|
|
|
|
|
|
|
callArrowPosition: point(-2px, 1px);
|
|
|
|
callArrowIn: icon {{ "call_arrow_in", callArrowFg }};
|
|
|
|
callArrowOut: icon {{ "call_arrow_out", callArrowFg }};
|
|
|
|
callArrowMissed: icon {{ "call_arrow_in", callArrowMissedFg }};
|
|
|
|
callArrowSkip: 4px;
|
|
|
|
callReDial: IconButton {
|
|
|
|
width: 40px;
|
|
|
|
height: 56px;
|
|
|
|
|
|
|
|
icon: mainMenuCalls;
|
|
|
|
iconOver: mainMenuCallsOver;
|
|
|
|
iconPosition: point(-1px, -1px);
|
|
|
|
|
|
|
|
ripple: defaultRippleAnimation;
|
2017-04-28 14:54:40 +02:00
|
|
|
rippleAreaPosition: point(0px, 8px);
|
|
|
|
rippleAreaSize: 40px;
|
2017-04-27 21:04:45 +02:00
|
|
|
}
|
2017-05-02 13:56:39 +02:00
|
|
|
|
2017-05-10 10:01:34 +02:00
|
|
|
callRatingPadding: margins(24px, 12px, 24px, 0px);
|
2017-05-02 13:56:39 +02:00
|
|
|
callRatingStar: IconButton {
|
|
|
|
width: 36px;
|
|
|
|
height: 36px;
|
|
|
|
|
|
|
|
icon: icon {{ "call_rating", windowSubTextFg }};
|
|
|
|
iconPosition: point(-1px, -1px);
|
|
|
|
|
|
|
|
ripple: RippleAnimation(defaultRippleAnimation) {
|
|
|
|
color: windowBgOver;
|
|
|
|
}
|
|
|
|
rippleAreaPosition: point(0px, 0px);
|
|
|
|
rippleAreaSize: 36px;
|
|
|
|
}
|
|
|
|
callRatingStarFilled: icon {{ "call_rating_filled", lightButtonFg }};
|
2017-05-09 21:33:50 +02:00
|
|
|
callRatingStarTop: 4px;
|
2017-05-02 13:56:39 +02:00
|
|
|
callRatingComment: InputField(defaultInputField) {
|
|
|
|
textMargins: margins(1px, 26px, 1px, 4px);
|
|
|
|
heightMax: 135px;
|
|
|
|
}
|
2017-05-09 21:33:50 +02:00
|
|
|
callRatingCommentTop: 8px;
|
2017-05-04 14:28:37 +02:00
|
|
|
|
2017-09-20 21:44:22 +02:00
|
|
|
callDebugPadding: margins(24px, 0px, 24px, 0px);
|
2017-05-04 14:28:37 +02:00
|
|
|
callDebugLabel: FlatLabel(defaultFlatLabel) {
|
2017-09-20 21:44:22 +02:00
|
|
|
margin: callDebugPadding;
|
2017-05-04 14:28:37 +02:00
|
|
|
}
|
2017-05-05 12:14:40 +02:00
|
|
|
callPanelDuration: 150;
|
2018-05-27 10:24:47 +02:00
|
|
|
|
|
|
|
callPanelSignalBars: CallSignalBars {
|
|
|
|
width: 3px;
|
|
|
|
radius: 1px;
|
|
|
|
skip: 1px;
|
|
|
|
color: callNameFg;
|
|
|
|
inactiveOpacity: 0.5;
|
|
|
|
}
|
|
|
|
callBarSignalBars: CallSignalBars(callPanelSignalBars) {
|
|
|
|
color: callBarFg;
|
|
|
|
}
|
|
|
|
callSignalMargin: 8px;
|
|
|
|
callSignalPadding: 4px;
|
2020-08-12 15:35:31 +02:00
|
|
|
|
|
|
|
callTitle: WindowTitle(defaultWindowTitle) {
|
2020-08-12 18:58:05 +02:00
|
|
|
height: 0px;
|
2020-08-12 15:35:31 +02:00
|
|
|
bg: callBgOpaque;
|
|
|
|
bgActive: callBgOpaque;
|
|
|
|
fg: transparent;
|
|
|
|
fgActive: transparent;
|
|
|
|
minimize: IconButton(windowTitleButton) {
|
|
|
|
icon: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_minimize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
iconOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_minimize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
minimizeIconActive: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_minimize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
minimizeIconActiveOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_minimize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
maximize: IconButton(windowTitleButton) {
|
|
|
|
icon: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_maximize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
iconOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_maximize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
maximizeIconActive: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_maximize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
maximizeIconActiveOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_maximize", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
restoreIcon: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_restore", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
restoreIconOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_restore", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
restoreIconActive: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_restore", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
restoreIconActiveOver: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ size(24px, 21px), callMuteRipple },
|
|
|
|
{ "title_button_restore", callStatusFg, point(4px, 4px) },
|
|
|
|
};
|
|
|
|
close: IconButton(windowTitleButtonClose) {
|
|
|
|
icon: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_close", callStatusFg, point(5px, 4px) },
|
|
|
|
};
|
|
|
|
iconOver: icon {
|
|
|
|
{ size(25px, 21px), titleButtonCloseBgOver },
|
|
|
|
{ "title_button_close", titleButtonCloseFgOver, point(5px, 4px) },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
closeIconActive: icon {
|
2020-08-12 18:58:24 +02:00
|
|
|
{ size(24px, 21px), callBgButton },
|
2020-08-12 15:35:31 +02:00
|
|
|
{ "title_button_close", callStatusFg, point(5px, 4px) },
|
|
|
|
};
|
|
|
|
closeIconActiveOver: icon {
|
|
|
|
{ size(25px, 21px), titleButtonCloseBgActiveOver },
|
|
|
|
{ "title_button_close", titleButtonCloseFgActiveOver, point(5px, 4px) },
|
|
|
|
};
|
|
|
|
}
|