EvanZhu0721 / 公开仓库

SBMS

镜像已同步

SBMS complete the calculation rules for the default logical desktop topology relationship and the physical dimensions of the displays in the Windows multi-screen collaboration system.

RustGPL-3.0main来源 commit a37d6c4b2026/10/15 07:25:26 同步

上游 GitHub

文件

../ pages controls.slint16.0 KB launch-intro.slint7.9 KB quick-access.slint13.9 KB remove-group-dialog.slint3.2 KB seven-segment.slint4.4 KB theme.slint2.1 KB tray-icon.svg314 B

ui/launch-intro.slint7.9 KB

1import { MdTokens } from "theme.slint";

3// Software rendering has no blurred shadows. Two enlarged translucent glyphs

4// provide a compact, deterministic glow without changing renderers.

5component GlowLetter inherits Rectangle {

6 in property <string> glyph;

8 background: transparent;

10 Text {

11 x: -5px;

12 y: -5px;

13 width: parent.width + 10px;

14 height: parent.height + 10px;

15 text: root.glyph;

16 color: #ff2b20;

17 opacity: 0.24;

18 font-family: "Segoe UI";

19 font-size: 100px;

20 font-weight: 800;

21 horizontal-alignment: center;

22 vertical-alignment: center;

23 }

25 Text {

26 x: -2px;

27 y: -2px;

28 width: parent.width + 4px;

29 height: parent.height + 4px;

30 text: root.glyph;

31 color: #ff2418;

32 opacity: 0.5;

33 font-family: "Segoe UI";

34 font-size: 96px;

35 font-weight: 800;

36 horizontal-alignment: center;

37 vertical-alignment: center;

38 }

40 Text {

41 width: parent.width;

42 height: parent.height;

43 text: root.glyph;

44 color: #f01414;

45 font-family: "Segoe UI";

46 font-size: 92px;

47 font-weight: 800;

48 horizontal-alignment: center;

49 vertical-alignment: center;

50 }

51}

53component IntroAction inherits Rectangle {

54 in property <string> label;

55 in property <bool> emphasized: false;

56 callback clicked();

58 background: root.emphasized ? MdTokens.primary-container : MdTokens.surface-container;

59 border-width: 1px;

60 border-color: MdTokens.outline-variant;

61 border-radius: MdTokens.shape-medium;

63 Rectangle {

64 width: parent.width;

65 height: parent.height;

66 border-radius: parent.border-radius;

67 background: root.emphasized ? MdTokens.on-primary-container : MdTokens.on-surface;

68 opacity: action-touch.pressed ? 0.12 : (action-touch.has-hover ? 0.08 : 0);

69 animate opacity { duration: 100ms; easing: ease-in-out; }

70 }

72 Text {

73 x: 14px;

74 y: 8px;

75 width: parent.width - 28px;

76 height: parent.height - 16px;

77 text: root.label;

78 color: root.emphasized ? MdTokens.on-primary-container : MdTokens.on-surface;

79 font-size: 13px;

80 font-weight: 600;

81 vertical-alignment: center;

82 wrap: word-wrap;

83 accessible-role: none;

84 }

86 action-touch := TouchArea {

87 accessible-role: button;

88 accessible-label: root.label;

89 clicked => { root.clicked(); }

90 }

91}

93// Cold-start brand animation. The software renderer cannot animate transforms,

94// so the motion is expressed with position, opacity, and nested offsets.

95export component LaunchIntro inherits Rectangle {

96 in property <bool> active: false;

97 in property <int> stage: 0;

98 callback disable-forever();

99 callback open-project-home();

100

101 visible: root.active;

102 opacity: root.stage >= 17 ? 0 : 1;

103 background: MdTokens.surface;

104 clip: true;

105

106 animate opacity {

107 duration: 240ms;

108 easing: ease-in-out;

109 }

110

111 // The banner's four-color MS mark. It begins as four solid tiles; black

112 // geometric cuts then carve the M across the left column and the S across

113 // the right column before the complete mark moves into its final position.

114 grid := Rectangle {

115 // Move the four tiles as soon as the black lines begin to fade in.

116 x: root.stage > 0 ? 188px : (parent.width - self.width) / 2;

117 y: 192px;

118 width: 136px;

119 height: 136px;

120 background: transparent;

121

122 animate x {

123 duration: 460ms;

124 easing: cubic-bezier(0.2, 0, 0, 1);

125 }

126

127 Rectangle { x: 0; y: 0; width: 64px; height: 64px; background: #f25022; }

128 Rectangle { x: 72px; y: 0; width: 64px; height: 64px; background: #7fba00; }

129 Rectangle { x: 0; y: 72px; width: 64px; height: 64px; background: #00a4ef; }

130 Rectangle { x: 72px; y: 72px; width: 64px; height: 64px; background: #ffb900; }

131

132 carving := Rectangle {

133 width: parent.width;

134 height: parent.height;

135 visible: root.stage > 0;

136 background: transparent;

137 opacity: root.stage >= 16 ? 1

138 : root.stage >= 15 ? 0.9375

139 : root.stage >= 14 ? 0.875

140 : root.stage >= 13 ? 0.8125

141 : root.stage >= 12 ? 0.75

142 : root.stage >= 11 ? 0.6875

143 : root.stage >= 10 ? 0.625

144 : root.stage >= 9 ? 0.5625

145 : root.stage >= 8 ? 0.5

146 : root.stage >= 7 ? 0.4375

147 : root.stage >= 6 ? 0.375

148 : root.stage >= 5 ? 0.3125

149 : root.stage >= 4 ? 0.25

150 : root.stage >= 3 ? 0.1875

151 : root.stage >= 2 ? 0.125

152 : root.stage >= 1 ? 0.0625

153 : 0;

154

155 animate opacity {

156 duration: 150ms;

157 easing: linear;

158 }

159

160 // The black cross turns the four independent tiles into one mark.

161 Rectangle { x: 64px; y: 0; width: 8px; height: 136px; background: #050505; }

162 Rectangle { x: 0; y: 64px; width: 136px; height: 8px; background: #050505; }

163

164 // M: one deep top notch and two lower converging cuts.

165 // S: opposed right-angle cuts across the green and yellow tiles.

166 Path {

167 width: 136px;

168 height: 136px;

169 viewbox-width: 136;

170 viewbox-height: 136;

171

                commands: "M 26 0 L 39 0 L 32 48 Z M 22 72 L 32 121 L 32 136 L 22 136 Z M 42 72 L 42 136 L 32 136 L 32 121 Z M 102 24 L 109 24 L 109 48 L 136 48 L 136 57 L 102 57 Z M 72 80 L 108 80 L 108 128 L 101 128 L 101 89 L 72 89 Z";

172 fill: #050505;

173 }

174 }

175 }

176

177 // B enters first. The inner Text provides a small damped positional wobble.

178 b-entry := Rectangle {

179 x: root.stage >= 5 ? 112px : -96px;

180 y: 212px;

181 width: 60px;

182 height: 96px;

183 background: transparent;

184 opacity: root.stage >= 5 ? 1 : 0;

185

186 animate x {

187 duration: 260ms;

188 easing: cubic-bezier(0.05, 0.7, 0.1, 1);

189 }

190

191 animate opacity { duration: 80ms; }

192

193 GlowLetter {

194 x: root.stage == 6 ? 4px : root.stage == 7 ? -2px : 0;

195 y: root.stage == 6 ? -1px : root.stage == 7 ? 1px : 0;

196 width: parent.width;

197 height: parent.height;

198 glyph: "B";

199

200 animate x, y {

201 duration: 90ms;

202 easing: ease-in-out;

203 }

204 }

205 }

206

207 // S follows B from the same left edge and settles at the front of the word.

208 s-entry := Rectangle {

209 x: root.stage >= 7 ? 52px : -96px;

210 y: 212px;

211 width: 60px;

212 height: 96px;

213 background: transparent;

214 opacity: root.stage >= 7 ? 1 : 0;

215

216 animate x {

217 duration: 250ms;

218 easing: cubic-bezier(0.05, 0.7, 0.1, 1);

219 }

220

221 animate opacity { duration: 80ms; }

222

223 GlowLetter {

224 x: root.stage == 8 ? 4px : root.stage == 9 ? -2px : 0;

225 y: root.stage == 8 ? 1px : root.stage == 9 ? -1px : 0;

226 width: parent.width;

227 height: parent.height;

228 glyph: "S";

229

230 animate x, y {

231 duration: 90ms;

232 easing: ease-in-out;

233 }

234 }

235 }

236

237 IntroAction {

238 x: 16px;

239 y: 352px;

240 width: parent.width - 32px;

241 height: 56px;

242 label: "Never show me again this IDIOT logo and fuck off";

243 clicked => { root.disable-forever(); }

244 }

245

246 IntroAction {

247 x: 16px;

248 y: 420px;

249 width: parent.width - 32px;

250 height: 104px;

251 emphasized: true;

252 label: "What a masterpiece this developer design!!!\nI'm gonna give you a star on github IMMEDIATELY";

253 clicked => { root.open-project-home(); }

254 }

255}

256