Grcov report - ribbon.rs

1

//! Microsoft Office-style ribbon widget.

2

//!

3

//! Models the component hierarchy of the MS Ribbon (Office "Fluent" ribbon /

4

//! RibbonX `customUI` markup / Windows Ribbon Framework):

5

//!

6

//! ```text

7

//! Ribbon ─ app button ("FILE")            RibbonAppButton

8

//!        ─ tabs                           RibbonTab

9

//!            └─ groups                    RibbonGroup (label + dialog launcher)

10

//!                 └─ items                RibbonItem

11

//!                      ├─ LargeButton     RibbonButton (icon-over-label, full height)

12

//!                      ├─ SmallButton     RibbonButton (16px icon row)

13

//!                      ├─ Column / Row    RibbonColumn / RibbonRow (packing boxes)

14

//!                      ├─ Combo           embeds [`super::combobox::ComboBox`]

15

//!                      ├─ Drop            embeds [`super::drop_down::DropDown`]

16

//!                      ├─ Check           embeds [`super::check_box::CheckBox`]

17

//!                      ├─ Gallery         RibbonGallery (in-ribbon gallery + spinner)

18

//!                      ├─ Separator       thin vertical rule

19

//!                      └─ Custom          any user [`Dom`]

20

//! ```

21

//!

22

//! Mapping from RibbonX elements: `button[size=large]` → `LargeButton`,

23

//! `button`/`toggleButton` → `SmallButton` (+ `toggled`), `splitButton`/`menu`

24

//! → `RibbonArrow::Split`/`Menu`, `box`/`buttonGroup` → `Row`/`Column`,

25

//! `comboBox` → `Combo`, `dropDown` → `Drop`, `checkBox` → `Check`,

26

//! `gallery` → `Gallery`, `separator` → `Separator`,

27

//! `dialogBoxLauncher` → [`RibbonGroup::launcher`]. Contextual tabs, KeyTips,

28

//! the backstage view and automatic size collapsing are out of scope.

29

//!

30

//! Buttons are not re-implemented: every ribbon button (including the group

31

//! dialog launcher and the gallery spinner buttons) expands to the existing

32

//! [`super::button::Button`] widget with ribbon part styles injected through

33

//! `Button`'s public style fields. Embedded `Combo`/`Drop`/`Check` widgets

34

//! render exactly as configured — restyle them via their own public

35

//! `*_style` fields (see the ribbon example for an office-2013-style combobox).

36

//!

37

//! All visual parts of the ribbon itself are exposed on [`RibbonStyle`]

38

//! (defaults = the Office-2013-era look look, [`RibbonStyle::office_2013`]); replace any field

39

//! to re-theme without touching widget code.

40

41

use azul_core::{

42

    callbacks::{CoreCallback, CoreCallbackData, Update},

43

    dom::{

44

        Dom, DomNodeId, DomVec, EventFilter, HoverEventFilter, IdOrClass, IdOrClass::Class,

45

        IdOrClassVec,

46

},

47

    refany::RefAny,

48

};

49

#[allow(clippy::wildcard_imports)] // widget/render module pulls in the css property/value types it builds with

50

use azul_css::{

51

    dynamic_selector::{

52

        CssPropertyWithConditions as Cond, CssPropertyWithConditionsVec, DynamicSelector,

53

        MinMaxRange,

54

},

55

    props::{

56

        basic::{color::ColorU, font::{StyleFontFamily, StyleFontFamilyVec}, *},

57

        layout::*,

58

        property::CssProperty as P,

59

        style::*,

60

},

61

*,

62

};

63

64

use azul_css::{impl_option, impl_vec, impl_vec_clone, impl_vec_debug, impl_vec_mut};

65

use azul_css::system::{Handedness, SystemStyle};

66

67

use crate::callbacks::{Callback, CallbackInfo};

68

69

use super::{

70

    button::{Button, OptionButtonOnClick},

71

    check_box::CheckBox,

72

    combobox::ComboBox,

73

    drop_down::DropDown,

74

};

75

76

// -- Callbacks --

77

78

/// Callback signature invoked when a ribbon tab is clicked.

79

pub type RibbonOnTabClickCallbackType = extern "C" fn(RefAny, CallbackInfo, usize) -> Update;

80

impl_widget_callback!(

81

    RibbonOnTabClick, OptionRibbonOnTabClick,

82

    RibbonOnTabClickCallback, RibbonOnTabClickCallbackType

83

);

84

85

azul_core::impl_managed_callback! {

86

    wrapper:        RibbonOnTabClickCallback,

87

    info_ty:        CallbackInfo,

88

    return_ty:      Update,

89

    default_ret:    Update::DoNothing,

90

    invoker_static: RIBBON_ON_TAB_CLICK_INVOKER,

91

    invoker_ty:     AzRibbonOnTabClickCallbackInvoker,

92

    thunk_fn:       az_ribbon_on_tab_click_callback_thunk,

93

    setter_fn:      AzApp_setRibbonOnTabClickCallbackInvoker,

94

    from_handle_fn: AzRibbonOnTabClickCallback_createFromHostHandle,

95

    extra_args:     [ tab_index: usize ],

96

97

98

/// Callback signature invoked when a gallery cell is clicked (cell index).

99

pub type RibbonGalleryOnSelectCallbackType =

100

    extern "C" fn(RefAny, CallbackInfo, usize) -> Update;

101

impl_widget_callback!(

102

    RibbonGalleryOnSelect, OptionRibbonGalleryOnSelect,

103

    RibbonGalleryOnSelectCallback, RibbonGalleryOnSelectCallbackType

104

);

105

106

azul_core::impl_managed_callback! {

107

    wrapper:        RibbonGalleryOnSelectCallback,

108

    info_ty:        CallbackInfo,

109

    return_ty:      Update,

110

    default_ret:    Update::DoNothing,

111

    invoker_static: RIBBON_GALLERY_ON_SELECT_INVOKER,

112

    invoker_ty:     AzRibbonGalleryOnSelectCallbackInvoker,

113

    thunk_fn:       az_ribbon_gallery_on_select_callback_thunk,

114

    setter_fn:      AzApp_setRibbonGalleryOnSelectCallbackInvoker,

115

    from_handle_fn: AzRibbonGalleryOnSelectCallback_createFromHostHandle,

116

    extra_args:     [ cell_index: usize ],

117

118

119

// -- Font --

120

121

const SYSTEM_UI_STR: AzString = AzString::from_const_str("system:ui");

122

const SYSTEM_UI_FAMILIES: &[StyleFontFamily] = &[StyleFontFamily::System(SYSTEM_UI_STR)];

123

const SYSTEM_UI_FAMILY: StyleFontFamilyVec =

124

    StyleFontFamilyVec::from_const_slice(SYSTEM_UI_FAMILIES);

125

126

// -- the Office-2013-era look palette (seeds RibbonTheme::office_2013) --

127

128

const WHITE: ColorU = ColorU { r: 255, g: 255, b: 255, a: 255 };

129

const TRANSPARENT: ColorU = ColorU { r: 0, g: 0, b: 0, a: 0 };

130

/// Office 2013 accent blue (#2B579A): FILE tab, active tab text.

131

const W13_BLUE: ColorU = ColorU { r: 43, g: 87, b: 154, a: 255 };

132

/// FILE tab hover fill (darker blue).

133

const W13_BLUE_HOVER: ColorU = ColorU { r: 30, g: 62, b: 111, a: 255 };

134

/// Regular control text (#444444).

135

const W13_TEXT: ColorU = ColorU { r: 68, g: 68, b: 68, a: 255 };

136

/// Group caption + secondary glyph gray (#676767).

137

const W13_LABEL_GRAY: ColorU = ColorU { r: 103, g: 103, b: 103, a: 255 };

138

/// Monochrome icon gray.

139

const W13_ICON_GRAY: ColorU = ColorU { r: 80, g: 80, b: 80, a: 255 };

140

/// Chrome border gray (#D4D4D4): tab underline, ribbon bottom border.

141

const W13_BORDER: ColorU = ColorU { r: 212, g: 212, b: 212, a: 255 };

142

/// Group/segment separator gray (#E1E1E1).

143

const W13_SEP: ColorU = ColorU { r: 225, g: 225, b: 225, a: 255 };

144

/// Hover fill (#CDE6F7).

145

const W13_HOVER_BG: ColorU = ColorU { r: 205, g: 230, b: 247, a: 255 };

146

/// Hover/checked border (#92C0E0).

147

const W13_HOVER_BORDER: ColorU = ColorU { r: 146, g: 192, b: 224, a: 255 };

148

/// Pressed fill (#B0D0EC).

149

const W13_PRESSED_BG: ColorU = ColorU { r: 176, g: 208, b: 236, a: 255 };

150

/// Toggled-on fill (#C6DDF0).

151

const W13_CHECKED_BG: ColorU = ColorU { r: 198, g: 221, b: 240, a: 255 };

152

/// Selected gallery cell fill (#EAF3FC).

153

const W13_SELECTED_BG: ColorU = ColorU { r: 234, g: 243, b: 252, a: 255 };

154

/// Flat editable-field border gray (#ABABAB).

155

const W13_FIELD_BORDER: ColorU = ColorU { r: 171, g: 171, b: 171, a: 255 };

156

157

// -- Theme --

158

159

/// Color palette from which a full [`RibbonStyle`] is derived via

160

/// [`RibbonStyle::from_theme`]. All fields are plain colors, so themes are

161

/// trivially constructible over FFI. Presets: [`RibbonTheme::office_2013`]

162

/// (the default) and [`RibbonTheme::from_system`], which extracts the

163

/// colors from the OS theme (accent color, selection color, separators).

164

#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]

165

#[repr(C)]

166

pub struct RibbonTheme {

167

    /// Chrome background: tab bar and ribbon content.

168

    pub chrome_bg: ColorU,

169

    /// Accent: application button fill, active tab text.

170

    pub accent: ColorU,

171

    /// Application button hover fill.

172

    pub accent_hover: ColorU,

173

    /// Text on accent fills (application button label).

174

    pub accent_text: ColorU,

175

    /// Regular control text.

176

    pub text: ColorU,

177

    /// Group captions and secondary glyphs.

178

    pub label: ColorU,

179

    /// Monochrome icon glyphs.

180

    pub icon: ColorU,

181

    /// Chrome borders: tab underline, ribbon bottom border, gallery frame.

182

    pub border: ColorU,

183

    /// Group and segment separators.

184

    pub separator: ColorU,

185

    /// Hover fill on ribbon controls.

186

    pub hover_bg: ColorU,

187

    /// Hover and toggled-on border.

188

    pub hover_border: ColorU,

189

    /// Pressed fill.

190

    pub pressed_bg: ColorU,

191

    /// Toggled-on fill.

192

    pub checked_bg: ColorU,

193

    /// Selected gallery cell fill.

194

    pub selected_bg: ColorU,

195

    /// Editable field border (embedded comboboxes).

196

    pub field_border: ColorU,

197

198

199

impl RibbonTheme {

200

    /// The the Office-2013-era look palette: white chrome, #2B579A accents, #CDE6F7 hovers.

201

    #[must_use]

202

1240

    pub const fn office_2013() -> Self {

203

1240

        Self {

204

1240

            chrome_bg: WHITE,

205

1240

            accent: W13_BLUE,

206

1240

            accent_hover: W13_BLUE_HOVER,

207

1240

            accent_text: WHITE,

208

1240

            text: W13_TEXT,

209

1240

            label: W13_LABEL_GRAY,

210

1240

            icon: W13_ICON_GRAY,

211

1240

            border: W13_BORDER,

212

1240

            separator: W13_SEP,

213

1240

            hover_bg: W13_HOVER_BG,

214

1240

            hover_border: W13_HOVER_BORDER,

215

1240

            pressed_bg: W13_PRESSED_BG,

216

1240

            checked_bg: W13_CHECKED_BG,

217

1240

            selected_bg: W13_SELECTED_BG,

218

1240

            field_border: W13_FIELD_BORDER,

219

1240

220

1240

221

222

    /// Extracts a ribbon palette from the OS theme (accent color, selection

223

    /// colors, separators). Colors the platform does not report fall back to

224

    /// the the Office-2013-era look palette. Pass `SystemStyle::detect()` for the live

225

    /// system theme, or a preset `SystemStyle` for platform mockups.

226

    /// Takes the style by value (FFI constructor convention).

227

    #[must_use]

228

5

    pub fn from_system(style: SystemStyle) -> Self {

229

5

        let d = Self::office_2013();

230

5

        let c = &style.colors;

231

        // Each ribbon field maps to ONE system color; a color the platform

232

        // does not report falls back to that field's own the Office-2013-era look value

233

        // (never to another derived value). No color arithmetic on purpose:

234

        // FFI-observable behavior stays trivial to reason about.

235

5

        let accent = c.accent.into_option();

236

5

        let selection = c.selection_background.into_option();

237

5

        let separator = c.separator.into_option();

238

5

        let inactive_selection = c.selection_background_inactive.into_option();

239

5

        let secondary_text = c.secondary_text.into_option();

240

5

        Self {

241

5

            chrome_bg: c.window_background.into_option().unwrap_or(d.chrome_bg),

242

5

            accent: accent.unwrap_or(d.accent),

243

5

            accent_hover: selection.unwrap_or(d.accent_hover),

244

5

            accent_text: c.accent_text.into_option().unwrap_or(d.accent_text),

245

5

            text: c.text.into_option().unwrap_or(d.text),

246

5

            label: secondary_text.unwrap_or(d.label),

247

5

            icon: secondary_text.unwrap_or(d.icon),

248

5

            border: separator.unwrap_or(d.border),

249

5

            separator: separator.unwrap_or(d.separator),

250

5

            hover_bg: inactive_selection.unwrap_or(d.hover_bg),

251

5

            hover_border: accent.unwrap_or(d.hover_border),

252

5

            pressed_bg: selection.unwrap_or(d.pressed_bg),

253

5

            checked_bg: selection.unwrap_or(d.checked_bg),

254

5

            selected_bg: inactive_selection.unwrap_or(d.selected_bg),

255

5

            field_border: separator.unwrap_or(d.field_border),

256

5

257

5

258

259

260

impl Default for RibbonTheme {

261

    fn default() -> Self {

262

        Self::office_2013()

263

264

265

266

// -- Colorless const part styles (shared by every theme) --

267

268

static GROUP_ITEMS_STYLE: &[Cond] = &[

269

    Cond::simple(P::const_box_sizing(LayoutBoxSizing::BorderBox)),

270

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

271

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

272

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

273

    Cond::simple(P::const_height(LayoutHeight::const_px(68))),

274

    Cond::simple(P::const_align_items(LayoutAlignItems::Start)),

275

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

276

];

277

278

static GROUP_FOOTER_STYLE: &[Cond] = &[

279

    Cond::simple(P::const_box_sizing(LayoutBoxSizing::BorderBox)),

280

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

281

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

282

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

283

    Cond::simple(P::const_height(LayoutHeight::const_px(18))),

284

    Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

285

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

286

];

287

288

static FOOTER_SPACER_STYLE: &[Cond] = &[

289

    Cond::simple(P::const_width(LayoutWidth::const_px(18))),

290

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

291

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

292

];

293

294

static COLUMN_STYLE: &[Cond] = &[

295

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

296

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

297

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

298

    Cond::simple(P::const_align_items(LayoutAlignItems::Start)),

299

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

300

];

301

302

static ROW_STYLE: &[Cond] = &[

303

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

304

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

305

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

306

    Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

307

    Cond::simple(P::const_margin_bottom(LayoutMarginBottom::const_px(5))),

308

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

309

];

310

311

static GALLERY_STRIP_STYLE: &[Cond] = &[

312

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

313

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

314

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

315

    Cond::simple(P::const_overflow_x(LayoutOverflow::Hidden)),

316

    Cond::simple(P::const_overflow_y(LayoutOverflow::Hidden)),

317

];

318

319

static RIBBON_COMBO_TEXT_STYLE: &[Cond] = &[

320

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

321

    Cond::simple(P::const_text_align(StyleTextAlign::Left)),

322

    Cond::simple(P::const_padding_right(LayoutPaddingRight::const_px(2))),

323

];

324

325

// -- Responsive (@media) conditions --

326

//

327

// The mobile ribbon keeps the SEMANTICS of the desktop one - the same tabs,

328

// groups and items - and changes only presentation, so both chromes are

329

// emitted once and the viewport decides which is visible. That is how a

330

// responsive HTML page behaves, and it means no second widget tree, no

331

// duplicated callbacks and no state to keep in sync.

332

//

333

// `MOBILE_MAX_PX` is the breakpoint: at or below it the touch chrome shows.

334

335

/// Widest viewport that still gets the touch layout (a large phone in

336

/// landscape is still a phone).

337

pub const MOBILE_MAX_PX: f32 = 720.0;

338

339

static COND_MOBILE: &[DynamicSelector] = &[DynamicSelector::ViewportWidth(MinMaxRange {

340

    min: f32::NAN,

341

    max: MOBILE_MAX_PX,

342

})];

343

344

static COND_DESKTOP: &[DynamicSelector] = &[DynamicSelector::ViewportWidth(MinMaxRange {

345

    min: MOBILE_MAX_PX,

346

    max: f32::NAN,

347

})];

348

349

/// `display: none` unless the viewport is a phone.

350

3708

fn only_on_mobile(prop: P) -> Cond {

351

3708

    Cond::with_single_condition(prop, COND_MOBILE)

352

3708

353

354

/// `display: none` unless the viewport is a desktop.

355

fn only_on_desktop(prop: P) -> Cond {

356

    Cond::with_single_condition(prop, COND_DESKTOP)

357

358

359

/// Hidden by default, shown on phones.

360

2472

fn mobile_only_visibility(display: LayoutDisplay) -> [Cond; 2] {

361

2472

362

2472

        Cond::simple(P::const_display(LayoutDisplay::None)),

363

2472

        only_on_mobile(P::const_display(display)),

364

2472

365

2472

366

367

/// Visible by default, hidden on phones.

368

fn desktop_only_visibility(display: LayoutDisplay) -> [Cond; 2] {

369

370

        Cond::simple(P::const_display(display)),

371

        only_on_mobile(P::const_display(LayoutDisplay::None)),

372

373

374

375

// -- Theme -> property-list builders --

376

//

377

// Every themed ribbon part is built from `RibbonTheme` colors by the

378

// functions below; `RibbonStyle::office_2013()` is just

379

// `from_theme(&RibbonTheme::office_2013())`, so there is exactly one source

380

// of truth for each part's property list.

381

382

35846

fn bg_vec(c: ColorU) -> StyleBackgroundContentVec {

383

35846

    StyleBackgroundContentVec::from_vec(vec![StyleBackgroundContent::Color(c)])

384

35846

385

386

23486

fn cond_bg(c: ColorU) -> Cond {

387

23486

    Cond::simple(P::const_background_content(bg_vec(c)))

388

23486

389

390

9888

fn cond_bg_hover(c: ColorU) -> Cond {

391

9888

    Cond::on_hover(P::const_background_content(bg_vec(c)))

392

9888

393

394

2472

fn cond_bg_active(c: ColorU) -> Cond {

395

2472

    Cond::on_active(P::const_background_content(bg_vec(c)))

396

2472

397

398

21016

const fn cond_text_color(c: ColorU) -> Cond {

399

21016

    Cond::simple(P::const_text_color(StyleTextColor { inner: c }))

400

21016

401

402

/// the classic office-suite control metrics (22px small button, 66px large button, 26px tab)

403

/// are BORDER-BOX numbers: they include the padding and the 1px hover

404

/// border. CSS defaults to content-box, which inflated every control by its

405

/// padding+border - three 22px rows became 78px and overflowed the 68px item

406

/// area, painting over the group caption.

407

19779

const fn cond_border_box() -> Cond {

408

19779

    Cond::simple(P::const_box_sizing(LayoutBoxSizing::BorderBox))

409

19779

410

411

13598

fn push_padding(v: &mut Vec<Cond>, top: isize, right: isize, bottom: isize, left: isize) {

412

13598

    v.push(Cond::simple(P::const_padding_top(LayoutPaddingTop::const_px(top))));

413

13598

    v.push(Cond::simple(P::const_padding_right(LayoutPaddingRight::const_px(right))));

414

13598

    v.push(Cond::simple(P::const_padding_bottom(LayoutPaddingBottom::const_px(bottom))));

415

13598

    v.push(Cond::simple(P::const_padding_left(LayoutPaddingLeft::const_px(left))));

416

13598

417

418

/// 1px solid border on all four sides in the given color.

419

9890

fn push_box_border(v: &mut Vec<Cond>, c: ColorU) {

420

9890

    v.push(Cond::simple(P::const_border_top_width(LayoutBorderTopWidth::const_px(1))));

421

9890

    v.push(Cond::simple(P::const_border_left_width(LayoutBorderLeftWidth::const_px(1))));

422

9890

    v.push(Cond::simple(P::const_border_right_width(LayoutBorderRightWidth::const_px(1))));

423

9890

    v.push(Cond::simple(P::const_border_bottom_width(LayoutBorderBottomWidth::const_px(1))));

424

9890

    v.push(Cond::simple(P::const_border_top_style(StyleBorderTopStyle { inner: BorderStyle::Solid })));

425

9890

    v.push(Cond::simple(P::const_border_left_style(StyleBorderLeftStyle { inner: BorderStyle::Solid })));

426

9890

    v.push(Cond::simple(P::const_border_right_style(StyleBorderRightStyle { inner: BorderStyle::Solid })));

427

9890

    v.push(Cond::simple(P::const_border_bottom_style(StyleBorderBottomStyle { inner: BorderStyle::Solid })));

428

9890

    push_border_colors(v, c);

429

9890

430

431

12362

fn push_border_colors(v: &mut Vec<Cond>, c: ColorU) {

432

12362

    v.push(Cond::simple(P::const_border_top_color(StyleBorderTopColor { inner: c })));

433

12362

    v.push(Cond::simple(P::const_border_left_color(StyleBorderLeftColor { inner: c })));

434

12362

    v.push(Cond::simple(P::const_border_right_color(StyleBorderRightColor { inner: c })));

435

12362

    v.push(Cond::simple(P::const_border_bottom_color(StyleBorderBottomColor { inner: c })));

436

12362

437

438

4944

fn push_hover_border_colors(v: &mut Vec<Cond>, c: ColorU) {

439

4944

    v.push(Cond::on_hover(P::const_border_top_color(StyleBorderTopColor { inner: c })));

440

4944

    v.push(Cond::on_hover(P::const_border_left_color(StyleBorderLeftColor { inner: c })));

441

4944

    v.push(Cond::on_hover(P::const_border_right_color(StyleBorderRightColor { inner: c })));

442

4944

    v.push(Cond::on_hover(P::const_border_bottom_color(StyleBorderBottomColor { inner: c })));

443

4944

444

445

/// Bottom border only (tab underline / ribbon bottom edge).

446

7416

fn push_bottom_border(v: &mut Vec<Cond>, c: ColorU) {

447

7416

    v.push(Cond::simple(P::const_border_bottom_width(LayoutBorderBottomWidth::const_px(1))));

448

7416

    v.push(Cond::simple(P::const_border_bottom_style(StyleBorderBottomStyle { inner: BorderStyle::Solid })));

449

7416

    v.push(Cond::simple(P::const_border_bottom_color(StyleBorderBottomColor { inner: c })));

450

7416

451

452

/// Transparent-bordered, hover-highlighted button chassis shared by large

453

/// and small ribbon buttons.

454

2472

fn push_button_chassis(v: &mut Vec<Cond>, t: &RibbonTheme) {

455

2472

    v.push(cond_border_box());

456

2472

    v.push(Cond::simple(P::const_cursor(StyleCursor::Default)));

457

2472

    v.push(cond_bg(TRANSPARENT));

458

2472

    push_box_border(v, TRANSPARENT);

459

2472

    v.push(cond_bg_hover(t.hover_bg));

460

2472

    push_hover_border_colors(v, t.hover_border);

461

2472

    v.push(cond_bg_active(t.pressed_bg));

462

2472

463

464

1236

fn theme_container(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

465

1236

    let mut v = vec![

466

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

467

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

468

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

469

1236

        Cond::simple(P::const_font_family(SYSTEM_UI_FAMILY)),

470

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(12))),

471

1236

        cond_bg(t.chrome_bg),

472

];

473

1236

    push_bottom_border(&mut v, t.border);

474

1236

    CssPropertyWithConditionsVec::from_vec(v)

475

1236

476

477

1236

fn theme_tab_bar(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

478

1236

    CssPropertyWithConditionsVec::from_vec(vec![

479

1236

        cond_border_box(),

480

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

481

        // Replaced by the full-width mobile tab button on phones. The

482

        // conditional MUST come after the unconditional value: inline

483

        // properties resolve last-match-wins.

484

1236

        only_on_mobile(P::const_display(LayoutDisplay::None)),

485

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

486

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

487

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(26))),

488

1236

        cond_bg(t.chrome_bg),

489

])

490

1236

491

492

1236

fn theme_app_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

493

1236

    let mut v: Vec<Cond> = vec![

494

1236

        cond_border_box(),

495

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

496

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

497

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

498

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

499

];

500

1236

    v.push(Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })));

501

1236

    push_padding(&mut v, 7, 17, 7, 17);

502

1236

    v.push(cond_bg(t.accent));

503

1236

    v.push(cond_text_color(t.accent_text));

504

1236

    v.push(Cond::simple(P::const_font_size(StyleFontSize::const_px(12))));

505

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Pointer)));

506

1236

    v.push(Cond::simple(P::user_select(StyleUserSelect::None)));

507

1236

    v.push(cond_bg_hover(t.accent_hover));

508

1236

    CssPropertyWithConditionsVec::from_vec(v)

509

1236

510

511

1236

fn theme_tab(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

512

1236

    let mut v: Vec<Cond> = vec![

513

1236

        cond_border_box(),

514

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

515

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

516

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

517

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

518

];

519

1236

    v.push(Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })));

520

1236

    push_padding(&mut v, 7, 13, 6, 13);

521

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Pointer)));

522

1236

    v.push(Cond::simple(P::user_select(StyleUserSelect::None)));

523

1236

    v.push(cond_text_color(t.text));

524

1236

    v.push(cond_bg(t.chrome_bg));

525

1236

    push_bottom_border(&mut v, t.border);

526

1236

    v.push(Cond::on_hover(P::const_text_color(StyleTextColor { inner: t.accent })));

527

1236

    CssPropertyWithConditionsVec::from_vec(v)

528

1236

529

530

1236

fn theme_tab_active(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

531

1236

    let mut v: Vec<Cond> = vec![

532

1236

        cond_border_box(),

533

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

534

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

535

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

536

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

537

];

538

1236

    v.push(Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })));

539

1236

    push_padding(&mut v, 6, 12, 6, 12);

540

1236

    v.push(Cond::simple(P::user_select(StyleUserSelect::None)));

541

1236

    v.push(cond_text_color(t.accent));

542

1236

    v.push(cond_bg(t.chrome_bg));

543

1236

    push_box_border(&mut v, t.border);

544

    // Erase the underline below the active tab: the bottom border matches

545

    // the chrome so the tab visually merges with the ribbon content.

546

1236

    v.push(Cond::simple(P::const_border_bottom_color(StyleBorderBottomColor {

547

1236

        inner: t.chrome_bg,

548

1236

    })));

549

1236

    CssPropertyWithConditionsVec::from_vec(v)

550

1236

551

552

1236

fn theme_tab_filler(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

553

1236

    let mut v = vec![Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1)))];

554

1236

    push_bottom_border(&mut v, t.border);

555

1236

    CssPropertyWithConditionsVec::from_vec(v)

556

1236

557

558

1236

fn theme_content(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

559

1236

    CssPropertyWithConditionsVec::from_vec(vec![

560

1236

        cond_border_box(),

561

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

562

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

563

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

564

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

565

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(92))),

566

1236

        cond_bg(t.chrome_bg),

567

])

568

1236

569

570

1236

fn theme_group(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

571

1236

    CssPropertyWithConditionsVec::from_vec(vec![

572

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

573

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

574

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

575

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

576

1236

        Cond::simple(P::const_padding_top(LayoutPaddingTop::const_px(3))),

577

1236

        Cond::simple(P::const_padding_left(LayoutPaddingLeft::const_px(2))),

578

1236

        Cond::simple(P::const_padding_right(LayoutPaddingRight::const_px(2))),

579

1236

        Cond::simple(P::const_border_right_width(LayoutBorderRightWidth::const_px(1))),

580

1236

        Cond::simple(P::const_border_right_style(StyleBorderRightStyle { inner: BorderStyle::Solid })),

581

1236

        Cond::simple(P::const_border_right_color(StyleBorderRightColor { inner: t.separator })),

582

])

583

1236

584

585

1236

fn theme_group_label(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

586

1236

    CssPropertyWithConditionsVec::from_vec(vec![

587

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

588

1236

        Cond::simple(P::const_text_align(StyleTextAlign::Center)),

589

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(11))),

590

1236

        cond_text_color(t.label),

591

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

592

])

593

1236

594

595

1236

fn theme_launcher_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

596

1236

    let mut v = vec![

597

1236

        cond_border_box(),

598

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

599

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

600

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

601

1236

        Cond::simple(P::const_justify_content(LayoutJustifyContent::Center)),

602

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

603

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

604

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(16))),

605

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(14))),

606

];

607

1236

    push_padding(&mut v, 0, 0, 0, 0);

608

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Default)));

609

1236

    v.push(cond_bg(TRANSPARENT));

610

1236

    push_box_border(&mut v, TRANSPARENT);

611

1236

    v.push(cond_bg_hover(t.hover_bg));

612

1236

    push_hover_border_colors(&mut v, t.hover_border);

613

1236

    CssPropertyWithConditionsVec::from_vec(v)

614

1236

615

616

1236

fn theme_launcher_icon(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

617

1236

    CssPropertyWithConditionsVec::from_vec(vec![

618

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(11))),

619

1236

        cond_text_color(t.label),

620

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

621

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

622

])

623

1236

624

625

1236

fn theme_separator(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

626

1236

    CssPropertyWithConditionsVec::from_vec(vec![

627

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(1))),

628

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(22))),

629

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

630

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

631

1236

        Cond::simple(P::const_margin_left(LayoutMarginLeft::const_px(3))),

632

1236

        Cond::simple(P::const_margin_right(LayoutMarginRight::const_px(3))),

633

1236

        cond_bg(t.separator),

634

])

635

1236

636

637

1236

fn theme_large_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

638

1236

    let mut v = vec![

639

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

640

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

641

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

642

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

643

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

644

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(66))),

645

1236

        Cond::simple(P::const_min_width(LayoutMinWidth::const_px(44))),

646

];

647

1236

    push_padding(&mut v, 3, 7, 3, 7);

648

1236

    v.push(Cond::simple(P::const_margin_right(LayoutMarginRight::const_px(1))));

649

1236

    push_button_chassis(&mut v, t);

650

1236

    CssPropertyWithConditionsVec::from_vec(v)

651

1236

652

653

1236

fn theme_large_icon(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

654

1236

    CssPropertyWithConditionsVec::from_vec(vec![

655

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(32))),

656

1236

        cond_text_color(t.icon),

657

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

658

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

659

])

660

1236

661

662

1236

fn theme_large_label(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

663

1236

    CssPropertyWithConditionsVec::from_vec(vec![

664

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(12))),

665

1236

        cond_text_color(t.text),

666

1236

        Cond::simple(P::const_text_align(StyleTextAlign::Center)),

667

1236

        Cond::simple(P::const_margin_top(LayoutMarginTop::const_px(3))),

668

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

669

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

670

])

671

1236

672

673

1236

fn theme_small_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

674

1236

    let mut v = vec![

675

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

676

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

677

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

678

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

679

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

680

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(22))),

681

];

682

1236

    push_padding(&mut v, 1, 3, 1, 3);

683

1236

    push_button_chassis(&mut v, t);

684

1236

    CssPropertyWithConditionsVec::from_vec(v)

685

1236

686

687

1236

fn theme_small_icon(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

688

1236

    CssPropertyWithConditionsVec::from_vec(vec![

689

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(16))),

690

1236

        cond_text_color(t.icon),

691

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

692

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

693

])

694

1236

695

696

1236

fn theme_small_label(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

697

1236

    CssPropertyWithConditionsVec::from_vec(vec![

698

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(12))),

699

1236

        cond_text_color(t.text),

700

1236

        Cond::simple(P::const_margin_left(LayoutMarginLeft::const_px(5))),

701

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

702

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

703

])

704

1236

705

706

1236

fn theme_arrow_icon(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

707

1236

    CssPropertyWithConditionsVec::from_vec(vec![

708

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(14))),

709

1236

        cond_text_color(t.label),

710

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

711

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

712

])

713

1236

714

715

/// Appended to a button's container style when [`RibbonButton::toggled`] is

716

/// set. Inline properties resolve last-wins, so these override the base.

717

1236

fn theme_checked(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

718

1236

    let mut v = vec![cond_bg(t.checked_bg)];

719

1236

    push_border_colors(&mut v, t.hover_border);

720

1236

    CssPropertyWithConditionsVec::from_vec(v)

721

1236

722

723

1236

fn theme_gallery_frame(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

724

1236

    let mut v = vec![

725

1236

        cond_border_box(),

726

1236

        Cond::simple(P::const_min_width(LayoutMinWidth::const_px(137))),

727

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

728

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

729

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

730

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(68))),

731

        // The frame IS the gallery viewport (like classic office suites): overflow hidden

732

        // both clips partially-visible cells and zeroes the frame's

733

        // automatic minimum size so it yields space to rigid groups.

734

        // (taffy 0.10 only collapses the minimum for DIRECT scroll

735

        // containers — see layout/tests/flex_intrinsic_text.rs.)

736

1236

        Cond::simple(P::const_overflow_x(LayoutOverflow::Hidden)),

737

1236

        Cond::simple(P::const_overflow_y(LayoutOverflow::Hidden)),

738

1236

        cond_bg(t.chrome_bg),

739

];

740

1236

    push_box_border(&mut v, t.border);

741

1236

    CssPropertyWithConditionsVec::from_vec(v)

742

1236

743

744

1236

fn theme_gallery_cell(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

745

1236

    let mut v = vec![

746

1236

        cond_border_box(),

747

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

748

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

749

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

750

1236

        Cond::simple(P::const_justify_content(LayoutJustifyContent::Center)),

751

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

752

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

753

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(120))),

754

];

755

1236

    push_padding(&mut v, 2, 6, 2, 6);

756

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Default)));

757

1236

    v.push(Cond::simple(P::user_select(StyleUserSelect::None)));

758

1236

    push_box_border(&mut v, TRANSPARENT);

759

    // Cells are divided by a thin rule on their right edge.

760

1236

    v.push(Cond::simple(P::const_border_right_color(StyleBorderRightColor {

761

1236

        inner: t.separator,

762

1236

    })));

763

1236

    v.push(cond_bg_hover(t.hover_bg));

764

1236

    push_hover_border_colors(&mut v, t.hover_border);

765

1236

    CssPropertyWithConditionsVec::from_vec(v)

766

1236

767

768

/// Appended to [`RibbonStyle::gallery_cell_style`] for the selected cell.

769

1236

fn theme_gallery_cell_selected(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

770

1236

    let mut v = vec![cond_bg(t.selected_bg)];

771

1236

    push_border_colors(&mut v, t.hover_border);

772

1236

    CssPropertyWithConditionsVec::from_vec(v)

773

1236

774

775

1236

fn theme_gallery_cell_label(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

776

1236

    CssPropertyWithConditionsVec::from_vec(vec![

777

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(11))),

778

1236

        cond_text_color(t.text),

779

1236

        Cond::simple(P::const_margin_top(LayoutMarginTop::const_px(2))),

780

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

781

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

782

])

783

1236

784

785

1236

fn theme_gallery_spinner(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

786

1236

    CssPropertyWithConditionsVec::from_vec(vec![

787

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

788

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

789

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

790

1236

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

791

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(15))),

792

1236

        Cond::simple(P::const_border_left_width(LayoutBorderLeftWidth::const_px(1))),

793

1236

        Cond::simple(P::const_border_left_style(StyleBorderLeftStyle { inner: BorderStyle::Solid })),

794

1236

        Cond::simple(P::const_border_left_color(StyleBorderLeftColor { inner: t.separator })),

795

])

796

1236

797

798

/// The gallery wrapper is the positioning context for the expansion panel;

799

/// it is otherwise transparent and behaves exactly like the bare frame.

800

static GALLERY_WRAPPER_STYLE: &[Cond] = &[

801

    Cond::simple(P::const_display(LayoutDisplay::Flex)),

802

    Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

803

    Cond::simple(P::const_position(LayoutPosition::Relative)),

804

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

805

    Cond::simple(P::const_min_width(LayoutMinWidth::const_px(137))),

806

];

807

808

/// The "More" expansion panel: an absolutely-positioned wrapped grid of every

809

/// gallery cell, hidden until the More button toggles its `display`.

810

1236

fn theme_gallery_panel(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

811

1236

    let mut v = vec![

812

1236

        Cond::simple(P::const_display(LayoutDisplay::None)),

813

1236

        Cond::simple(P::const_position(LayoutPosition::Absolute)),

814

1236

        Cond::simple(P::const_top(LayoutTop::const_px(68))),

815

1236

        Cond::simple(P::const_left(LayoutLeft::const_px(0))),

816

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(612))),

817

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

818

1236

        Cond::simple(P::const_flex_wrap(LayoutFlexWrap::Wrap)),

819

1236

        cond_bg(t.chrome_bg),

820

];

821

1236

    push_box_border(&mut v, t.border);

822

1236

    CssPropertyWithConditionsVec::from_vec(v)

823

1236

824

825

1236

fn theme_gallery_spinner_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

826

1236

    let mut v = vec![

827

1236

        cond_border_box(),

828

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

829

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

830

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

831

1236

        Cond::simple(P::const_justify_content(LayoutJustifyContent::Center)),

832

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

833

1236

        Cond::simple(P::const_width(LayoutWidth::const_px(14))),

834

];

835

1236

    push_padding(&mut v, 0, 0, 0, 0);

836

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Default)));

837

1236

    v.push(cond_bg(TRANSPARENT));

838

1236

    v.push(Cond::simple(P::const_border_top_width(LayoutBorderTopWidth::const_px(0))));

839

1236

    v.push(Cond::simple(P::const_border_left_width(LayoutBorderLeftWidth::const_px(0))));

840

1236

    v.push(Cond::simple(P::const_border_right_width(LayoutBorderRightWidth::const_px(0))));

841

1236

    v.push(Cond::simple(P::const_border_bottom_width(LayoutBorderBottomWidth::const_px(0))));

842

1236

    v.push(cond_bg_hover(t.hover_bg));

843

1236

    CssPropertyWithConditionsVec::from_vec(v)

844

1236

845

846

1236

fn theme_gallery_spinner_icon(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

847

1236

    CssPropertyWithConditionsVec::from_vec(vec![

848

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(12))),

849

1236

        cond_text_color(t.label),

850

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

851

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

852

])

853

1236

854

855

/// Office-2013-look combobox parts, injected by [`RibbonStyle::styled_combo_box`].

856

2

fn theme_combo_wrapper_base(_t: &RibbonTheme) -> Vec<Cond> {

857

2

    vec![

858

2

        Cond::simple(P::const_display(LayoutDisplay::InlineBlock)),

859

2

        Cond::simple(P::const_position(LayoutPosition::Relative)),

860

2

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

861

2

        Cond::simple(P::const_flex_shrink(LayoutFlexShrink { inner: FloatValue::const_new(0) })),

862

2

        Cond::simple(P::const_margin_right(LayoutMarginRight::const_px(2))),

863

2

        Cond::simple(P::const_font_size(StyleFontSize::const_px(12))),

864

2

        Cond::simple(P::const_font_family(SYSTEM_UI_FAMILY)),

865

866

2

867

868

2

fn theme_combo_field(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

869

2

    let mut v = vec![

870

2

        cond_border_box(),

871

2

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

872

2

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

873

2

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

874

2

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

875

2

        Cond::simple(P::const_height(LayoutHeight::const_px(22))),

876

];

877

2

    push_padding(&mut v, 0, 2, 0, 5);

878

2

    v.push(Cond::simple(P::const_cursor(StyleCursor::Text)));

879

2

    v.push(cond_bg(t.chrome_bg));

880

2

    v.push(cond_text_color(t.text));

881

2

    push_box_border(&mut v, t.field_border);

882

2

    v.push(Cond::on_focus(P::const_border_top_color(StyleBorderTopColor { inner: t.accent })));

883

2

    v.push(Cond::on_focus(P::const_border_left_color(StyleBorderLeftColor { inner: t.accent })));

884

2

    v.push(Cond::on_focus(P::const_border_right_color(StyleBorderRightColor { inner: t.accent })));

885

2

    v.push(Cond::on_focus(P::const_border_bottom_color(StyleBorderBottomColor { inner: t.accent })));

886

2

    CssPropertyWithConditionsVec::from_vec(v)

887

2

888

889

2

fn theme_combo_arrow(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

890

2

    CssPropertyWithConditionsVec::from_vec(vec![

891

2

        Cond::simple(P::const_font_size(StyleFontSize::const_px(14))),

892

2

        cond_text_color(t.label),

893

2

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

894

2

        Cond::simple(P::user_select(StyleUserSelect::None)),

895

])

896

2

897

898

// -- Mobile part styles --

899

//

900

// Touch targets follow the platform minimum (44px). The desktop tab strip

901

// and the mobile tab button are mutually exclusive via the viewport

902

// condition, so exactly one is ever visible.

903

904

/// The full-width tab button that replaces the tab strip on phones. Shows the

905

/// ACTIVE tab's label plus a chevron that opens the tab overlay; double

906

/// tapping it collapses the ribbon exactly like double clicking a desktop tab.

907

1236

fn theme_mobile_tab_button(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

908

1236

    let mut v: Vec<Cond> = mobile_only_visibility(LayoutDisplay::Flex).to_vec();

909

1236

    v.push(cond_border_box());

910

1236

    v.push(Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)));

911

1236

    v.push(Cond::simple(P::const_align_items(LayoutAlignItems::Center)));

912

1236

    v.push(Cond::simple(P::const_height(LayoutHeight::const_px(48))));

913

1236

    v.push(Cond::simple(P::const_width(LayoutWidth::Px(PixelValue::const_percent(100)))));

914

1236

    push_padding(&mut v, 0, 12, 0, 16);

915

1236

    v.push(Cond::simple(P::const_font_size(StyleFontSize::const_px(17))));

916

1236

    v.push(cond_text_color(t.accent));

917

1236

    v.push(cond_bg(t.chrome_bg));

918

1236

    push_bottom_border(&mut v, t.border);

919

1236

    v.push(Cond::simple(P::const_cursor(StyleCursor::Pointer)));

920

1236

    v.push(Cond::simple(P::user_select(StyleUserSelect::None)));

921

1236

    CssPropertyWithConditionsVec::from_vec(v)

922

1236

923

924

/// The active tab's label inside the mobile tab button.

925

1236

fn theme_mobile_tab_label(_t: &RibbonTheme) -> CssPropertyWithConditionsVec {

926

1236

    CssPropertyWithConditionsVec::from_vec(vec![

927

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

928

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

929

])

930

1236

931

932

/// Chevron on the mobile tab button.

933

1236

fn theme_mobile_tab_arrow(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

934

1236

    CssPropertyWithConditionsVec::from_vec(vec![

935

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(24))),

936

1236

        cond_text_color(t.accent),

937

1236

        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))),

938

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

939

])

940

1236

941

942

/// Full-screen overlay listing every tab; opened by the mobile tab button.

943

1236

fn theme_mobile_tab_overlay(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

944

1236

    let mut v = vec![

945

        // Hidden until the button opens it (on ANY viewport: the overlay is

946

        // only reachable through the mobile button).

947

1236

        Cond::simple(P::const_display(LayoutDisplay::None)),

948

1236

        cond_border_box(),

949

1236

        Cond::simple(P::const_position(LayoutPosition::Absolute)),

950

1236

        Cond::simple(P::const_top(LayoutTop::const_px(0))),

951

1236

        Cond::simple(P::const_left(LayoutLeft::const_px(0))),

952

1236

        Cond::simple(P::const_width(LayoutWidth::Px(PixelValue::const_percent(100)))),

953

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)),

954

1236

        cond_bg(t.chrome_bg),

955

];

956

1236

    push_box_border(&mut v, t.border);

957

1236

    CssPropertyWithConditionsVec::from_vec(v)

958

1236

959

960

/// One row of the mobile tab overlay - a full-width 48px touch target.

961

1236

fn theme_mobile_tab_overlay_item(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

962

1236

    let mut v = vec![

963

1236

        cond_border_box(),

964

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

965

1236

        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

966

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

967

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(48))),

968

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(17))),

969

1236

        cond_text_color(t.text),

970

1236

        Cond::simple(P::const_cursor(StyleCursor::Pointer)),

971

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

972

];

973

1236

    push_padding(&mut v, 0, 16, 0, 16);

974

1236

    push_bottom_border(&mut v, t.separator);

975

1236

    v.push(cond_bg_hover(t.hover_bg));

976

1236

    CssPropertyWithConditionsVec::from_vec(v)

977

1236

978

979

/// The scrollable list of GROUP names shown beside the visible group on

980

/// phones. Sits on the user's dominant-hand side (see [`Handedness`]).

981

1236

fn theme_mobile_group_list(t: &RibbonTheme, left_handed: bool) -> CssPropertyWithConditionsVec {

982

1236

    let mut v: Vec<Cond> = mobile_only_visibility(LayoutDisplay::Flex).to_vec();

983

1236

    v.push(cond_border_box());

984

1236

    v.push(Cond::simple(P::const_flex_direction(LayoutFlexDirection::Column)));

985

1236

    v.push(Cond::simple(P::const_width(LayoutWidth::const_px(116))));

986

1236

    v.push(Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(0))));

987

1236

    v.push(Cond::simple(P::const_flex_shrink(LayoutFlexShrink {

988

1236

        inner: FloatValue::const_new(0),

989

1236

    })));

990

1236

    v.push(Cond::simple(P::const_overflow_y(LayoutOverflow::Scroll)));

991

1236

    v.push(Cond::simple(P::const_overflow_x(LayoutOverflow::Hidden)));

992

1236

    v.push(cond_bg(t.chrome_bg));

993

    // The list hugs the dominant hand: a border on the side that faces the

994

    // content, so the divider reads correctly whichever side it is on.

995

1236

    if left_handed {

996

3

        v.push(Cond::simple(P::const_border_right_width(LayoutBorderRightWidth::const_px(1))));

997

3

        v.push(Cond::simple(P::const_border_right_style(StyleBorderRightStyle {

998

3

            inner: BorderStyle::Solid,

999

3

        })));

1000

3

        v.push(Cond::simple(P::const_border_right_color(StyleBorderRightColor {

1001

3

            inner: t.separator,

1002

3

        })));

1003

1233

    } else {

1004

1233

        v.push(Cond::simple(P::const_border_left_width(LayoutBorderLeftWidth::const_px(1))));

1005

1233

        v.push(Cond::simple(P::const_border_left_style(StyleBorderLeftStyle {

1006

1233

            inner: BorderStyle::Solid,

1007

1233

        })));

1008

1233

        v.push(Cond::simple(P::const_border_left_color(StyleBorderLeftColor {

1009

1233

            inner: t.separator,

1010

1233

        })));

1011

1233

1012

1236

    CssPropertyWithConditionsVec::from_vec(v)

1013

1236

1014

1015

/// One entry of the mobile group list.

1016

1236

fn theme_mobile_group_list_item(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

1017

1236

    let mut v = vec![

1018

1236

        cond_border_box(),

1019

1236

        Cond::simple(P::const_display(LayoutDisplay::Flex)),

1020

1236

        Cond::simple(P::const_align_items(LayoutAlignItems::Center)),

1021

1236

        Cond::simple(P::const_height(LayoutHeight::const_px(44))),

1022

1236

        Cond::simple(P::const_font_size(StyleFontSize::const_px(15))),

1023

1236

        cond_text_color(t.text),

1024

1236

        Cond::simple(P::const_cursor(StyleCursor::Pointer)),

1025

1236

        Cond::simple(P::user_select(StyleUserSelect::None)),

1026

];

1027

1236

    push_padding(&mut v, 0, 10, 0, 12);

1028

1236

    push_bottom_border(&mut v, t.separator);

1029

1236

    v.push(cond_bg_hover(t.hover_bg));

1030

1236

    CssPropertyWithConditionsVec::from_vec(v)

1031

1236

1032

1033

/// The selected entry of the mobile group list (appended, last-wins).

1034

1236

fn theme_mobile_group_list_item_selected(t: &RibbonTheme) -> CssPropertyWithConditionsVec {

1035

1236

    CssPropertyWithConditionsVec::from_vec(vec![

1036

1236

        cond_bg(t.selected_bg),

1037

1236

        cond_text_color(t.accent),

1038

])

1039

1236

1040

1041

// -- Classes --

1042

1043

static CLS_RIBBON: &[IdOrClass] = &[Class(AzString::from_const_str("__azul-native-ribbon"))];

1044

static CLS_TAB_BAR: &[IdOrClass] =

1045

    &[Class(AzString::from_const_str("__azul-native-ribbon-tabbar"))];

1046

static CLS_APP_BUTTON: &[IdOrClass] =

1047

    &[Class(AzString::from_const_str("__azul-native-ribbon-appbutton"))];

1048

static CLS_TAB: &[IdOrClass] = &[Class(AzString::from_const_str("__azul-native-ribbon-tab"))];

1049

static CLS_TAB_ACTIVE: &[IdOrClass] = &[

1050

    Class(AzString::from_const_str("__azul-native-ribbon-tab")),

1051

    Class(AzString::from_const_str("__azul-native-ribbon-tab-active")),

1052

];

1053

static CLS_TAB_FILLER: &[IdOrClass] =

1054

    &[Class(AzString::from_const_str("__azul-native-ribbon-tab-filler"))];

1055

static CLS_CONTENT: &[IdOrClass] =

1056

    &[Class(AzString::from_const_str("__azul-native-ribbon-content"))];

1057

static CLS_GROUP: &[IdOrClass] =

1058

    &[Class(AzString::from_const_str("__azul-native-ribbon-group"))];

1059

static CLS_GROUP_ITEMS: &[IdOrClass] =

1060

    &[Class(AzString::from_const_str("__azul-native-ribbon-group-items"))];

1061

static CLS_GROUP_FOOTER: &[IdOrClass] =

1062

    &[Class(AzString::from_const_str("__azul-native-ribbon-group-footer"))];

1063

static CLS_GROUP_LABEL: &[IdOrClass] =

1064

    &[Class(AzString::from_const_str("__azul-native-ribbon-group-label"))];

1065

static CLS_FOOTER_SPACER: &[IdOrClass] =

1066

    &[Class(AzString::from_const_str("__azul-native-ribbon-footer-spacer"))];

1067

static CLS_COLUMN: &[IdOrClass] =

1068

    &[Class(AzString::from_const_str("__azul-native-ribbon-column"))];

1069

static CLS_ROW: &[IdOrClass] = &[Class(AzString::from_const_str("__azul-native-ribbon-row"))];

1070

static CLS_SEPARATOR: &[IdOrClass] =

1071

    &[Class(AzString::from_const_str("__azul-native-ribbon-separator"))];

1072

static CLS_GALLERY: &[IdOrClass] =

1073

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery"))];

1074

static CLS_GALLERY_STRIP: &[IdOrClass] =

1075

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-strip"))];

1076

static CLS_GALLERY_CELL: &[IdOrClass] =

1077

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-cell"))];

1078

static CLS_GALLERY_CELL_SELECTED: &[IdOrClass] = &[

1079

    Class(AzString::from_const_str("__azul-native-ribbon-gallery-cell")),

1080

    Class(AzString::from_const_str("__azul-native-ribbon-gallery-cell-selected")),

1081

];

1082

/// Class names the handlers resolve their targets by (see

1083

/// `ancestor_with_class`), kept next to the `IdOrClass` tables that emit them.

1084

const GALLERY_WRAPPER_CLASS: &str = "__azul-native-ribbon-gallery-wrapper";

1085

const GALLERY_CELL_CLASS: &str = "__azul-native-ribbon-gallery-cell";

1086

const RIBBON_TAB_CLASS: &str = "__azul-native-ribbon-tab";

1087

1088

const MOBILE_TAB_BUTTON_CLASS: &str = "__azul-native-ribbon-mobile-tab";

1089

const RIBBON_CONTAINER_CLASS: &str = "__azul-native-ribbon";

1090

const MOBILE_GROUP_LIST_ITEM_CLASS: &str = "__azul-native-ribbon-mobile-group-list-item";

1091

const RIBBON_CONTENT_CLASS: &str = "__azul-native-ribbon-content";

1092

static CLS_MOBILE_TAB_BUTTON: &[IdOrClass] =

1093

    &[Class(AzString::from_const_str(MOBILE_TAB_BUTTON_CLASS))];

1094

static CLS_MOBILE_TAB_OVERLAY: &[IdOrClass] =

1095

    &[Class(AzString::from_const_str("__azul-native-ribbon-mobile-tab-overlay"))];

1096

static CLS_MOBILE_TAB_OVERLAY_ITEM: &[IdOrClass] =

1097

    &[Class(AzString::from_const_str("__azul-native-ribbon-mobile-tab-overlay-item"))];

1098

static CLS_MOBILE_GROUP_LIST: &[IdOrClass] =

1099

    &[Class(AzString::from_const_str("__azul-native-ribbon-mobile-group-list"))];

1100

static CLS_MOBILE_BAND: &[IdOrClass] =

1101

    &[Class(AzString::from_const_str("__azul-native-ribbon-mobile-band"))];

1102

static CLS_MOBILE_GROUP_LIST_ITEM: &[IdOrClass] =

1103

    &[Class(AzString::from_const_str("__azul-native-ribbon-mobile-group-list-item"))];

1104

1105

static CLS_GALLERY_MORE: &[IdOrClass] =

1106

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-more"))];

1107

static CLS_GALLERY_WRAPPER: &[IdOrClass] =

1108

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-wrapper"))];

1109

static CLS_GALLERY_PANEL: &[IdOrClass] =

1110

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-panel"))];

1111

static CLS_GALLERY_SPINNER: &[IdOrClass] =

1112

    &[Class(AzString::from_const_str("__azul-native-ribbon-gallery-spinner"))];

1113

1114

// -- Style bundle --

1115

1116

/// Every visual part of the ribbon chrome as a replaceable property list.

1117

///

1118

/// The default ([`RibbonStyle::office_2013`]) reproduces the the Office-2013-era look look:

1119

/// white chrome, #2B579A accents, #CDE6F7 hover fills. Each field is applied

1120

/// to exactly one DOM part; replace any of them to re-theme that part.

1121

/// Fields named `*_style` fully replace the part's style; [`Self::checked_style`]

1122

/// and [`Self::gallery_cell_selected_style`] are *appended* to the base button /

1123

/// cell style (inline CSS resolves last-wins, so appended properties override).

1124

#[derive(Debug, Clone, PartialEq, Eq)]

1125

#[repr(C)]

1126

pub struct RibbonStyle {

1127

    /// The palette this style bundle was derived from. Kept for

1128

    /// [`Self::styled_combo_box`] and for consumers deriving matching

1129

    /// custom parts.

1130

    pub theme: RibbonTheme,

1131

    /// Root container (vertical: tab bar over content).

1132

    pub container_style: CssPropertyWithConditionsVec,

1133

    /// The horizontal tab strip.

1134

    pub tab_bar_style: CssPropertyWithConditionsVec,

1135

    /// The blue application button ("FILE").

1136

    pub app_button_style: CssPropertyWithConditionsVec,

1137

    /// An inactive tab header.

1138

    pub tab_style: CssPropertyWithConditionsVec,

1139

    /// The active tab header.

1140

    pub tab_active_style: CssPropertyWithConditionsVec,

1141

    /// The filler segment after the last tab (carries the underline).

1142

    pub tab_filler_style: CssPropertyWithConditionsVec,

1143

    /// The content band below the tab strip (horizontal group list).

1144

    pub content_style: CssPropertyWithConditionsVec,

1145

    /// One group (vertical: items over footer), incl. the right separator.

1146

    pub group_style: CssPropertyWithConditionsVec,

1147

    /// The item area of a group.

1148

    pub group_items_style: CssPropertyWithConditionsVec,

1149

    /// The footer row of a group (label + dialog launcher).

1150

    pub group_footer_style: CssPropertyWithConditionsVec,

1151

    /// The centered group caption.

1152

    pub group_label_style: CssPropertyWithConditionsVec,

1153

    /// Invisible spacer balancing the launcher so the caption stays centered.

1154

    pub footer_spacer_style: CssPropertyWithConditionsVec,

1155

    /// Container style injected into the dialog-launcher [`Button`].

1156

    pub launcher_button_style: CssPropertyWithConditionsVec,

1157

    /// Icon style injected into the dialog-launcher [`Button`].

1158

    pub launcher_icon_style: CssPropertyWithConditionsVec,

1159

    /// A [`RibbonColumn`] packing box.

1160

    pub column_style: CssPropertyWithConditionsVec,

1161

    /// A [`RibbonRow`] packing box.

1162

    pub row_style: CssPropertyWithConditionsVec,

1163

    /// A [`RibbonItem::Separator`] rule.

1164

    pub separator_style: CssPropertyWithConditionsVec,

1165

    /// Container style injected into large-button [`Button`]s.

1166

    pub large_button_style: CssPropertyWithConditionsVec,

1167

    /// Icon style injected into large-button [`Button`]s.

1168

    pub large_icon_style: CssPropertyWithConditionsVec,

1169

    /// Label style injected into large-button [`Button`]s.

1170

    pub large_label_style: CssPropertyWithConditionsVec,

1171

    /// Container style injected into small-button [`Button`]s.

1172

    pub small_button_style: CssPropertyWithConditionsVec,

1173

    /// Icon style injected into small-button [`Button`]s.

1174

    pub small_icon_style: CssPropertyWithConditionsVec,

1175

    /// Label style injected into small-button [`Button`]s.

1176

    pub small_label_style: CssPropertyWithConditionsVec,

1177

    /// Style of the drop-down arrow glyph on Menu/Split buttons.

1178

    pub arrow_icon_style: CssPropertyWithConditionsVec,

1179

    /// APPENDED to the button container when [`RibbonButton::toggled`] is set.

1180

    pub checked_style: CssPropertyWithConditionsVec,

1181

    /// The gallery outer frame.

1182

    pub gallery_frame_style: CssPropertyWithConditionsVec,

1183

    /// The horizontal cell strip inside the gallery frame.

1184

    pub gallery_strip_style: CssPropertyWithConditionsVec,

1185

    /// One gallery cell.

1186

    pub gallery_cell_style: CssPropertyWithConditionsVec,

1187

    /// APPENDED to the selected gallery cell.

1188

    pub gallery_cell_selected_style: CssPropertyWithConditionsVec,

1189

    /// The name label under a gallery cell preview.

1190

    pub gallery_cell_label_style: CssPropertyWithConditionsVec,

1191

    /// The vertical spinner column on the gallery's right edge.

1192

    pub gallery_spinner_style: CssPropertyWithConditionsVec,

1193

    /// Positioning context wrapping the gallery frame + expansion panel.

1194

    pub gallery_wrapper_style: CssPropertyWithConditionsVec,

1195

    /// The expansion panel shown by the gallery's "More" button.

1196

    pub gallery_panel_style: CssPropertyWithConditionsVec,

1197

    /// Full-width tab button shown INSTEAD of the tab strip on phones.

1198

    pub mobile_tab_button_style: CssPropertyWithConditionsVec,

1199

    /// Active-tab label inside the mobile tab button.

1200

    pub mobile_tab_label_style: CssPropertyWithConditionsVec,

1201

    /// Chevron on the mobile tab button.

1202

    pub mobile_tab_arrow_style: CssPropertyWithConditionsVec,

1203

    /// Full-screen tab picker opened by the mobile tab button.

1204

    pub mobile_tab_overlay_style: CssPropertyWithConditionsVec,

1205

    /// One row of the mobile tab picker.

1206

    pub mobile_tab_overlay_item_style: CssPropertyWithConditionsVec,

1207

    /// Scrollable group list shown beside the visible group on phones.

1208

    pub mobile_group_list_style: CssPropertyWithConditionsVec,

1209

    /// One entry of the mobile group list.

1210

    pub mobile_group_list_item_style: CssPropertyWithConditionsVec,

1211

    /// APPENDED to the selected mobile group-list entry.

1212

    pub mobile_group_list_item_selected_style: CssPropertyWithConditionsVec,

1213

    /// Container style injected into the three spinner [`Button`]s.

1214

    pub gallery_spinner_button_style: CssPropertyWithConditionsVec,

1215

    /// Icon style injected into the three spinner [`Button`]s.

1216

    pub gallery_spinner_icon_style: CssPropertyWithConditionsVec,

1217

1218

1219

impl RibbonStyle {

1220

    /// The the Office-2013-era look look (white chrome, #2B579A accents) - the default.

1221

    #[must_use]

1222

1228

    pub fn office_2013() -> Self {

1223

1228

        Self::from_theme(RibbonTheme::office_2013())

1224

1228

1225

1226

    /// Derives every part style from the given palette. This is the styling

1227

    /// override API: build a [`RibbonTheme`] (or start from a preset), then

1228

    /// replace individual `*_style` fields for finer control.

1229

    #[must_use]

1230

1231

    pub fn from_theme(theme: RibbonTheme) -> Self {

1231

        Self::from_theme_handed(theme, Handedness::RightHanded)

1232

1231

1233

1234

    /// [`Self::from_theme`] with an explicit hand: the mobile group list sits

1235

    /// on the dominant-hand side so the thumb reaches it. Independent of text

1236

    /// direction - see [`Handedness`].

1237

    #[must_use]

1238

1236

    pub fn from_theme_handed(theme: RibbonTheme, handedness: Handedness) -> Self {

1239

1236

        let left_handed = matches!(handedness, Handedness::LeftHanded);

1240

1236

        let theme = &theme;

1241

1236

        Self {

1242

1236

            theme: *theme,

1243

1236

            container_style: theme_container(theme),

1244

1236

            tab_bar_style: theme_tab_bar(theme),

1245

1236

            app_button_style: theme_app_button(theme),

1246

1236

            tab_style: theme_tab(theme),

1247

1236

            tab_active_style: theme_tab_active(theme),

1248

1236

            tab_filler_style: theme_tab_filler(theme),

1249

1236

            content_style: theme_content(theme),

1250

1236

            group_style: theme_group(theme),

1251

1236

            group_items_style: CssPropertyWithConditionsVec::from_const_slice(GROUP_ITEMS_STYLE),

1252

1236

            group_footer_style: CssPropertyWithConditionsVec::from_const_slice(GROUP_FOOTER_STYLE),

1253

1236

            group_label_style: theme_group_label(theme),

1254

1236

            footer_spacer_style: CssPropertyWithConditionsVec::from_const_slice(FOOTER_SPACER_STYLE),

1255

1236

            launcher_button_style: theme_launcher_button(theme),

1256

1236

            launcher_icon_style: theme_launcher_icon(theme),

1257

1236

            column_style: CssPropertyWithConditionsVec::from_const_slice(COLUMN_STYLE),

1258

1236

            row_style: CssPropertyWithConditionsVec::from_const_slice(ROW_STYLE),

1259

1236

            separator_style: theme_separator(theme),

1260

1236

            large_button_style: theme_large_button(theme),

1261

1236

            large_icon_style: theme_large_icon(theme),

1262

1236

            large_label_style: theme_large_label(theme),

1263

1236

            small_button_style: theme_small_button(theme),

1264

1236

            small_icon_style: theme_small_icon(theme),

1265

1236

            small_label_style: theme_small_label(theme),

1266

1236

            arrow_icon_style: theme_arrow_icon(theme),

1267

1236

            checked_style: theme_checked(theme),

1268

1236

            gallery_frame_style: theme_gallery_frame(theme),

1269

1236

            gallery_strip_style: CssPropertyWithConditionsVec::from_const_slice(GALLERY_STRIP_STYLE),

1270

1236

            gallery_cell_style: theme_gallery_cell(theme),

1271

1236

            gallery_cell_selected_style: theme_gallery_cell_selected(theme),

1272

1236

            gallery_cell_label_style: theme_gallery_cell_label(theme),

1273

1236

            gallery_spinner_style: theme_gallery_spinner(theme),

1274

1236

            gallery_wrapper_style: CssPropertyWithConditionsVec::from_const_slice(

1275

1236

                GALLERY_WRAPPER_STYLE,

1276

1236

),

1277

1236

            gallery_panel_style: theme_gallery_panel(theme),

1278

1236

            mobile_tab_button_style: theme_mobile_tab_button(theme),

1279

1236

            mobile_tab_label_style: theme_mobile_tab_label(theme),

1280

1236

            mobile_tab_arrow_style: theme_mobile_tab_arrow(theme),

1281

1236

            mobile_tab_overlay_style: theme_mobile_tab_overlay(theme),

1282

1236

            mobile_tab_overlay_item_style: theme_mobile_tab_overlay_item(theme),

1283

1236

            mobile_group_list_style: theme_mobile_group_list(theme, left_handed),

1284

1236

            mobile_group_list_item_style: theme_mobile_group_list_item(theme),

1285

1236

            mobile_group_list_item_selected_style: theme_mobile_group_list_item_selected(theme),

1286

1236

            gallery_spinner_button_style: theme_gallery_spinner_button(theme),

1287

1236

            gallery_spinner_icon_style: theme_gallery_spinner_icon(theme),

1288

1236

1289

1236

1290

1291

    /// Derives the ribbon style from the OS theme (see

1292

    /// [`RibbonTheme::from_system`]). Pass `SystemStyle::detect()` for the

1293

    /// live system look, e.g. to render a "system native" ribbon.

1294

    #[must_use]

1295

2

    pub fn from_system(style: SystemStyle) -> Self {

1296

2

        let handedness = style.handedness;

1297

2

        Self::from_theme_handed(RibbonTheme::from_system(style), handedness)

1298

2

1299

1300

    /// Returns a [`ComboBox`] with this ribbon's field look injected through

1301

    /// the combobox's public style fields (flat 1px border, 22px field, 12px

1302

    /// text - the the Office-2013-era look font-name/font-size pickers). `width` is the

1303

    /// total field width in px. Demonstrates (and exercises) the widget

1304

    /// style-injection API; tweak the returned combobox further by replacing

1305

    /// any of its `*_style` fields.

1306

    #[must_use]

1307

2

    pub fn styled_combo_box(&self, items: StringVec, text: AzString, width: isize) -> ComboBox {

1308

2

        let mut combo = ComboBox::new(items).with_text(text);

1309

2

        let mut wrapper: Vec<Cond> = theme_combo_wrapper_base(&self.theme);

1310

2

        wrapper.push(Cond::simple(P::const_width(LayoutWidth::const_px(width))));

1311

2

        combo.wrapper_style = CssPropertyWithConditionsVec::from_vec(wrapper);

1312

2

        combo.field_style = theme_combo_field(&self.theme);

1313

2

        combo.text_style =

1314

2

            CssPropertyWithConditionsVec::from_const_slice(RIBBON_COMBO_TEXT_STYLE);

1315

2

        combo.arrow_style = theme_combo_arrow(&self.theme);

1316

2

        combo

1317

2

1318

1319

1320

impl Default for RibbonStyle {

1321

1

    fn default() -> Self {

1322

1

        Self::office_2013()

1323

1

1324

1325

1326

// -- Data model --

1327

1328

/// The interactive behaviors the ribbon performs BY ITSELF, without any

1329

/// application state. Each is the classic default and each can be turned off,

1330

/// in which case the corresponding event is still forwarded to the app

1331

/// callback (if any) but the ribbon does not touch its own chrome.

1332

///

1333

/// The state these behaviors need (collapsed / peeked / selected cell) lives

1334

/// in a private `RefAny` minted inside [`Ribbon::dom`] — the application's

1335

/// own data model is never involved.

1336

#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]

1337

#[repr(C)]

1338

pub struct RibbonBehavior {

1339

    /// Double-clicking a tab header collapses the content band; double

1340

    /// clicking again restores it (office-2013: "Collapse the Ribbon").

1341

    pub collapsible: bool,

1342

    /// While collapsed, hovering a tab header peeks the content band and

1343

    /// leaving it hides the band again.

1344

    pub peek_on_hover: bool,

1345

    /// Clicking a gallery cell moves the selection highlight without waiting

1346

    /// for the app to re-render.

1347

    pub auto_select_gallery: bool,

1348

    /// The gallery's third spinner button ("More") toggles an expansion

1349

    /// panel showing every cell.

1350

    pub expandable_gallery: bool,

1351

    /// On phones, tapping the tab button opens the full-screen tab picker.

1352

    /// With this off the button is inert and the application drives tab

1353

    /// switching itself.

1354

    pub mobile_tab_overlay: bool,

1355

1356

1357

impl RibbonBehavior {

1358

    /// All classic office-suite behaviors enabled - the default.

1359

    #[must_use]

1360

1219

    pub const fn office_2013() -> Self {

1361

1219

        Self {

1362

1219

            collapsible: true,

1363

1219

            peek_on_hover: true,

1364

1219

            auto_select_gallery: true,

1365

1219

            expandable_gallery: true,

1366

1219

            mobile_tab_overlay: true,

1367

1219

1368

1219

1369

1370

    /// Every self-driven behavior off: the ribbon only forwards events to

1371

    /// the application callbacks and never patches its own chrome.

1372

    #[must_use]

1373

6

    pub const fn inert() -> Self {

1374

6

        Self {

1375

6

            collapsible: false,

1376

6

            peek_on_hover: false,

1377

6

            auto_select_gallery: false,

1378

6

            expandable_gallery: false,

1379

6

            mobile_tab_overlay: false,

1380

6

1381

6

1382

1383

1384

impl Default for RibbonBehavior {

1385

1

    fn default() -> Self {

1386

1

        Self::office_2013()

1387

1

1388

1389

1390

/// Top-level ribbon widget: an optional application button, a tab strip and

1391

/// the active tab's groups.

1392

#[derive(Debug, Clone)]

1393

#[repr(C)]

1394

pub struct Ribbon {

1395

    /// Optional application button rendered before the first tab ("FILE").

1396

    pub app_button: OptionRibbonAppButton,

1397

    /// Tabs displayed in the ribbon tab bar.

1398

    pub tabs: RibbonTabVec,

1399

    /// Index of the currently active tab.

1400

    pub active_tab: usize,

1401

    /// Optional callback fired when a tab is clicked (receives the tab index).

1402

    pub on_tab_click: OptionRibbonOnTabClick,

1403

    /// All part styles (defaults to the the Office-2013-era look look).

1404

    pub style: RibbonStyle,

1405

    /// Which interactions the ribbon handles by itself (defaults to the classic behavior).

1406

    pub behavior: RibbonBehavior,

1407

1408

1409

/// The application button at the far left of the tab strip ("FILE").

1410

#[derive(Debug, Clone)]

1411

#[repr(C)]

1412

pub struct RibbonAppButton {

1413

    /// Display label of the application button.

1414

    pub label: AzString,

1415

    /// Optional click callback.

1416

    pub on_click: OptionButtonOnClick,

1417

1418

1419

/// A single tab within a [`Ribbon`], containing a label and groups.

1420

#[derive(Debug, Clone)]

1421

#[repr(C)]

1422

pub struct RibbonTab {

1423

    /// Display label shown in the tab bar.

1424

    pub label: AzString,

1425

    /// Groups rendered when this tab is active.

1426

    pub groups: RibbonGroupVec,

1427

    /// Extra properties APPENDED to this tab header's style, after the

1428

    /// shared [`RibbonStyle::tab_style`] / [`RibbonStyle::tab_active_style`]

1429

    /// — so they win, and they apply in BOTH states.

1430

///

1431

    /// Empty (the default) leaves the tab looking like every other one.

1432

    /// This is the only per-tab hook: `RibbonStyle` describes the tab

1433

    /// STRIP, so without it a single tab could not be tinted, badged or

1434

    /// given its own border, and telling two tabs apart in a screenshot

1435

    /// meant reading their labels.

1436

    pub style: CssPropertyWithConditionsVec,

1437

1438

1439

/// A captioned group of controls within a [`RibbonTab`].

1440

#[derive(Debug, Clone)]

1441

#[repr(C)]

1442

pub struct RibbonGroup {

1443

    /// Caption shown centered under the group content.

1444

    pub label: AzString,

1445

    /// The controls of this group, laid out left-to-right.

1446

    pub items: RibbonItemVec,

1447

    /// Optional dialog-box-launcher callback; when set, a small launcher

1448

    /// button is rendered at the right end of the caption row.

1449

    pub launcher: OptionButtonOnClick,

1450

    /// When set, this group absorbs the remaining ribbon width (the classic office-suite

1451

    /// Styles gallery group stretches; the other groups are content-sized).

1452

    pub fills_space: bool,

1453

1454

1455

/// One control slot inside a [`RibbonGroup`].

1456

// `#[repr(C, u8)]` — this enum crosses the C ABI and is mirrored in api.json.

1457

// Boxing the large variant to equalise sizes would change the generated

1458

// bindings for every language, so the size spread is deliberate.

1459

#[allow(clippy::large_enum_variant)]

1460

#[derive(Debug, Clone)]

1461

#[repr(C, u8)]

1462

pub enum RibbonItem {

1463

    /// Full-height button: icon over label (`RibbonX` `button[size=large]`).

1464

    LargeButton(RibbonButton),

1465

    /// One-row button: icon beside optional label (`RibbonX` `button`).

1466

    SmallButton(RibbonButton),

1467

    /// Vertical packing box (`RibbonX` `box[boxStyle=vertical]`).

1468

    Column(RibbonColumn),

1469

    /// Horizontal packing box (`RibbonX` `box`/`buttonGroup`).

1470

    Row(RibbonRow),

1471

    /// Embeds the existing [`ComboBox`] widget (`RibbonX` `comboBox`).

1472

    Combo(ComboBox),

1473

    /// Embeds the existing [`DropDown`] widget (`RibbonX` `dropDown`).

1474

    Drop(DropDown),

1475

    /// Embeds the existing [`CheckBox`] widget (`RibbonX` `checkBox`).

1476

    Check(CheckBox),

1477

    /// In-ribbon gallery with spinner column (`RibbonX` `gallery`).

1478

    Gallery(RibbonGallery),

1479

    /// Thin vertical rule (`RibbonX` `separator`).

1480

    Separator,

1481

    /// Arbitrary user content.

1482

    Custom(Dom),

1483

1484

1485

/// Vertical stack of items (e.g. the Cut/Copy/Format-Painter column).

1486

#[derive(Debug, Clone)]

1487

#[repr(C)]

1488

pub struct RibbonColumn {

1489

    /// Items stacked top-to-bottom.

1490

    pub items: RibbonItemVec,

1491

1492

1493

/// Horizontal cluster of items (e.g. the Bold/Italic/Underline row).

1494

#[derive(Debug, Clone)]

1495

#[repr(C)]

1496

pub struct RibbonRow {

1497

    /// Items packed left-to-right.

1498

    pub items: RibbonItemVec,

1499

1500

1501

/// Declarative description of one ribbon button; expands to the existing

1502

/// [`Button`] widget with ribbon styles injected.

1503

#[derive(Debug, Clone)]

1504

#[repr(C)]

1505

pub struct RibbonButton {

1506

    /// Icon name resolved via the icon provider (Material Icons ships

1507

    /// builtin, e.g. "`content_paste`"). Empty string = no icon.

1508

    pub icon: AzString,

1509

    /// Button label. Empty string = icon-only button.

1510

    pub label: AzString,

1511

    /// Drop-down decoration: none, menu arrow or split-button arrow.

1512

    pub arrow: RibbonArrow,

1513

    /// Renders the button in the toggled-on state (`RibbonX` `toggleButton`).

1514

    pub toggled: bool,

1515

    /// Optional click callback (same family as [`Button::on_click`]).

1516

    pub on_click: OptionButtonOnClick,

1517

1518

1519

/// Drop-down decoration of a [`RibbonButton`].

1520

#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash, Default)]

1521

#[repr(C)]

1522

pub enum RibbonArrow {

1523

    /// Plain button without an arrow.

1524

    #[default]

1525

    None,

1526

    /// The whole button opens a menu (`RibbonX` `menu`).

1527

    Menu,

1528

    /// Primary action + separate arrow region (`RibbonX` `splitButton`).

1529

    /// Rendered identically to `Menu`; the split behavior is the caller's.

1530

    Split,

1531

1532

1533

/// In-ribbon gallery: a strip of preview cells plus a 3-button spinner column.

1534

#[derive(Debug, Clone)]

1535

#[repr(C)]

1536

pub struct RibbonGallery {

1537

    /// The visible cells.

1538

    pub cells: RibbonGalleryCellVec,

1539

    /// Index of the selected cell.

1540

    pub selected: usize,

1541

    /// Optional callback fired when a cell is clicked (receives cell index).

1542

    pub on_select: OptionRibbonGalleryOnSelect,

1543

1544

1545

/// One gallery cell: an arbitrary preview [`Dom`] over a name label.

1546

#[derive(Debug, Clone)]

1547

#[repr(C)]

1548

pub struct RibbonGalleryCell {

1549

    /// Preview content rendered above the label (e.g. styled sample text).

1550

    pub preview: Dom,

1551

    /// Name label rendered under the preview.

1552

    pub label: AzString,

1553

1554

1555

impl_option!(RibbonAppButton, OptionRibbonAppButton, copy = false, [Debug, Clone]);

1556

impl_option!(RibbonTab, OptionRibbonTab, copy = false, [Debug, Clone]);

1557

impl_option!(RibbonGroup, OptionRibbonGroup, copy = false, [Debug, Clone]);

1558

impl_option!(RibbonItem, OptionRibbonItem, copy = false, [Debug, Clone]);

1559

impl_option!(RibbonGalleryCell, OptionRibbonGalleryCell, copy = false, [Debug, Clone]);

1560

1561

impl_vec!(RibbonTab, RibbonTabVec, RibbonTabVecDestructor, RibbonTabVecDestructorType, RibbonTabVecSlice, OptionRibbonTab);

1562

impl_vec_clone!(RibbonTab, RibbonTabVec, RibbonTabVecDestructor);

1563

impl_vec_debug!(RibbonTab, RibbonTabVec);

1564

impl_vec_mut!(RibbonTab, RibbonTabVec);

1565

1566

impl_vec!(RibbonGroup, RibbonGroupVec, RibbonGroupVecDestructor, RibbonGroupVecDestructorType, RibbonGroupVecSlice, OptionRibbonGroup);

1567

impl_vec_clone!(RibbonGroup, RibbonGroupVec, RibbonGroupVecDestructor);

1568

impl_vec_debug!(RibbonGroup, RibbonGroupVec);

1569

impl_vec_mut!(RibbonGroup, RibbonGroupVec);

1570

1571

impl_vec!(RibbonItem, RibbonItemVec, RibbonItemVecDestructor, RibbonItemVecDestructorType, RibbonItemVecSlice, OptionRibbonItem);

1572

impl_vec_clone!(RibbonItem, RibbonItemVec, RibbonItemVecDestructor);

1573

impl_vec_debug!(RibbonItem, RibbonItemVec);

1574

impl_vec_mut!(RibbonItem, RibbonItemVec);

1575

1576

impl_vec!(RibbonGalleryCell, RibbonGalleryCellVec, RibbonGalleryCellVecDestructor, RibbonGalleryCellVecDestructorType, RibbonGalleryCellVecSlice, OptionRibbonGalleryCell);

1577

impl_vec_clone!(RibbonGalleryCell, RibbonGalleryCellVec, RibbonGalleryCellVecDestructor);

1578

impl_vec_debug!(RibbonGalleryCell, RibbonGalleryCellVec);

1579

impl_vec_mut!(RibbonGalleryCell, RibbonGalleryCellVec);

1580

1581

// -- Constructors / builders --

1582

1583

impl RibbonAppButton {

1584

    /// Creates an application button with the given label and no callback.

1585

    #[must_use]

1586

123

    pub fn new(label: AzString) -> Self {

1587

123

        Self { label, on_click: None.into() }

1588

123

1589

1590

    /// Sets the click callback.

1591

1

    pub fn set_on_click<C: Into<super::button::ButtonOnClickCallback>>(

1592

1

        &mut self,

1593

1

        data: RefAny,

1594

1

        on_click: C,

1595

1

) {

1596

1

        self.on_click = Some(super::button::ButtonOnClick {

1597

1

            refany: data,

1598

1

            callback: on_click.into(),

1599

1

})

1600

1

        .into();

1601

1

1602

1603

    /// Builder method: sets the click callback and returns `self`.

1604

    #[must_use]

1605

1

    pub fn with_on_click<C: Into<super::button::ButtonOnClickCallback>>(

1606

1

        mut self,

1607

1

        data: RefAny,

1608

1

        on_click: C,

1609

1

    ) -> Self {

1610

1

        self.set_on_click(data, on_click);

1611

1

        self

1612

1

1613

1614

1615

impl RibbonTab {

1616

    /// Creates a new tab with the given label and no groups.

1617

    #[must_use]

1618

1029

    pub const fn new(label: AzString) -> Self {

1619

1029

        Self {

1620

1029

            label,

1621

1029

            groups: RibbonGroupVec::from_const_slice(&[]),

1622

1029

            style: CssPropertyWithConditionsVec::from_const_slice(&[]),

1623

1029

1624

1029

1625

1626

    /// Appends per-tab style properties to this tab's header (see

1627

    /// [`RibbonTab::style`]).

1628

    pub fn set_style(&mut self, style: CssPropertyWithConditionsVec) {

1629

        self.style = style;

1630

1631

1632

    /// Builder method: sets the per-tab header style and returns `self`.

1633

    #[must_use]

1634

    pub fn with_style(mut self, style: CssPropertyWithConditionsVec) -> Self {

1635

        self.set_style(style);

1636

        self

1637

1638

1639

    /// Appends a group to this tab.

1640

12151

    pub fn add_group(&mut self, group: RibbonGroup) {

1641

12151

        self.groups.push(group);

1642

12151

1643

1644

    /// Builder method: appends a group and returns `self`.

1645

    #[must_use]

1646

12151

    pub fn with_group(mut self, group: RibbonGroup) -> Self {

1647

12151

        self.add_group(group);

1648

12151

        self

1649

12151

1650

1651

1652

impl RibbonGroup {

1653

    /// Creates a new group with the given caption and no items.

1654

    #[must_use]

1655

1375

    pub const fn new(label: AzString) -> Self {

1656

1375

        Self {

1657

1375

            label,

1658

1375

            items: RibbonItemVec::from_const_slice(&[]),

1659

1375

            launcher: OptionButtonOnClick::None,

1660

1375

            fills_space: false,

1661

1375

1662

1375

1663

1664

    /// Builder method: makes this group absorb the remaining ribbon width.

1665

    #[must_use]

1666

120

    pub const fn with_fills_space(mut self, fills_space: bool) -> Self {

1667

120

        self.fills_space = fills_space;

1668

120

        self

1669

120

1670

1671

    /// Appends an item to this group.

1672

12877

    pub fn add_item(&mut self, item: RibbonItem) {

1673

12877

        self.items.push(item);

1674

12877

1675

1676

    /// Builder method: appends an item and returns `self`.

1677

    #[must_use]

1678

12877

    pub fn with_item(mut self, item: RibbonItem) -> Self {

1679

12877

        self.add_item(item);

1680

12877

        self

1681

12877

1682

1683

    /// Sets the dialog-box-launcher callback (renders the launcher button).

1684

2

    pub fn set_launcher<C: Into<super::button::ButtonOnClickCallback>>(

1685

2

        &mut self,

1686

2

        data: RefAny,

1687

2

        on_click: C,

1688

2

) {

1689

2

        self.launcher = Some(super::button::ButtonOnClick {

1690

2

            refany: data,

1691

2

            callback: on_click.into(),

1692

2

})

1693

2

        .into();

1694

2

1695

1696

    /// Builder method: sets the launcher callback and returns `self`.

1697

    #[must_use]

1698

2

    pub fn with_launcher<C: Into<super::button::ButtonOnClickCallback>>(

1699

2

        mut self,

1700

2

        data: RefAny,

1701

2

        on_click: C,

1702

2

    ) -> Self {

1703

2

        self.set_launcher(data, on_click);

1704

2

        self

1705

2

1706

1707

1708

impl RibbonColumn {

1709

    /// Creates an empty column.

1710

    #[must_use]

1711

359

    pub const fn new() -> Self {

1712

359

        Self { items: RibbonItemVec::from_const_slice(&[]) }

1713

359

1714

1715

    /// Appends an item to this column.

1716

9634

    pub fn add_item(&mut self, item: RibbonItem) {

1717

9634

        self.items.push(item);

1718

9634

1719

1720

    /// Builder method: appends an item and returns `self`.

1721

    #[must_use]

1722

9634

    pub fn with_item(mut self, item: RibbonItem) -> Self {

1723

9634

        self.add_item(item);

1724

9634

        self

1725

9634

1726

1727

1728

impl Default for RibbonColumn {

1729

    fn default() -> Self {

1730

        Self::new()

1731

1732

1733

1734

impl RibbonRow {

1735

    /// Creates an empty row.

1736

    #[must_use]

1737

1

    pub const fn new() -> Self {

1738

1

        Self { items: RibbonItemVec::from_const_slice(&[]) }

1739

1

1740

1741

    /// Appends an item to this row.

1742

2

    pub fn add_item(&mut self, item: RibbonItem) {

1743

2

        self.items.push(item);

1744

2

1745

1746

    /// Builder method: appends an item and returns `self`.

1747

    #[must_use]

1748

2

    pub fn with_item(mut self, item: RibbonItem) -> Self {

1749

2

        self.add_item(item);

1750

2

        self

1751

2

1752

1753

1754

impl Default for RibbonRow {

1755

    fn default() -> Self {

1756

        Self::new()

1757

1758

1759

1760

impl RibbonButton {

1761

    /// Creates a plain button with an icon and a label (both may be empty).

1762

    #[must_use]

1763

2025

    pub const fn new(icon: AzString, label: AzString) -> Self {

1764

2025

        Self {

1765

2025

            icon,

1766

2025

            label,

1767

2025

            arrow: RibbonArrow::None,

1768

2025

            toggled: false,

1769

2025

            on_click: OptionButtonOnClick::None,

1770

2025

1771

2025

1772

1773

    /// Builder method: sets the arrow decoration and returns `self`.

1774

    #[must_use]

1775

2

    pub const fn with_arrow(mut self, arrow: RibbonArrow) -> Self {

1776

2

        self.arrow = arrow;

1777

2

        self

1778

2

1779

1780

    /// Builder method: sets the toggled state and returns `self`.

1781

    #[must_use]

1782

1

    pub const fn with_toggled(mut self, toggled: bool) -> Self {

1783

1

        self.toggled = toggled;

1784

1

        self

1785

1

1786

1787

    /// Sets the click callback.

1788

    pub fn set_on_click<C: Into<super::button::ButtonOnClickCallback>>(

1789

        &mut self,

1790

        data: RefAny,

1791

        on_click: C,

1792

) {

1793

        self.on_click = Some(super::button::ButtonOnClick {

1794

            refany: data,

1795

            callback: on_click.into(),

1796

})

1797

        .into();

1798

1799

1800

    /// Builder method: sets the click callback and returns `self`.

1801

    #[must_use]

1802

    pub fn with_on_click<C: Into<super::button::ButtonOnClickCallback>>(

1803

        mut self,

1804

        data: RefAny,

1805

        on_click: C,

1806

    ) -> Self {

1807

        self.set_on_click(data, on_click);

1808

        self

1809

1810

1811

1812

impl RibbonGallery {

1813

    /// Creates a gallery from its cells; cell 0 is selected.

1814

    #[must_use]

1815

138

    pub fn new(cells: RibbonGalleryCellVec) -> Self {

1816

138

        Self { cells, selected: 0, on_select: None.into() }

1817

138

1818

1819

    /// Builder method: sets the selected cell index and returns `self`.

1820

    #[must_use]

1821

1

    pub const fn with_selected(mut self, selected: usize) -> Self {

1822

1

        self.selected = selected;

1823

1

        self

1824

1

1825

1826

    /// Sets the cell-click callback.

1827

1

    pub fn set_on_select<C: Into<RibbonGalleryOnSelectCallback>>(

1828

1

        &mut self,

1829

1

        data: RefAny,

1830

1

        on_select: C,

1831

1

) {

1832

1

        self.on_select = Some(RibbonGalleryOnSelect {

1833

1

            refany: data,

1834

1

            callback: on_select.into(),

1835

1

})

1836

1

        .into();

1837

1

1838

1839

    /// Builder method: sets the cell-click callback and returns `self`.

1840

    #[must_use]

1841

1

    pub fn with_on_select<C: Into<RibbonGalleryOnSelectCallback>>(

1842

1

        mut self,

1843

1

        data: RefAny,

1844

1

        on_select: C,

1845

1

    ) -> Self {

1846

1

        self.set_on_select(data, on_select);

1847

1

        self

1848

1

1849

1850

1851

impl RibbonGalleryCell {

1852

    /// Creates a cell from a preview subtree and a name label.

1853

    #[must_use]

1854

572

    pub const fn new(preview: Dom, label: AzString) -> Self {

1855

572

        Self { preview, label }

1856

572

1857

1858

1859

impl Ribbon {

1860

    /// Creates a new ribbon with the given tabs, the first tab active and the

1861

    /// the Office-2013-era look default style.

1862

    #[must_use]

1863

1213

    pub fn new(tabs: RibbonTabVec) -> Self {

1864

1213

        Self {

1865

1213

            app_button: None.into(),

1866

1213

            tabs,

1867

1213

            active_tab: 0,

1868

1213

            on_tab_click: None.into(),

1869

1213

            style: RibbonStyle::office_2013(),

1870

1213

            behavior: RibbonBehavior::office_2013(),

1871

1213

1872

1213

1873

1874

    /// Sets the application button ("FILE").

1875

1059

    pub fn set_app_button(&mut self, app_button: RibbonAppButton) {

1876

1059

        self.app_button = Some(app_button).into();

1877

1059

1878

1879

    /// Builder method: sets the application button and returns `self`.

1880

    #[must_use]

1881

1059

    pub fn with_app_button(mut self, app_button: RibbonAppButton) -> Self {

1882

1059

        self.set_app_button(app_button);

1883

1059

        self

1884

1059

1885

1886

    /// Replaces the whole style bundle.

1887

    pub fn set_style(&mut self, style: RibbonStyle) {

1888

        self.style = style;

1889

1890

1891

    /// Builder method: replaces the style bundle and returns `self`.

1892

    #[must_use]

1893

    pub fn with_style(mut self, style: RibbonStyle) -> Self {

1894

        self.set_style(style);

1895

        self

1896

1897

1898

    /// Replaces the self-driven behavior set (collapse, peek, gallery).

1899

7

    pub const fn set_behavior(&mut self, behavior: RibbonBehavior) {

1900

7

        self.behavior = behavior;

1901

7

1902

1903

    /// Builder method: replaces the behavior set and returns `self`.

1904

    #[must_use]

1905

7

    pub const fn with_behavior(mut self, behavior: RibbonBehavior) -> Self {

1906

7

        self.set_behavior(behavior);

1907

7

        self

1908

7

1909

1910

    /// Sets the active tab by index, clamping to the last valid tab.

1911

14

    pub const fn set_active_tab(&mut self, index: usize) {

1912

14

        let max = self.tabs.len().saturating_sub(1);

1913

14

        self.active_tab = if index > max { max } else { index };

1914

14

1915

1916

    /// Builder method: sets the active tab (clamped) and returns `self`.

1917

    #[must_use]

1918

2

    pub const fn with_active_tab(mut self, index: usize) -> Self {

1919

2

        self.set_active_tab(index);

1920

2

        self

1921

2

1922

1923

    /// Registers a callback invoked when a tab is clicked.

1924

1

    pub fn set_on_tab_click<C: Into<RibbonOnTabClickCallback>>(&mut self, data: RefAny, cb: C) {

1925

1

        self.on_tab_click = Some(RibbonOnTabClick {

1926

1

            callback: cb.into(), refany: data,

1927

1

        }).into();

1928

1

1929

1930

    /// Builder method: registers a tab-click callback and returns `self`.

1931

    #[must_use]

1932

1

    pub fn with_on_tab_click<C: Into<RibbonOnTabClickCallback>>(mut self, data: RefAny, cb: C) -> Self {

1933

1

        self.set_on_tab_click(data, cb);

1934

1

        self

1935

1

1936

1937

    /// Builds the ADAPTIVE ribbon DOM: both the desktop chrome (tab strip)

1938

    /// and the touch chrome (full-width tab button, group list) live in the

1939

    /// tree, and inline viewport conditions decide which is visible. Use

1940

    /// this when one tree must serve every window size without re-running

1941

    /// `layout()` logic.

1942

    #[must_use]

1943

160

    pub fn dom(self) -> Dom {

1944

160

        self.build_chrome(RibbonChromeMode::Adaptive)

1945

160

1946

1947

    /// Builds ONLY the desktop chrome (tab strip + content band), with no

1948

    /// mobile nodes and no viewport conditions. Pair with

1949

    /// [`Self::dom_mobile`] by branching on

1950

    /// `LayoutCallbackInfo::viewport_bigger_than` in `layout()` - the

1951

    /// framework re-invokes `layout()` on every resize, so crossing the

1952

    /// breakpoint swaps the structure.

1953

    #[must_use]

1954

1045

    pub fn dom_desktop(self) -> Dom {

1955

1045

        self.build_chrome(RibbonChromeMode::Desktop)

1956

1045

1957

1958

    /// Builds ONLY the touch chrome: the full-width active-tab button (tap

1959

    /// opens the fullscreen tab picker, double-tap collapses the band), the

1960

    /// scrollable group list on the dominant-hand side, and ONE visible

1961

    /// group at a time (tapping a list entry swaps it in with no app

1962

    /// relayout). See [`Self::dom_desktop`] for the pairing contract.

1963

    #[must_use]

1964

1

    pub fn dom_mobile(self) -> Dom {

1965

1

        self.build_chrome(RibbonChromeMode::Mobile)

1966

1

1967

1968

1206

    fn build_chrome(self, mode: RibbonChromeMode) -> Dom {

1969

1206

        let Self { app_button, tabs, active_tab, on_tab_click, style, behavior } = self;

1970

1206

        let has_callback = on_tab_click.is_some();

1971

1972

        // Labels are needed by both chromes; `tabs` is consumed below.

1973

1206

        let tab_labels: Vec<AzString> =

1974

8611

            tabs.as_slice().iter().map(|t| t.label.clone()).collect();

1975

1206

        let group_labels: Vec<AzString> = tabs

1976

1206

            .as_slice()

1977

1206

            .get(active_tab)

1978

4779

            .map(|t| t.groups.as_slice().iter().map(|g| g.label.clone()).collect())

1979

1206

            .unwrap_or_default();

1980

1981

1206

        let mut bar_children: Vec<Dom> = Vec::with_capacity(tabs.len() + 2);

1982

1983

1206

        if let Some(ab) = app_button.into_option() {

1984

1059

            let mut d = Dom::create_div()

1985

1059

                .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_APP_BUTTON))

1986

1059

                .with_css_props(style.app_button_style.clone())

1987

1059

                .with_children(DomVec::from_vec(vec![Dom::create_p_with_text(ab.label)]));

1988

1059

            if let Some(oc) = ab.on_click.into_option() {

1989

1

                d = d.with_callbacks(vec![CoreCallbackData {

1990

1

                    event: EventFilter::Hover(HoverEventFilter::MouseUp),

1991

1

                    callback: CoreCallback {

1992

1

                        cb: oc.callback.cb as *const () as usize,

1993

1

                        ctx: oc.callback.ctx,

1994

1

},

1995

1

                    refany: oc.refany,

1996

1

                }].into());

1997

1058

1998

1059

            bar_children.push(d);

1999

147

2000

2001

        // Private chrome state shared by every tab header: the collapse and

2002

        // hover-peek behaviors are driven from here, so the application's own

2003

        // data model never has to model ribbon chrome.

2004

1206

        let chrome = RefAny::new(RibbonChromeState { collapsed: false });

2005

2006

8611

        for (idx, tab) in tabs.as_slice().iter().enumerate() {

2007

8611

            let (classes, part_style) = if idx == active_tab {

2008

1204

                (CLS_TAB_ACTIVE, style.tab_active_style.clone())

2009

            } else {

2010

7407

                (CLS_TAB, style.tab_style.clone())

2011

};

2012

            // Per-tab properties go AFTER the shared ones so they win, and

2013

            // they are applied in both the active and inactive state.

2014

8611

            let part_style = if tab.style.as_ref().is_empty() {

2015

8611

                part_style

2016

            } else {

2017

                let mut merged = part_style.into_library_owned_vec();

2018

                merged.extend(tab.style.as_ref().iter().cloned());

2019

                CssPropertyWithConditionsVec::from_vec(merged)

2020

};

2021

8611

            let mut d = Dom::create_div()

2022

8611

                .with_ids_and_classes(IdOrClassVec::from_const_slice(classes))

2023

8611

                .with_css_props(part_style)

2024

8611

                .with_children(DomVec::from_vec(vec![Dom::create_p_with_text(tab.label.clone())]));

2025

2026

8611

            let mut cbs: Vec<CoreCallbackData> = Vec::with_capacity(4);

2027

8611

            if has_callback {

2028

5

                cbs.push(CoreCallbackData {

2029

5

                    event: EventFilter::Hover(HoverEventFilter::MouseUp),

2030

5

                    callback: CoreCallback {

2031

5

                        cb: on_ribbon_tab_click as usize,

2032

5

                        ctx: azul_core::refany::OptionRefAny::None,

2033

5

},

2034

5

                    refany: RefAny::new(TabClickData {

2035

5

                        tab_idx: idx, on_tab_click: on_tab_click.clone(),

2036

5

}),

2037

5

});

2038

8606

2039

8611

            if behavior.collapsible {

2040

8600

                cbs.push(CoreCallbackData {

2041

8600

                    event: EventFilter::Hover(HoverEventFilter::DoubleClick),

2042

8600

                    callback: CoreCallback {

2043

8600

                        cb: on_ribbon_tab_double_click as usize,

2044

8600

                        ctx: azul_core::refany::OptionRefAny::None,

2045

8600

},

2046

8600

                    refany: chrome.clone(),

2047

8600

});

2048

8600

                if behavior.peek_on_hover {

2049

8599

                    cbs.push(CoreCallbackData {

2050

8599

                        event: EventFilter::Hover(HoverEventFilter::MouseEnter),

2051

8599

                        callback: CoreCallback {

2052

8599

                            cb: on_ribbon_tab_peek_enter as usize,

2053

8599

                            ctx: azul_core::refany::OptionRefAny::None,

2054

8599

},

2055

8599

                        refany: chrome.clone(),

2056

8599

});

2057

8599

                    cbs.push(CoreCallbackData {

2058

8599

                        event: EventFilter::Hover(HoverEventFilter::MouseLeave),

2059

8599

                        callback: CoreCallback {

2060

8599

                            cb: on_ribbon_tab_peek_leave as usize,

2061

8599

                            ctx: azul_core::refany::OptionRefAny::None,

2062

8599

},

2063

8599

                        refany: chrome.clone(),

2064

8599

});

2065

8599

2066

11

2067

8611

            if !cbs.is_empty() {

2068

8600

                d = d.with_callbacks(cbs.into());

2069

8600

2070

8611

            bar_children.push(d);

2071

2072

2073

1206

        bar_children.push(

2074

1206

            Dom::create_div()

2075

1206

                .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_TAB_FILLER))

2076

1206

                .with_css_props(style.tab_filler_style.clone()),

2077

);

2078

2079

1206

        let tab_bar = Dom::create_div()

2080

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_TAB_BAR))

2081

1206

            .with_css_props(style.tab_bar_style.clone())

2082

1206

            .with_children(DomVec::from_vec(bar_children));

2083

2084

1206

        let mut group_doms: Vec<Dom> = match tabs.into_library_owned_vec().into_iter().nth(active_tab) {

2085

1204

            Some(active) => active

2086

1204

                .groups

2087

1204

                .into_library_owned_vec()

2088

1204

                .into_iter()

2089

4777

                .map(|g| group_dom(g, &style, behavior))

2090

1204

                .collect(),

2091

2

            None => Vec::new(),

2092

};

2093

2094

        // Structural mobile chrome shows ONE group at a time; the group list

2095

        // beside the content swaps them in (a runtime display patch - no app

2096

        // relayout, same mechanism as the gallery panel).

2097

1206

        if matches!(mode, RibbonChromeMode::Mobile) {

2098

3

            for (idx, g) in group_doms.iter_mut().enumerate() {

2099

3

                if idx != 0 {

2100

2

                    g.root.upsert_inline_css_property(P::const_display(LayoutDisplay::None));

2101

2

2102

2103

1205

2104

2105

        // ---- mobile chrome -------------------------------------------

2106

        // Same tabs and groups, touch presentation. Both chromes live in the

2107

        // tree and the viewport condition decides which is visible, so there

2108

        // is no second widget tree and no state to keep in sync.

2109

1206

        let active_label = tab_labels

2110

1206

            .get(active_tab)

2111

1206

            .cloned()

2112

1206

            .unwrap_or_else(|| AzString::from_const_str(""));

2113

2114

1206

        let mut mobile_tab_button = Dom::create_div()

2115

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_MOBILE_TAB_BUTTON))

2116

1206

            .with_css_props(style.mobile_tab_button_style.clone())

2117

1206

            .with_children(DomVec::from_vec(vec![

2118

1206

                Dom::create_p()

2119

1206

                    .with_css_props(style.mobile_tab_label_style.clone())

2120

1206

                    .with_children(DomVec::from_vec(vec![Dom::create_text_do_not_use_without_block_level_wrapper(active_label)])),

2121

1206

                Dom::create_icon(AzString::from_const_str("expand_more"))

2122

1206

                    .with_css_props(style.mobile_tab_arrow_style.clone()),

2123

            ]));

2124

2125

1206

        let mut mobile_cbs: Vec<CoreCallbackData> = Vec::with_capacity(2);

2126

1206

        if behavior.mobile_tab_overlay {

2127

1201

            mobile_cbs.push(CoreCallbackData {

2128

1201

                event: EventFilter::Hover(HoverEventFilter::MouseUp),

2129

1201

                callback: CoreCallback {

2130

1201

                    cb: on_ribbon_mobile_tab_click as usize,

2131

1201

                    ctx: azul_core::refany::OptionRefAny::None,

2132

1201

},

2133

1201

                refany: RefAny::new(MobileTabData { open: false }),

2134

1201

});

2135

1201

2136

        // Double tap collapses the band, exactly like a desktop double click.

2137

1206

        if behavior.collapsible {

2138

1201

            mobile_cbs.push(CoreCallbackData {

2139

1201

                event: EventFilter::Hover(HoverEventFilter::DoubleClick),

2140

1201

                callback: CoreCallback {

2141

1201

                    cb: on_ribbon_tab_double_click as usize,

2142

1201

                    ctx: azul_core::refany::OptionRefAny::None,

2143

1201

},

2144

1201

                refany: chrome.clone(),

2145

1201

});

2146

1201

2147

1206

        if !mobile_cbs.is_empty() {

2148

1201

            mobile_tab_button = mobile_tab_button.with_callbacks(mobile_cbs.into());

2149

1201

2150

2151

        // Full-screen tab picker, hidden until the button opens it.

2152

1206

        let overlay_items: Vec<Dom> = tab_labels

2153

1206

            .iter()

2154

1206

            .enumerate()

2155

8611

            .map(|(idx, label)| {

2156

8611

                let mut item = Dom::create_div()

2157

8611

                    .with_ids_and_classes(IdOrClassVec::from_const_slice(

2158

8611

                        CLS_MOBILE_TAB_OVERLAY_ITEM,

2159

))

2160

8611

                    .with_css_props(style.mobile_tab_overlay_item_style.clone())

2161

8611

                    .with_children(DomVec::from_vec(vec![Dom::create_p_with_text(label.clone())]));

2162

8611

                if has_callback {

2163

5

                    item = item.with_callbacks(vec![CoreCallbackData {

2164

5

                        event: EventFilter::Hover(HoverEventFilter::MouseUp),

2165

5

                        callback: CoreCallback {

2166

5

                            cb: on_ribbon_tab_click as usize,

2167

5

                            ctx: azul_core::refany::OptionRefAny::None,

2168

5

},

2169

5

                        refany: RefAny::new(TabClickData {

2170

5

                            tab_idx: idx,

2171

5

                            on_tab_click: on_tab_click.clone(),

2172

5

}),

2173

5

                    }].into());

2174

8606

2175

8611

                item

2176

8611

})

2177

1206

            .collect();

2178

1206

        let mobile_tab_overlay = Dom::create_div()

2179

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_MOBILE_TAB_OVERLAY))

2180

1206

            .with_css_props(style.mobile_tab_overlay_style.clone())

2181

1206

            .with_children(DomVec::from_vec(overlay_items));

2182

2183

        // Group list: on phones ONE group is visible and the rest are a

2184

        // scrollable list on the dominant-hand side.

2185

1206

        let group_list_items: Vec<Dom> = group_labels

2186

1206

            .iter()

2187

1206

            .enumerate()

2188

4779

            .map(|(idx, label)| {

2189

4769

                let item_style = if idx == 0 {

2190

1192

                    merged_style(

2191

1192

                        &style.mobile_group_list_item_style,

2192

1192

                        &style.mobile_group_list_item_selected_style,

2193

2194

                } else {

2195

3577

                    style.mobile_group_list_item_style.clone()

2196

};

2197

4769

                let mut item = Dom::create_div()

2198

4769

                    .with_ids_and_classes(IdOrClassVec::from_const_slice(

2199

4769

                        CLS_MOBILE_GROUP_LIST_ITEM,

2200

))

2201

4769

                    .with_css_props(item_style)

2202

4769

                    .with_children(DomVec::from_vec(vec![Dom::create_p_with_text(label.clone())]));

2203

4769

                if matches!(mode, RibbonChromeMode::Mobile) {

2204

3

                    item = item.with_callbacks(vec![CoreCallbackData {

2205

3

                        event: EventFilter::Hover(HoverEventFilter::MouseUp),

2206

3

                        callback: CoreCallback {

2207

3

                            cb: on_ribbon_mobile_group_click as usize,

2208

3

                            ctx: azul_core::refany::OptionRefAny::None,

2209

3

},

2210

3

                        refany: RefAny::new(GroupListClickData {

2211

3

                            group_idx: idx,

2212

3

                            selected_style: style.mobile_group_list_item_selected_style.clone(),

2213

3

                            base_style: style.mobile_group_list_item_style.clone(),

2214

3

}),

2215

3

                    }].into());

2216

4766

2217

4769

                item

2218

4769

})

2219

1206

            .collect();

2220

1206

        let mobile_group_list = Dom::create_div()

2221

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_MOBILE_GROUP_LIST))

2222

1206

            .with_css_props(style.mobile_group_list_style.clone())

2223

1206

            .with_children(DomVec::from_vec(group_list_items));

2224

2225

1206

        let content = Dom::create_div()

2226

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_CONTENT))

2227

1206

            .with_css_props(style.content_style.clone())

2228

1206

            .with_children(DomVec::from_vec(group_doms));

2229

2230

        // Structural modes pin the chrome's visibility unconditionally

2231

        // (inline resolution is last-wins, so the appended value overrides

2232

        // the baked viewport condition): the STRUCTURE is the breakpoint

2233

        // switch, not the stylesheet.

2234

1206

        let children = match mode {

2235

160

            RibbonChromeMode::Adaptive => vec![

2236

160

                tab_bar,

2237

160

                mobile_tab_button,

2238

160

                mobile_tab_overlay,

2239

160

                mobile_group_list,

2240

160

                content,

2241

],

2242

            RibbonChromeMode::Desktop => {

2243

1045

                let mut tab_bar = tab_bar;

2244

1045

                tab_bar.root.upsert_inline_css_property(P::const_display(LayoutDisplay::Flex));

2245

1045

                vec![tab_bar, content]

2246

2247

            RibbonChromeMode::Mobile => {

2248

1

                let mut mobile_tab_button = mobile_tab_button;

2249

1

                let mut mobile_group_list = mobile_group_list;

2250

1

                mobile_tab_button

2251

1

                    .root

2252

1

                    .upsert_inline_css_property(P::const_display(LayoutDisplay::Flex));

2253

1

                mobile_group_list

2254

1

                    .root

2255

1

                    .upsert_inline_css_property(P::const_display(LayoutDisplay::Flex));

2256

                // The group list and the ONE visible group share a ROW band

2257

                // ("scrollable list beside the content", the touch spec) -

2258

                // structurally, because the container is a column. List side

2259

                // = leading (right-handed default); a Handedness-driven

2260

                // row-reverse via a future mobile_band_style field can flip

2261

                // it without changing this structure.

2262

1

                let band = Dom::create_div()

2263

1

                    .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_MOBILE_BAND))

2264

1

                    .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![

2265

1

                        Cond::simple(P::const_display(LayoutDisplay::Flex)),

2266

1

                        Cond::simple(P::const_flex_direction(LayoutFlexDirection::Row)),

2267

1

                        Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

2268

1

                        cond_border_box(),

2269

]))

2270

1

                    .with_children(DomVec::from_vec(vec![mobile_group_list, content]));

2271

1

                vec![mobile_tab_button, mobile_tab_overlay, band]

2272

2273

};

2274

1206

        let mut container = Dom::create_div()

2275

1206

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_RIBBON))

2276

1206

            .with_css_props(style.container_style)

2277

1206

            .with_children(DomVec::from_vec(children));

2278

        // The chrome state (collapse flag) lives on the container as a

2279

        // DATASET so it follows node identity across RefreshDom rebuilds

2280

        // (see keep_old_ribbon_chrome). Without this, every rebuild reset

2281

        // collapsed=false: double-clicking a tab collapsed the band and the

2282

        // tab-click's own RefreshDom immediately forgot it. Only attached

2283

        // when a chrome behavior is active - an inert ribbon has no chrome

2284

        // state to persist (and `Dom` equality stays meaningful for it).

2285

1206

        if behavior.collapsible || behavior.peek_on_hover {

2286

1201

            container.root.set_dataset(azul_core::refany::OptionRefAny::Some(chrome));

2287

1201

            // The `as` is NOT trivial: it coerces the fn ITEM to a fn POINTER,

2288

1201

            // which is what `DatasetMergeCallback: From<...>` is implemented for.

2289

1201

            // Dropping it fails to satisfy the bound.

2290

1201

            #[allow(trivial_casts)]

2291

1201

            container.root.set_merge_callback(

2292

1201

                keep_old_ribbon_chrome as azul_core::dom::DatasetMergeCallbackType,

2293

1201

);

2294

1201

2295

1206

        container

2296

1206

2297

2298

2299

// -- DOM assembly helpers --

2300

2301

/// `base` with `extra` appended (inline CSS resolves last-wins, so `extra`

2302

/// overrides `base` where they collide).

2303

4717

fn merged_style(

2304

4717

    base: &CssPropertyWithConditionsVec,

2305

4717

    extra: &CssPropertyWithConditionsVec,

2306

4717

) -> CssPropertyWithConditionsVec {

2307

4717

    if extra.as_ref().is_empty() {

2308

        return base.clone();

2309

4717

2310

4717

    let mut v: Vec<Cond> = base.as_ref().to_vec();

2311

4717

    v.extend_from_slice(extra.as_ref());

2312

4717

    CssPropertyWithConditionsVec::from_vec(v)

2313

4717

2314

2315

/// Expands ribbon button config to the existing [`Button`] widget with the

2316

/// given part styles injected through `Button`'s public style fields.

2317

14268

fn styled_button(

2318

14268

    icon: AzString,

2319

14268

    label: AzString,

2320

14268

    trailing_icon: AzString,

2321

14268

    container_style: CssPropertyWithConditionsVec,

2322

14268

    icon_style: CssPropertyWithConditionsVec,

2323

14268

    label_style: CssPropertyWithConditionsVec,

2324

14268

    trailing_icon_style: CssPropertyWithConditionsVec,

2325

14268

    on_click: OptionButtonOnClick,

2326

14268

) -> Dom {

2327

14268

    let mut b = Button::create(label);

2328

14268

    b.icon = icon;

2329

14268

    b.trailing_icon = trailing_icon;

2330

14268

    b.container_style = container_style;

2331

14268

    b.icon_style = icon_style;

2332

14268

    b.label_style = label_style;

2333

14268

    b.trailing_icon_style = trailing_icon_style;

2334

14268

    b.on_click = on_click;

2335

14268

    b.dom()

2336

14268

2337

2338

10732

fn expand_ribbon_button(rb: RibbonButton, large: bool, s: &RibbonStyle) -> Dom {

2339

10732

    let base = if large { &s.large_button_style } else { &s.small_button_style };

2340

10732

    let container = if rb.toggled {

2341

1

        merged_style(base, &s.checked_style)

2342

    } else {

2343

10731

        base.clone()

2344

};

2345

10732

    let trailing = match rb.arrow {

2346

10730

        RibbonArrow::None => AzString::from_const_str(""),

2347

2

        RibbonArrow::Menu | RibbonArrow::Split => AzString::from_const_str("arrow_drop_down"),

2348

};

2349

10732

    let (icon_style, label_style) = if large {

2350

1094

        (s.large_icon_style.clone(), s.large_label_style.clone())

2351

    } else {

2352

9638

        (s.small_icon_style.clone(), s.small_label_style.clone())

2353

};

2354

10732

    styled_button(

2355

10732

        rb.icon,

2356

10732

        rb.label,

2357

10732

        trailing,

2358

10732

        container,

2359

10732

        icon_style,

2360

10732

        label_style,

2361

10732

        s.arrow_icon_style.clone(),

2362

10732

        rb.on_click,

2363

2364

10732

2365

2366

15131

fn item_dom(item: RibbonItem, s: &RibbonStyle, b: RibbonBehavior) -> Dom {

2367

15131

    match item {

2368

1094

        RibbonItem::LargeButton(rb) => expand_ribbon_button(rb, true, s),

2369

9638

        RibbonItem::SmallButton(rb) => expand_ribbon_button(rb, false, s),

2370

3215

        RibbonItem::Column(col) => Dom::create_div()

2371

3215

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_COLUMN))

2372

3215

            .with_css_props(s.column_style.clone())

2373

3215

            .with_children(DomVec::from_vec(

2374

3215

                col.items

2375

3215

                    .into_library_owned_vec()

2376

3215

                    .into_iter()

2377

9634

                    .map(|it| item_dom(it, s, b))

2378

3215

                    .collect(),

2379

)),

2380

1

        RibbonItem::Row(row) => Dom::create_div()

2381

1

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_ROW))

2382

1

            .with_css_props(s.row_style.clone())

2383

1

            .with_children(DomVec::from_vec(

2384

1

                row.items

2385

1

                    .into_library_owned_vec()

2386

1

                    .into_iter()

2387

2

                    .map(|it| item_dom(it, s, b))

2388

1

                    .collect(),

2389

)),

2390

1

        RibbonItem::Combo(combo) => combo.dom(),

2391

1

        RibbonItem::Drop(drop) => drop.dom(),

2392

1

        RibbonItem::Check(check) => check.dom(),

2393

1178

        RibbonItem::Gallery(gallery) => gallery_dom(gallery, s, b),

2394

1

        RibbonItem::Separator => Dom::create_div()

2395

1

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_SEPARATOR))

2396

1

            .with_css_props(s.separator_style.clone()),

2397

1

        RibbonItem::Custom(dom) => dom,

2398

2399

15131

2400

2401

/// Appended to the group style when [`RibbonGroup::fills_space`] is set:

2402

/// the group absorbs leftover width AND yields it under pressure, down to

2403

/// an explicit floor. The explicit `min-width` is load-bearing — it

2404

/// replaces the flex automatic minimum size, which taffy 0.10 does not

2405

/// collapse across the nested group > items > gallery-frame chain (see

2406

/// `layout/tests/flex_intrinsic_text.rs`).

2407

static GROUP_FILL_STYLE: &[Cond] = &[

2408

    Cond::simple(P::const_flex_grow(LayoutFlexGrow::const_new(1))),

2409

    Cond::simple(P::const_flex_shrink(LayoutFlexShrink {

2410

        inner: FloatValue::const_new(1),

2411

    })),

2412

    Cond::simple(P::const_min_width(LayoutMinWidth::const_px(160))),

2413

];

2414

2415

4769

fn group_dom(group: RibbonGroup, s: &RibbonStyle, b: RibbonBehavior) -> Dom {

2416

4769

    let RibbonGroup { label, items, launcher, fills_space } = group;

2417

2418

4769

    let item_doms: Vec<Dom> = items

2419

4769

        .into_library_owned_vec()

2420

4769

        .into_iter()

2421

5498

        .map(|it| item_dom(it, s, b))

2422

4769

        .collect();

2423

2424

4769

    let items_row = Dom::create_div()

2425

4769

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GROUP_ITEMS))

2426

4769

        .with_css_props(s.group_items_style.clone())

2427

4769

        .with_children(DomVec::from_vec(item_doms));

2428

2429

4769

    let has_launcher = launcher.is_some();

2430

4769

    let mut footer_children: Vec<Dom> = Vec::with_capacity(3);

2431

4769

    if has_launcher {

2432

2

        // Balances the launcher's width so the caption stays centered.

2433

2

        footer_children.push(

2434

2

            Dom::create_div()

2435

2

                .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_FOOTER_SPACER))

2436

2

                .with_css_props(s.footer_spacer_style.clone()),

2437

2

);

2438

4767

2439

4769

    footer_children.push(

2440

4769

        Dom::create_p()

2441

4769

            .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GROUP_LABEL))

2442

4769

            .with_css_props(s.group_label_style.clone())

2443

4769

            .with_children(DomVec::from_vec(vec![Dom::create_text_do_not_use_without_block_level_wrapper(label)])),

2444

);

2445

4769

    if let Some(l) = launcher.into_option() {

2446

2

        footer_children.push(styled_button(

2447

2

            AzString::from_const_str("south_east"),

2448

2

            AzString::from_const_str(""),

2449

2

            AzString::from_const_str(""),

2450

2

            s.launcher_button_style.clone(),

2451

2

            s.launcher_icon_style.clone(),

2452

2

            s.small_label_style.clone(),

2453

2

            s.arrow_icon_style.clone(),

2454

2

            Some(l).into(),

2455

2

));

2456

4767

2457

4769

    let footer = Dom::create_div()

2458

4769

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GROUP_FOOTER))

2459

4769

        .with_css_props(s.group_footer_style.clone())

2460

4769

        .with_children(DomVec::from_vec(footer_children));

2461

2462

4769

    let group_style = if fills_space {

2463

1170

        merged_style(

2464

1170

            &s.group_style,

2465

1170

            &CssPropertyWithConditionsVec::from_const_slice(GROUP_FILL_STYLE),

2466

2467

    } else {

2468

3599

        s.group_style.clone()

2469

};

2470

2471

4769

    Dom::create_div()

2472

4769

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GROUP))

2473

4769

        .with_css_props(group_style)

2474

4769

        .with_children(DomVec::from_vec(vec![items_row, footer]))

2475

4769

2476

2477

1178

fn gallery_dom(gallery: RibbonGallery, s: &RibbonStyle, b: RibbonBehavior) -> Dom {

2478

1178

    let RibbonGallery { cells, selected, on_select } = gallery;

2479

1178

    let has_callback = on_select.is_some();

2480

1178

    let cells = cells.into_library_owned_vec();

2481

2482

    // The cells are built twice: once for the in-ribbon strip and once for

2483

    // the expansion panel, so "More" can show every cell without a relayout.

2484

2354

    let build_cells = |in_panel: bool| -> Vec<Dom> {

2485

2354

        let mut out: Vec<Dom> = Vec::with_capacity(cells.len());

2486

9940

        for (idx, cell) in cells.iter().enumerate() {

2487

9940

            let (classes, cell_style) = if idx == selected {

2488

2354

2489

2354

                    CLS_GALLERY_CELL_SELECTED,

2490

2354

                    merged_style(&s.gallery_cell_style, &s.gallery_cell_selected_style),

2491

2354

2492

            } else {

2493

7586

                (CLS_GALLERY_CELL, s.gallery_cell_style.clone())

2494

};

2495

9940

            let label = Dom::create_p()

2496

9940

                .with_css_props(s.gallery_cell_label_style.clone())

2497

9940

                .with_children(DomVec::from_vec(vec![Dom::create_text_do_not_use_without_block_level_wrapper(cell.label.clone())]));

2498

9940

            let mut d = Dom::create_div()

2499

9940

                .with_ids_and_classes(IdOrClassVec::from_const_slice(classes))

2500

9940

                .with_css_props(cell_style)

2501

9940

                .with_children(DomVec::from_vec(vec![cell.preview.clone(), label]));

2502

9940

            if has_callback || b.auto_select_gallery {

2503

9938

                d = d.with_callbacks(vec![CoreCallbackData {

2504

9938

                    event: EventFilter::Hover(HoverEventFilter::MouseUp),

2505

9938

                    callback: CoreCallback {

2506

9938

                        cb: on_ribbon_gallery_cell_click as usize,

2507

9938

                        ctx: azul_core::refany::OptionRefAny::None,

2508

9938

},

2509

9938

                    refany: RefAny::new(GalleryCellClickData {

2510

9938

                        cell_idx: idx,

2511

9938

                        on_select: on_select.clone(),

2512

9938

                        auto_select: b.auto_select_gallery,

2513

9938

                        in_panel,

2514

9938

                        selected_style: s.gallery_cell_selected_style.clone(),

2515

9938

                        base_style: s.gallery_cell_style.clone(),

2516

9938

}),

2517

9938

                }].into());

2518

9938

2519

9940

            out.push(d);

2520

2521

2354

out

2522

2354

};

2523

2524

1178

    let strip = Dom::create_div()

2525

1178

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY_STRIP))

2526

1178

        .with_css_props(s.gallery_strip_style.clone())

2527

1178

        .with_children(DomVec::from_vec(build_cells(false)));

2528

2529

    // Spinner column: scroll-up, scroll-down, and the "More" button that

2530

    // toggles the expansion panel (the classic office-suite "More" chevron-over-bar).

2531

1178

    let spinner_icons = ["expand_less", "expand_more", "arrow_drop_down"];

2532

1178

    let spinner_buttons: Vec<Dom> = spinner_icons

2533

1178

        .iter()

2534

1178

        .enumerate()

2535

3534

        .map(|(i, icon)| {

2536

3534

            let mut btn = styled_button(

2537

3534

                AzString::from(*icon),

2538

3534

                AzString::from_const_str(""),

2539

3534

                AzString::from_const_str(""),

2540

3534

                s.gallery_spinner_button_style.clone(),

2541

3534

                s.gallery_spinner_icon_style.clone(),

2542

3534

                s.small_label_style.clone(),

2543

3534

                s.arrow_icon_style.clone(),

2544

3534

                OptionButtonOnClick::None,

2545

);

2546

            // The third button is "More": it expands the panel.

2547

3534

            if i == 2 && b.expandable_gallery {

2548

1176

                btn = btn

2549

1176

                    .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY_MORE));

2550

1176

                btn = btn.with_callbacks(vec![CoreCallbackData {

2551

1176

                    event: EventFilter::Hover(HoverEventFilter::MouseUp),

2552

1176

                    callback: CoreCallback {

2553

1176

                        cb: on_ribbon_gallery_more_click as usize,

2554

1176

                        ctx: azul_core::refany::OptionRefAny::None,

2555

1176

},

2556

1176

                    refany: RefAny::new(GalleryMoreData { open: false }),

2557

1176

                }].into());

2558

2358

2559

3534

btn

2560

3534

})

2561

1178

        .collect();

2562

2563

1178

    let spinner = Dom::create_div()

2564

1178

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY_SPINNER))

2565

1178

        .with_css_props(s.gallery_spinner_style.clone())

2566

1178

        .with_children(DomVec::from_vec(spinner_buttons));

2567

2568

1178

    let frame = Dom::create_div()

2569

1178

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY))

2570

1178

        .with_css_props(s.gallery_frame_style.clone())

2571

1178

        .with_children(DomVec::from_vec(vec![strip, spinner]));

2572

2573

1178

    if !b.expandable_gallery {

2574

2

        return frame;

2575

1176

2576

2577

    // The expansion panel is an absolutely-positioned wrapped grid of every

2578

    // cell, hidden until "More" is clicked (the popover/combobox pattern).

2579

1176

    let panel = Dom::create_div()

2580

1176

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY_PANEL))

2581

1176

        .with_css_props(s.gallery_panel_style.clone())

2582

1176

        .with_children(DomVec::from_vec(build_cells(true)));

2583

2584

1176

    Dom::create_div()

2585

1176

        .with_ids_and_classes(IdOrClassVec::from_const_slice(CLS_GALLERY_WRAPPER))

2586

1176

        .with_css_props(s.gallery_wrapper_style.clone())

2587

1176

        .with_children(DomVec::from_vec(vec![frame, panel]))

2588

1178

2589

2590

// -- Trampolines --

2591

2592

/// Which chrome [`Ribbon::dom`]-family builder emits.

2593

#[derive(Debug, Clone, Copy, PartialEq, Eq)]

2594

enum RibbonChromeMode {

2595

    /// Both chromes in one tree; inline viewport conditions pick one.

2596

    Adaptive,

2597

    /// Desktop chrome only (tab strip + content).

2598

    Desktop,

2599

    /// Touch chrome only (tab button + overlay + group list + one group).

2600

    Mobile,

2601

2602

2603

/// Per-list-entry payload for the mobile group switcher.

2604

struct GroupListClickData {

2605

    group_idx: usize,

2606

    selected_style: CssPropertyWithConditionsVec,

2607

    base_style: CssPropertyWithConditionsVec,

2608

2609

2610

/// Tapping a group-list entry shows THAT group in the content band and moves

2611

/// the highlight - a runtime display patch, no app relayout (the same

2612

/// chokepoint mechanism the gallery panel uses). Targets resolve BY CLASS

2613

/// from the ribbon container, per the widget convention.

2614

extern "C" fn on_ribbon_mobile_group_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2615

    let hit = info.get_hit_node();

2616

    let Some(mut data) = refany.downcast_mut::<GroupListClickData>() else {

2617

        return Update::DoNothing;

2618

};

2619

    let group_idx = data.group_idx;

2620

    let selected_style = data.selected_style.clone();

2621

    let base_style = data.base_style.clone();

2622

    drop(data);

2623

2624

    let Some(ribbon) = ancestor_with_class(&info, hit, RIBBON_CONTAINER_CLASS) else {

2625

        return Update::DoNothing;

2626

};

2627

2628

    // Swap the visible group inside the content band (the content sits

2629

    // INSIDE the mobile band wrapper, so resolve by descendant search).

2630

    if let Some(content) = descendant_with_class(&info, ribbon, RIBBON_CONTENT_CLASS) {

2631

        let mut group = info.get_first_child(content);

2632

        let mut idx = 0_usize;

2633

        while let Some(g) = group {

2634

            let display = if idx == group_idx {

2635

                LayoutDisplay::Flex

2636

            } else {

2637

                LayoutDisplay::None

2638

};

2639

            info.set_css_property(g, P::const_display(display));

2640

            group = info.get_next_sibling(g);

2641

            idx += 1;

2642

2643

2644

2645

    // Move the highlight along the list (unconditional props only, like the

2646

    // gallery cell highlight). For a DE-selected entry, property types the

2647

    // selected style sets but the base style does not are reset to Initial -

2648

    // set_css_property(Initial) REMOVES the runtime override, so the entry

2649

    // falls back to its inline style instead of keeping the stale highlight.

2650

    let item = ancestor_with_class(&info, hit, MOBILE_GROUP_LIST_ITEM_CLASS).unwrap_or(hit);

2651

    if let Some(list) = info.get_parent(item) {

2652

        let mut sibling = info.get_first_child(list);

2653

        while let Some(entry) = sibling {

2654

            if entry == item {

2655

                for prop in selected_style.as_ref() {

2656

                    if prop.apply_if.as_ref().is_empty() {

2657

                        info.set_css_property(entry, prop.property.clone());

2658

2659

2660

            } else {

2661

                for prop in base_style.as_ref() {

2662

                    if prop.apply_if.as_ref().is_empty() {

2663

                        info.set_css_property(entry, prop.property.clone());

2664

2665

2666

                for prop in selected_style.as_ref() {

2667

                    if !prop.apply_if.as_ref().is_empty() {

2668

                        continue;

2669

2670

                    let ty = prop.property.get_type();

2671

                    let in_base = base_style.as_ref().iter().any(|b| {

2672

                        b.apply_if.as_ref().is_empty() && b.property.get_type() == ty

2673

});

2674

                    if !in_base {

2675

                        info.set_css_property(entry, props::property::CssProperty::initial(ty));

2676

2677

2678

2679

            sibling = info.get_next_sibling(entry);

2680

2681

2682

2683

    Update::DoNothing

2684

2685

2686

/// Dataset merge for the ribbon container: chrome state (collapse) must

2687

/// survive app-driven rebuilds (any callback returning `RefreshDom` - the

2688

/// ribbon's own tab switch does), so keep the OLD allocation wholesale.

2689

/// `diff::transfer_states` then re-points every tab callback refany (they

2690

/// are clones of this dataset) onto the kept allocation, so the handlers

2691

/// keep reading the persistent state with no further wiring.

2692

extern "C" fn keep_old_ribbon_chrome(_new: RefAny, old: RefAny) -> RefAny {

2693

old

2694

2695

2696

struct TabClickData {

2697

    tab_idx: usize,

2698

    on_tab_click: OptionRibbonOnTabClick,

2699

2700

2701

4

extern "C" fn on_ribbon_tab_click(mut refany: RefAny, info: CallbackInfo) -> Update {

2702

4

    let Some(mut data) = refany.downcast_mut::<TabClickData>() else {

2703

1

        return Update::DoNothing;

2704

};

2705

3

    let idx = data.tab_idx;

2706

3

    match data.on_tab_click.as_mut() {

2707

3

        Some(RibbonOnTabClick { refany, callback }) => {

2708

3

            (callback.cb)(refany.clone(), info, idx)

2709

2710

        None => Update::DoNothing,

2711

2712

4

2713

2714

/// Private chrome state for the collapse / hover-peek behaviors. Lives in a

2715

/// `RefAny` minted inside [`Ribbon::dom`] and shared by every tab header, so

2716

/// the ribbon can drive its own chrome without any application state.

2717

struct RibbonChromeState {

2718

    collapsed: bool,

2719

2720

2721

/// The content band is the tab bar's next sibling; from a tab header that is

2722

/// `parent(tab) -> next_sibling`.

2723

/// The content band of the ribbon that owns `hit`'s tab header, resolved BY

2724

/// CLASS: walk up to the ribbon container, then scan its children for the

2725

/// content class. Positional navigation (`next_sibling(parent(tab))`) broke

2726

/// the moment the container grew more children — the mobile chrome sits

2727

/// between the tab bar and the content band, so a double-click "collapsed"

2728

/// the (already hidden) mobile tab button while the content stayed visible.

2729

fn content_node_of_tab(info: &CallbackInfo, hit: DomNodeId) -> Option<DomNodeId> {

2730

    let tab = ancestor_with_class(info, hit, RIBBON_TAB_CLASS)

2731

        .or_else(|| ancestor_with_class(info, hit, MOBILE_TAB_BUTTON_CLASS))?;

2732

    let ribbon = ancestor_with_class(info, tab, RIBBON_CONTAINER_CLASS)?;

2733

    descendant_with_class(info, ribbon, RIBBON_CONTENT_CLASS)

2734

2735

2736

fn set_content_visible(info: &mut CallbackInfo, content: DomNodeId, visible: bool) {

2737

    let display = if visible {

2738

        LayoutDisplay::Flex

2739

    } else {

2740

        LayoutDisplay::None

2741

};

2742

    info.set_css_property(content, P::const_display(display));

2743

2744

2745

/// Double-click on a tab header toggles the collapsed state of the content

2746

/// band (the classic office-suite "Collapse the Ribbon").

2747

extern "C" fn on_ribbon_tab_double_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2748

    let hit = info.get_hit_node();

2749

    let Some(content) = content_node_of_tab(&info, hit) else {

2750

        return Update::DoNothing;

2751

};

2752

    let Some(mut state) = refany.downcast_mut::<RibbonChromeState>() else {

2753

        return Update::DoNothing;

2754

};

2755

    state.collapsed = !state.collapsed;

2756

    let collapsed = state.collapsed;

2757

    drop(state);

2758

    set_content_visible(&mut info, content, !collapsed);

2759

    Update::DoNothing

2760

2761

2762

/// While collapsed, hovering a tab header peeks the content band.

2763

extern "C" fn on_ribbon_tab_peek_enter(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2764

    let hit = info.get_hit_node();

2765

    let Some(content) = content_node_of_tab(&info, hit) else {

2766

        return Update::DoNothing;

2767

};

2768

    let Some(state) = refany.downcast_ref::<RibbonChromeState>() else {

2769

        return Update::DoNothing;

2770

};

2771

    let collapsed = state.collapsed;

2772

    drop(state);

2773

    if collapsed {

2774

        set_content_visible(&mut info, content, true);

2775

2776

    Update::DoNothing

2777

2778

2779

/// Leaving the tab header hides the peeked band again.

2780

extern "C" fn on_ribbon_tab_peek_leave(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2781

    let hit = info.get_hit_node();

2782

    let Some(content) = content_node_of_tab(&info, hit) else {

2783

        return Update::DoNothing;

2784

};

2785

    let Some(state) = refany.downcast_ref::<RibbonChromeState>() else {

2786

        return Update::DoNothing;

2787

};

2788

    let collapsed = state.collapsed;

2789

    drop(state);

2790

    if collapsed {

2791

        set_content_visible(&mut info, content, false);

2792

2793

    Update::DoNothing

2794

2795

2796

/// Per-mobile-tab-button state: whether the tab overlay is open.

2797

struct MobileTabData {

2798

    open: bool,

2799

2800

2801

/// The mobile tab button opens/closes the full-screen tab picker, which is

2802

/// its next sibling in the ribbon container.

2803

extern "C" fn on_ribbon_mobile_tab_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2804

    let hit = info.get_hit_node();

2805

    let Some(button) = ancestor_with_class(&info, hit, MOBILE_TAB_BUTTON_CLASS) else {

2806

        return Update::DoNothing;

2807

};

2808

    let Some(overlay) = info.get_next_sibling(button) else {

2809

        return Update::DoNothing;

2810

};

2811

    let Some(mut data) = refany.downcast_mut::<MobileTabData>() else {

2812

        return Update::DoNothing;

2813

};

2814

    data.open = !data.open;

2815

    let open = data.open;

2816

    drop(data);

2817

    info.set_css_property(

2818

        overlay,

2819

        P::const_display(if open { LayoutDisplay::Flex } else { LayoutDisplay::None }),

2820

);

2821

    Update::DoNothing

2822

2823

2824

/// Per-"More"-button state: whether the expansion panel is open.

2825

struct GalleryMoreData {

2826

    open: bool,

2827

2828

2829

/// Walks up from `start` (inclusive) to the first ancestor carrying `class`.

2830

///

2831

/// Hit nodes are not stable: a click on a button can report the button or

2832

/// the icon/label node inside it, and widgets may gain wrapper levels. So

2833

/// the ribbon's handlers locate their targets by CLASS rather than by

2834

/// counting `get_parent` hops - the same identifiers the public CSS API is

2835

/// built on. The walk is bounded so a malformed tree cannot spin.

2836

2

fn ancestor_with_class(

2837

2

    info: &CallbackInfo,

2838

2

    start: DomNodeId,

2839

2

    class: &str,

2840

2

) -> Option<DomNodeId> {

2841

2

    let mut current = Some(start);

2842

4

    for _ in 0..16 {

2843

4

        let node = current?;

2844

2

        if info

2845

2

            .get_node_classes(node)

2846

2

            .as_ref()

2847

2

            .iter()

2848

2

            .any(|c| c.as_str() == class)

2849

2850

            return Some(node);

2851

2

2852

2

        current = info.get_parent(node);

2853

2854

    None

2855

2

2856

2857

/// Breadth-first search for the first descendant of `root` carrying `class`,

2858

/// bounded to 64 visited nodes. The ribbon's structural chromes nest parts

2859

/// at different depths (the mobile band wraps group list + content), so

2860

/// class resolution must not assume direct children.

2861

fn descendant_with_class(

2862

    info: &CallbackInfo,

2863

    root: DomNodeId,

2864

    class: &str,

2865

) -> Option<DomNodeId> {

2866

    let mut queue: Vec<DomNodeId> = Vec::with_capacity(8);

2867

    let mut child = info.get_first_child(root);

2868

    while let Some(n) = child {

2869

        queue.push(n);

2870

        child = info.get_next_sibling(n);

2871

2872

    let mut visited = 0_usize;

2873

    let mut i = 0_usize;

2874

    while i < queue.len() && visited < 64 {

2875

        let node = queue[i];

2876

        i += 1;

2877

        visited += 1;

2878

        if info

2879

            .get_node_classes(node)

2880

            .as_ref()

2881

            .iter()

2882

            .any(|cl| cl.as_str() == class)

2883

2884

            return Some(node);

2885

2886

        let mut child = info.get_first_child(node);

2887

        while let Some(n) = child {

2888

            queue.push(n);

2889

            child = info.get_next_sibling(n);

2890

2891

2892

    None

2893

2894

2895

/// The "More" button toggles the expansion panel (the gallery wrapper's

2896

/// last child).

2897

extern "C" fn on_ribbon_gallery_more_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2898

    let hit = info.get_hit_node();

2899

    let Some(wrapper) = ancestor_with_class(&info, hit, GALLERY_WRAPPER_CLASS) else {

2900

        return Update::DoNothing;

2901

};

2902

    let Some(panel) = info.get_last_child(wrapper) else {

2903

        return Update::DoNothing;

2904

};

2905

    let Some(mut data) = refany.downcast_mut::<GalleryMoreData>() else {

2906

        return Update::DoNothing;

2907

};

2908

    data.open = !data.open;

2909

    let open = data.open;

2910

    drop(data);

2911

    let display = if open {

2912

        LayoutDisplay::Flex

2913

    } else {

2914

        LayoutDisplay::None

2915

};

2916

    info.set_css_property(panel, P::const_display(display));

2917

    Update::DoNothing

2918

2919

2920

struct GalleryCellClickData {

2921

    cell_idx: usize,

2922

    on_select: OptionRibbonGalleryOnSelect,

2923

    /// Move the selection highlight without an app relayout.

2924

    auto_select: bool,

2925

    /// Cells in the expansion panel also close the panel when picked.

2926

    in_panel: bool,

2927

    selected_style: CssPropertyWithConditionsVec,

2928

    base_style: CssPropertyWithConditionsVec,

2929

2930

2931

2

extern "C" fn on_ribbon_gallery_cell_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {

2932

2

    let hit = info.get_hit_node();

2933

2

    let Some(mut data) = refany.downcast_mut::<GalleryCellClickData>() else {

2934

        return Update::DoNothing;

2935

};

2936

2

    let idx = data.cell_idx;

2937

2

    let auto_select = data.auto_select;

2938

2

    let in_panel = data.in_panel;

2939

2

    let selected_style = data.selected_style.clone();

2940

2

    let base_style = data.base_style.clone();

2941

2

    let user = data.on_select.clone();

2942

2

    drop(data);

2943

2944

    // Default behavior: move the highlight to the clicked cell immediately,

2945

    // so the gallery feels live even if the app does not re-render. The hit

2946

    // node may be the cell's preview or label, so resolve the cell by class.

2947

2

    let cell = ancestor_with_class(&info, hit, GALLERY_CELL_CLASS).unwrap_or(hit);

2948

2

    if auto_select {

2949

        if let Some(strip) = info.get_parent(cell) {

2950

            let mut sibling = info.get_first_child(strip);

2951

            while let Some(cell_node) = sibling {

2952

                let style = if cell_node == cell { &selected_style } else { &base_style };

2953

                for prop in style.as_ref() {

2954

                    if prop.apply_if.as_ref().is_empty() {

2955

                        info.set_css_property(cell_node, prop.property.clone());

2956

2957

2958

                sibling = info.get_next_sibling(cell_node);

2959

2960

2961

        // Picking from the expansion panel closes it.

2962

        if in_panel {

2963

            if let Some(panel) = info.get_parent(cell) {

2964

                info.set_css_property(panel, P::const_display(LayoutDisplay::None));

2965

2966

2967

2

2968

2969

2

    match user.into_option() {

2970

1

        Some(RibbonGalleryOnSelect { refany, callback }) => {

2971

1

            (callback.cb)(refany, info, idx)

2972

2973

1

        None => Update::DoNothing,

2974

2975

2

2976

2977

impl From<Ribbon> for Dom {

2978

1

    fn from(r: Ribbon) -> Self { r.dom() }

2979

2980

2981

#[cfg(test)]

2982

mod tests {

2983

    use std::{

2984

        collections::BTreeMap,

2985

        sync::{Arc, Mutex},

2986

};

2987

2988

    use azul_core::{

2989

        dom::{DomId, DomNodeId, NodeId, NodeType},

2990

        geom::OptionLogicalPosition,

2991

        gl::OptionGlContextPtr,

2992

        hit_test::ScrollPosition,

2993

        refany::OptionRefAny,

2994

        resources::RendererResources,

2995

        styled_dom::NodeHierarchyItemId,

2996

        window::{MonitorVec, RawWindowHandle},

2997

};

2998

    use azul_css::{props::property::CssProperty, system::SystemStyle};

2999

    use rust_fontconfig::FcFontCache;

3000

3001

    use super::*;

3002

    #[cfg(feature = "icu")]

3003

    use crate::icu::IcuLocalizerHandle;

3004

    use crate::{

3005

        callbacks::{CallbackChange, CallbackInfoRefData, ExternalSystemCallbacks},

3006

        window::LayoutWindow,

3007

        window_state::FullWindowState,

3008

};

3009

3010

    // ------------------------------------------------------------------

3011

    // Helpers

3012

    // ------------------------------------------------------------------

3013

3014

227

    fn has_class(node: &Dom, name: &str) -> bool {

3015

227

        node.root

3016

227

            .get_ids_and_classes()

3017

227

            .as_ref()

3018

227

            .iter()

3019

229

            .any(|c| matches!(c, Class(s) if s.as_str() == name))

3020

227

3021

3022

    /// Text of a label node, looking through the `<p>` block wrapper the

3023

    /// label convention mandates (`p > text`).

3024

16

    fn text_of(node: &Dom) -> Option<&str> {

3025

16

        match node.root.get_node_type() {

3026

4

            NodeType::Text(s) => Some(s.as_ref().as_str()),

3027

12

            NodeType::P => match node.children.as_ref() {

3028

12

                [only] => match only.root.get_node_type() {

3029

12

                    NodeType::Text(s) => Some(s.as_ref().as_str()),

3030

                    _ => None,

3031

},

3032

                _ => None,

3033

},

3034

            _ => None,

3035

3036

16

3037

3038

    /// USER convention (2026-08-12): widget-emitted text is never a raw

3039

    /// `create_text` child — every label is `<p>` wrapping exactly one text

3040

    /// node. Raw text as a direct flex child takes the anonymous-box path

3041

    /// that made "PAGE LAYOUT" wrap and the group captions de-center live.

3042

    /// Walks the full desktop + mobile chrome (tabs, captions, buttons,

3043

    /// gallery, launcher) and flags every Text node under a non-P parent.

3044

    #[test]

3045

1

    fn every_ribbon_label_is_block_formatted_no_raw_text_children() {

3046

        extern "C" fn noop_launcher_click(

3047

            _data: RefAny,

3048

            _info: CallbackInfo,

3049

        ) -> Update {

3050

            Update::DoNothing

3051

3052

67

        fn walk(node: &Dom, parent_is_p: bool, bad: &mut Vec<String>) {

3053

67

            if let NodeType::Text(t) = node.root.get_node_type() {

3054

13

                if !parent_is_p {

3055

                    bad.push(t.as_ref().as_str().to_string());

3056

13

3057

54

3058

67

            let is_p = matches!(node.root.get_node_type(), NodeType::P);

3059

67

            for c in node.children.as_ref() {

3060

66

                walk(c, is_p, bad);

3061

66

3062

67

3063

1

        let cells = vec![

3064

1

            RibbonGalleryCell::new(

3065

1

                Dom::create_div(), // user preview content — exempt from the convention

3066

1

                "Style 0".into(),

3067

),

3068

];

3069

1

        let tab = RibbonTab::new("HOME".into())

3070

1

            .with_group(

3071

1

                RibbonGroup::new("Clipboard".into())

3072

1

                    .with_item(RibbonItem::LargeButton(RibbonButton::new(

3073

1

                        "content_paste".into(),

3074

1

                        "Paste".into(),

3075

1

)))

3076

1

                    .with_launcher(

3077

1

                        RefAny::new(0usize),

3078

1

                        noop_launcher_click as crate::widgets::button::ButtonOnClickCallbackType,

3079

),

3080

3081

1

            .with_group(

3082

1

                RibbonGroup::new("Styles".into())

3083

1

                    .with_item(RibbonItem::Gallery(RibbonGallery::new(cells.into()))),

3084

);

3085

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![

3086

1

            tab,

3087

1

            RibbonTab::new("PAGE LAYOUT".into()),

3088

]))

3089

1

        .with_app_button(RibbonAppButton::new("FILE".into()))

3090

1

        .dom();

3091

1

        let mut bad = Vec::new();

3092

1

        walk(&dom, false, &mut bad);

3093

1

        assert!(

3094

1

            bad.is_empty(),

3095

            "raw text nodes outside a <p> wrapper: {bad:?}"

3096

);

3097

1

3098

3099

    /// The text of a box's single label child (tabs / app button).

3100

5

    fn label_text(node: &Dom) -> Option<&str> {

3101

5

        node.children.as_ref().first().and_then(text_of)

3102

5

3103

3104

8

    fn icon_name_of(node: &Dom) -> Option<&str> {

3105

8

        match node.root.get_node_type() {

3106

8

            NodeType::Icon(s) => Some(s.as_ref().as_str()),

3107

            _ => None,

3108

3109

8

3110

3111

10

    fn inline_props(node: &Dom) -> Vec<CssProperty> {

3112

10

        node.root

3113

10

            .style

3114

10

            .iter_inline_properties()

3115

185

            .map(|(p, _)| p.clone())

3116

10

            .collect()

3117

10

3118

3119

11

    fn style_props(style: &CssPropertyWithConditionsVec) -> Vec<CssProperty> {

3120

165

        style.as_ref().iter().map(|c| c.property.clone()).collect()

3121

11

3122

3123

108

    fn recursive_descendants(node: &Dom) -> usize {

3124

108

        node.children

3125

108

            .as_ref()

3126

108

            .iter()

3127

108

            .map(|c| 1 + recursive_descendants(c))

3128

108

            .sum()

3129

108

3130

3131

    /// `(tab bar, content)` of a rendered ribbon DOM.

3132

///

3133

    /// The root also carries the mobile chrome (tab button, tab overlay,

3134

    /// group list), which the viewport conditions hide on desktop - so the

3135

    /// parts are located by CLASS, not by index.

3136

26

    fn parts(dom: &Dom) -> (&Dom, &Dom) {

3137

52

        let by_class = |name: &str| {

3138

52

            dom.children

3139

52

                .as_ref()

3140

52

                .iter()

3141

156

                .find(|c| has_class(c, name))

3142

52

                .unwrap_or_else(|| panic!("a ribbon DOM has a {name} child"))

3143

52

};

3144

26

3145

26

            by_class("__azul-native-ribbon-tabbar"),

3146

26

            by_class("__azul-native-ribbon-content"),

3147

26

3148

26

3149

3150

    /// `(items row, footer)` of the `n`-th rendered group.

3151

17

    fn group_parts(content: &Dom, n: usize) -> (&Dom, &Dom) {

3152

17

        let group = &content.children.as_ref()[n];

3153

17

        let ch = group.children.as_ref();

3154

17

        assert_eq!(ch.len(), 2, "a group is exactly [items, footer]");

3155

17

        (&ch[0], &ch[1])

3156

17

3157

3158

19

    fn tabs(n: usize) -> RibbonTabVec {

3159

19

        let mut v = Vec::with_capacity(n);

3160

53

        for i in 0..n {

3161

53

            v.push(RibbonTab::new(AzString::from(format!("t{i}"))));

3162

53

3163

19

        RibbonTabVec::from_vec(v)

3164

19

3165

3166

9

    fn small_btn(icon: &str, label: &str) -> RibbonButton {

3167

9

        RibbonButton::new(AzString::from(icon), AzString::from(label))

3168

9

3169

3170

    struct IndexLog {

3171

        seen: Vec<usize>,

3172

3173

3174

4

    extern "C" fn record_index(mut data: RefAny, _: CallbackInfo, index: usize) -> Update {

3175

4

        if let Some(mut log) = data.downcast_mut::<IndexLog>() {

3176

4

            log.seen.push(index);

3177

4

3178

4

        Update::RefreshDom

3179

4

3180

3181

2

    fn log_indices(data: &mut RefAny) -> Vec<usize> {

3182

2

        data.downcast_ref::<IndexLog>()

3183

2

            .expect("payload must still be an IndexLog")

3184

2

            .seen

3185

2

            .clone()

3186

2

3187

3188

    /// Invokes `cb` (a ribbon trampoline) with a minimal `CallbackInfo`. The

3189

    /// trampolines never read the DOM, so the `LayoutWindow` holds no layout

3190

    /// results - if they ever start touching them, these tests notice.

3191

6

    fn run_trampoline(

3192

6

        cb: extern "C" fn(RefAny, CallbackInfo) -> Update,

3193

6

        data: RefAny,

3194

6

    ) -> (Update, Vec<CallbackChange>) {

3195

6

        let layout_window =

3196

6

            LayoutWindow::new(FcFontCache::default()).expect("LayoutWindow::new failed");

3197

3198

6

        let renderer_resources = RendererResources::default();

3199

6

        let previous_window_state: Option<FullWindowState> = None;

3200

6

        let current_window_state = FullWindowState::default();

3201

6

        let gl_context = OptionGlContextPtr::None;

3202

6

        let scroll_states: BTreeMap<DomId, BTreeMap<NodeHierarchyItemId, ScrollPosition>> =

3203

6

            BTreeMap::new();

3204

6

        let window_handle = RawWindowHandle::Unsupported;

3205

6

        let system_callbacks = ExternalSystemCallbacks::rust_internal();

3206

3207

6

        let ref_data = CallbackInfoRefData {

3208

6

            layout_window: &layout_window,

3209

6

            renderer_resources: &renderer_resources,

3210

6

            previous_window_state: &previous_window_state,

3211

6

            current_window_state: &current_window_state,

3212

6

            gl_context: &gl_context,

3213

6

            current_scroll_manager: &scroll_states,

3214

6

            current_window_handle: &window_handle,

3215

6

            system_callbacks: &system_callbacks,

3216

6

            system_style: Arc::new(SystemStyle::default()),

3217

6

            monitors: Arc::new(Mutex::new(MonitorVec::from_const_slice(&[]))),

3218

6

            #[cfg(feature = "icu")]

3219

6

            icu_localizer: IcuLocalizerHandle::default(),

3220

6

            ctx: OptionRefAny::None,

3221

6

};

3222

3223

6

        let changes: Arc<Mutex<Vec<CallbackChange>>> = Arc::new(Mutex::new(Vec::new()));

3224

3225

6

        let info = CallbackInfo::new(

3226

6

            &ref_data,

3227

6

            &changes,

3228

6

            DomNodeId {

3229

6

                dom: DomId::ROOT_ID,

3230

6

                node: NodeHierarchyItemId::from_crate_internal(Some(NodeId::new(0))),

3231

6

},

3232

6

            OptionLogicalPosition::None,

3233

6

            OptionLogicalPosition::None,

3234

);

3235

3236

6

        let update = cb(data, info);

3237

6

        let recorded = core::mem::take(&mut *changes.lock().expect("change log poisoned"));

3238

6

        (update, recorded)

3239

6

3240

3241

    // ------------------------------------------------------------------

3242

    // Constructors and invariants

3243

    // ------------------------------------------------------------------

3244

3245

    #[test]

3246

1

    fn ribbon_new_defaults_to_office_2013_with_tab_zero_active() {

3247

5

        for count in [0usize, 1, 2, 9] {

3248

4

            let r = Ribbon::new(tabs(count));

3249

4

            assert_eq!(r.tabs.len(), count);

3250

4

            assert_eq!(r.active_tab, 0);

3251

4

            assert!(r.on_tab_click.is_none());

3252

4

            assert!(r.app_button.is_none());

3253

4

            assert_eq!(r.style, RibbonStyle::office_2013());

3254

3255

1

3256

3257

    #[test]

3258

1

    fn ribbon_style_default_is_office_2013() {

3259

1

        assert_eq!(RibbonStyle::default(), RibbonStyle::office_2013());

3260

1

3261

3262

    #[test]

3263

1

    fn set_active_tab_clamps_to_the_last_valid_index() {

3264

1

        let mut r = Ribbon::new(RibbonTabVec::from_vec(Vec::new()));

3265

4

        for index in [0usize, 1, usize::MAX / 2, usize::MAX] {

3266

4

            r.set_active_tab(index);

3267

4

            assert_eq!(r.active_tab, 0, "empty ribbon must clamp {index} to 0");

3268

3269

3270

1

        let mut r = Ribbon::new(tabs(4));

3271

5

        for index in 0..4 {

3272

4

            r.set_active_tab(index);

3273

4

            assert_eq!(r.active_tab, index);

3274

3275

4

        for index in [4usize, 5, usize::MAX - 1, usize::MAX] {

3276

4

            r.set_active_tab(index);

3277

4

            assert_eq!(r.active_tab, 3, "{index} must clamp to the last tab");

3278

3279

1

3280

3281

    #[test]

3282

1

    fn group_and_tab_builders_append_in_order() {

3283

1

        let group = RibbonGroup::new(AzString::from("Font"))

3284

1

            .with_item(RibbonItem::SmallButton(small_btn("format_bold", "")))

3285

1

            .with_item(RibbonItem::Separator);

3286

1

        assert_eq!(group.items.len(), 2);

3287

1

        assert!(group.launcher.is_none());

3288

3289

1

        let tab = RibbonTab::new(AzString::from("HOME"))

3290

1

            .with_group(group.clone())

3291

1

            .with_group(RibbonGroup::new(AzString::from("Editing")));

3292

1

        assert_eq!(tab.groups.len(), 2);

3293

1

        assert_eq!(tab.groups.as_ref()[0].label.as_str(), "Font");

3294

1

        assert_eq!(tab.groups.as_ref()[1].label.as_str(), "Editing");

3295

1

3296

3297

    // ------------------------------------------------------------------

3298

    // Tab bar

3299

    // ------------------------------------------------------------------

3300

3301

    #[test]

3302

1

    fn dom_of_an_empty_ribbon_has_only_the_filler_in_the_bar() {

3303

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(Vec::new())).dom();

3304

1

        assert!(has_class(&dom, "__azul-native-ribbon"));

3305

3306

1

        let (bar, content) = parts(&dom);

3307

1

        assert!(has_class(bar, "__azul-native-ribbon-tabbar"));

3308

1

        assert_eq!(bar.children.as_ref().len(), 1, "empty ribbon bar = filler only");

3309

1

        assert!(has_class(&bar.children.as_ref()[0], "__azul-native-ribbon-tab-filler"));

3310

1

        assert!(content.children.as_ref().is_empty());

3311

1

3312

3313

    #[test]

3314

1

    fn dom_desktop_emits_only_the_desktop_chrome() {

3315

1

        let r = Ribbon::new(tabs(3));

3316

1

        let dom = r.dom_desktop();

3317

1

        let ch = dom.children.as_ref();

3318

1

        assert_eq!(ch.len(), 2, "desktop chrome = [tab bar, content]");

3319

1

        assert!(has_class(&ch[0], "__azul-native-ribbon-tabbar"));

3320

1

        assert!(has_class(&ch[1], "__azul-native-ribbon-content"));

3321

1

3322

3323

    #[test]

3324

1

    fn dom_mobile_emits_only_the_touch_chrome_with_one_visible_group() {

3325

        use azul_css::props::property::CssPropertyType;

3326

3327

1

        let mut tab = RibbonTab::new(AzString::from_const_str("HOME"));

3328

3

        for label in ["Clipboard", "Font", "Paragraph"] {

3329

3

            tab = tab.with_group(RibbonGroup::new(AzString::from(label)));

3330

3

3331

1

        let r = Ribbon::new(RibbonTabVec::from_vec(vec![tab]));

3332

1

        let dom = r.dom_mobile();

3333

1

        let ch = dom.children.as_ref();

3334

1

        assert_eq!(ch.len(), 3, "mobile chrome = [tab button, overlay, band]");

3335

1

        assert!(has_class(&ch[0], "__azul-native-ribbon-mobile-tab"));

3336

1

        assert!(has_class(&ch[1], "__azul-native-ribbon-mobile-tab-overlay"));

3337

1

        assert!(has_class(&ch[2], "__azul-native-ribbon-mobile-band"));

3338

1

        let band = ch[2].children.as_ref();

3339

1

        assert_eq!(band.len(), 2, "band = [group list, content] side by side");

3340

1

        assert!(has_class(&band[0], "__azul-native-ribbon-mobile-group-list"));

3341

1

        assert!(has_class(&band[1], "__azul-native-ribbon-content"));

3342

3343

        // Exactly the FIRST group is visible; the others carry an appended

3344

        // unconditional display:none (the group list swaps them at runtime).

3345

3

        let last_uncond_display = |d: &Dom| {

3346

3

            d.root

3347

3

                .style

3348

3

                .iter_inline_properties()

3349

30

                .filter(|(p, conds)| {

3350

30

                    conds.as_ref().is_empty() && p.get_type() == CssPropertyType::Display

3351

30

})

3352

3

                .last()

3353

3

                .map(|(p, _)| p.clone())

3354

3

};

3355

1

        let groups = ch[2].children.as_ref()[1].children.as_ref();

3356

1

        assert_eq!(groups.len(), 3);

3357

1

        assert_ne!(

3358

1

            last_uncond_display(&groups[0]),

3359

1

            Some(P::const_display(LayoutDisplay::None)),

3360

            "first group stays visible"

3361

);

3362

2

        for g in &groups[1..] {

3363

2

            assert_eq!(

3364

2

                last_uncond_display(g),

3365

2

                Some(P::const_display(LayoutDisplay::None)),

3366

                "non-initial groups start hidden in the mobile chrome"

3367

);

3368

3369

3370

        // Every group-list entry carries the swap callback.

3371

3

        for item in ch[2].children.as_ref()[0].children.as_ref() {

3372

3

            assert_eq!(item.root.callbacks.as_ref().len(), 1, "group-list entry has the swap callback");

3373

3374

1

3375

3376

    #[test]

3377

1

    fn dom_renders_app_button_tabs_and_filler_in_order() {

3378

1

        let r = Ribbon::new(tabs(3))

3379

1

            .with_app_button(RibbonAppButton::new(AzString::from("FILE")))

3380

1

            .with_active_tab(1);

3381

1

        let dom = r.dom();

3382

1

        let (bar, _) = parts(&dom);

3383

1

        let ch = bar.children.as_ref();

3384

3385

1

        assert_eq!(ch.len(), 5, "[app, t0, t1, t2, filler]");

3386

1

        assert!(has_class(&ch[0], "__azul-native-ribbon-appbutton"));

3387

        // The app button and the tabs are BOXES holding a label text child

3388

        // (a raw text node is an inline box, whose border paints around the

3389

        // text run instead of the padded tab).

3390

1

        assert_eq!(label_text(&ch[0]), Some("FILE"));

3391

4

        for i in 0..3 {

3392

3

            assert_eq!(label_text(&ch[1 + i]), Some(format!("t{i}").as_str()));

3393

3

            assert!(has_class(&ch[1 + i], "__azul-native-ribbon-tab"));

3394

3

            assert_eq!(

3395

3

                has_class(&ch[1 + i], "__azul-native-ribbon-tab-active"),

3396

3

                i == 1,

3397

                "only tab 1 is active"

3398

);

3399

3400

1

        assert!(has_class(&ch[4], "__azul-native-ribbon-tab-filler"));

3401

3402

        // the active tab carries the active style, the others the plain style

3403

1

        let s = RibbonStyle::office_2013();

3404

1

        assert_eq!(inline_props(&ch[1]), style_props(&s.tab_style));

3405

1

        assert_eq!(inline_props(&ch[2]), style_props(&s.tab_active_style));

3406

1

3407

3408

    #[test]

3409

1

    fn dom_with_an_out_of_range_active_tab_highlights_nothing_and_renders_no_groups() {

3410

1

        let mut r = Ribbon::new(tabs(3));

3411

1

        r.active_tab = usize::MAX; // public field bypasses the clamp

3412

1

        let dom = r.dom();

3413

1

        let (bar, content) = parts(&dom);

3414

3

        for tab in &bar.children.as_ref()[..3] {

3415

3

            assert!(!has_class(tab, "__azul-native-ribbon-tab-active"));

3416

3417

1

        assert!(content.children.as_ref().is_empty());

3418

1

3419

3420

    #[test]

3421

1

    fn dom_without_a_callback_attaches_no_user_tab_handler() {

3422

1

        let dom = Ribbon::new(tabs(4)).dom();

3423

1

        let (bar, _) = parts(&dom);

3424

5

        for tab in bar.children.as_ref() {

3425

5

            assert!(

3426

5

                !tab.root

3427

5

                    .get_callbacks()

3428

5

                    .as_ref()

3429

5

                    .iter()

3430

12

                    .any(|c| c.event == EventFilter::Hover(HoverEventFilter::MouseUp)),

3431

                "no user callback -> no MouseUp handler (chrome handlers may still be present)"

3432

);

3433

3434

1

3435

3436

    #[test]

3437

1

    fn dom_gives_every_tab_a_mouseup_callback_with_its_own_index() {

3438

1

        let dom = Ribbon::new(tabs(5))

3439

1

            .with_on_tab_click(RefAny::new(IndexLog { seen: Vec::new() }), record_index as RibbonOnTabClickCallbackType)

3440

1

            .dom();

3441

1

        let (bar, _) = parts(&dom);

3442

5

        for (i, tab) in bar.children.as_ref()[..5].iter().enumerate() {

3443

5

            let cbs = tab.root.get_callbacks();

3444

            // Default behavior also attaches the collapse/peek chrome

3445

            // handlers; the USER callback is the MouseUp one.

3446

5

            let click = cbs

3447

5

                .as_ref()

3448

5

                .iter()

3449

5

                .find(|c| c.event == EventFilter::Hover(HoverEventFilter::MouseUp))

3450

5

                .expect("every tab has a MouseUp user handler");

3451

5

            let mut payload = click.refany.clone();

3452

5

            let data = payload

3453

5

                .downcast_ref::<TabClickData>()

3454

5

                .expect("tab payload is a TabClickData");

3455

5

            assert_eq!(data.tab_idx, i);

3456

3457

        // the filler has no callback

3458

1

        assert!(bar.children.as_ref()[5].root.get_callbacks().as_ref().is_empty());

3459

1

3460

3461

    #[test]

3462

1

    fn app_button_callback_is_attached_directly() {

3463

        extern "C" fn noop(_: RefAny, _: CallbackInfo) -> Update {

3464

            Update::DoNothing

3465

3466

1

        let ab = RibbonAppButton::new(AzString::from("FILE"))

3467

1

            .with_on_click(RefAny::new(0u8), noop as super::super::button::ButtonOnClickCallbackType);

3468

1

        let dom = Ribbon::new(tabs(1)).with_app_button(ab).dom();

3469

1

        let (bar, _) = parts(&dom);

3470

1

        let cbs = bar.children.as_ref()[0].root.get_callbacks();

3471

1

        assert_eq!(cbs.as_ref().len(), 1);

3472

1

        assert_eq!(cbs.as_ref()[0].callback.cb, noop as usize);

3473

1

3474

3475

    // ------------------------------------------------------------------

3476

    // Trampolines

3477

    // ------------------------------------------------------------------

3478

3479

    #[test]

3480

1

    fn tab_click_forwards_the_index_and_propagates_the_update() {

3481

1

        let mut log = RefAny::new(IndexLog { seen: Vec::new() });

3482

4

        for idx in [0usize, 7, usize::MAX] {

3483

3

            let data = RefAny::new(TabClickData {

3484

3

                tab_idx: idx,

3485

3

                on_tab_click: Some(RibbonOnTabClick {

3486

3

                    callback: (record_index as RibbonOnTabClickCallbackType).into(),

3487

3

                    refany: log.clone(),

3488

3

})

3489

3

                .into(),

3490

3

});

3491

3

            let (update, changes) = run_trampoline(on_ribbon_tab_click, data);

3492

3

            assert_eq!(update, Update::RefreshDom);

3493

3

            assert!(changes.is_empty());

3494

3495

1

        assert_eq!(log_indices(&mut log), vec![0, 7, usize::MAX]);

3496

1

3497

3498

    #[test]

3499

1

    fn gallery_click_forwards_the_index_and_propagates_the_update() {

3500

1

        let mut log = RefAny::new(IndexLog { seen: Vec::new() });

3501

1

        let data = RefAny::new(GalleryCellClickData {

3502

1

            cell_idx: 3,

3503

1

            on_select: Some(RibbonGalleryOnSelect {

3504

1

                callback: (record_index as RibbonGalleryOnSelectCallbackType).into(),

3505

1

                refany: log.clone(),

3506

1

})

3507

1

            .into(),

3508

1

            // The auto-select branch needs live layout results; this test

3509

1

            // drives the forwarding path only.

3510

1

            auto_select: false,

3511

1

            in_panel: false,

3512

1

            selected_style: CssPropertyWithConditionsVec::from_const_slice(&[]),

3513

1

            base_style: CssPropertyWithConditionsVec::from_const_slice(&[]),

3514

1

});

3515

1

        let (update, changes) = run_trampoline(on_ribbon_gallery_cell_click, data);

3516

1

        assert_eq!(update, Update::RefreshDom);

3517

1

        assert!(changes.is_empty());

3518

1

        assert_eq!(log_indices(&mut log), vec![3]);

3519

1

3520

3521

    #[test]

3522

1

    fn trampolines_with_foreign_or_empty_payloads_are_noops() {

3523

1

        let (update, changes) = run_trampoline(on_ribbon_tab_click, RefAny::new(0xdead_u64));

3524

1

        assert_eq!(update, Update::DoNothing);

3525

1

        assert!(changes.is_empty());

3526

3527

1

        let data = RefAny::new(GalleryCellClickData {

3528

1

            cell_idx: 0,

3529

1

            on_select: None.into(),

3530

1

            auto_select: false,

3531

1

            in_panel: false,

3532

1

            selected_style: CssPropertyWithConditionsVec::from_const_slice(&[]),

3533

1

            base_style: CssPropertyWithConditionsVec::from_const_slice(&[]),

3534

1

});

3535

1

        let (update, _) = run_trampoline(on_ribbon_gallery_cell_click, data);

3536

1

        assert_eq!(update, Update::DoNothing);

3537

1

3538

3539

    // ------------------------------------------------------------------

3540

    // Groups

3541

    // ------------------------------------------------------------------

3542

3543

    #[test]

3544

1

    fn group_renders_items_over_a_footer_with_the_caption() {

3545

1

        let tab = RibbonTab::new(AzString::from("HOME")).with_group(

3546

1

            RibbonGroup::new(AzString::from("Clipboard"))

3547

1

                .with_item(RibbonItem::SmallButton(small_btn("content_cut", "Cut"))),

3548

);

3549

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab])).dom();

3550

1

        let (_, content) = parts(&dom);

3551

1

        assert_eq!(content.children.as_ref().len(), 1);

3552

1

        assert!(has_class(&content.children.as_ref()[0], "__azul-native-ribbon-group"));

3553

3554

1

        let (items, footer) = group_parts(content, 0);

3555

1

        assert!(has_class(items, "__azul-native-ribbon-group-items"));

3556

1

        assert_eq!(items.children.as_ref().len(), 1);

3557

1

        assert!(has_class(footer, "__azul-native-ribbon-group-footer"));

3558

        // no launcher: the footer is exactly [caption]

3559

1

        assert_eq!(footer.children.as_ref().len(), 1);

3560

1

        assert_eq!(text_of(&footer.children.as_ref()[0]), Some("Clipboard"));

3561

1

3562

3563

    #[test]

3564

1

    fn group_with_launcher_renders_spacer_caption_launcher() {

3565

        extern "C" fn noop(_: RefAny, _: CallbackInfo) -> Update {

3566

            Update::DoNothing

3567

3568

1

        let group = RibbonGroup::new(AzString::from("Font"))

3569

1

            .with_launcher(RefAny::new(0u8), noop as super::super::button::ButtonOnClickCallbackType);

3570

1

        let tab = RibbonTab::new(AzString::from("HOME")).with_group(group);

3571

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab])).dom();

3572

1

        let (_, content) = parts(&dom);

3573

1

        let (_, footer) = group_parts(content, 0);

3574

3575

1

        let ch = footer.children.as_ref();

3576

1

        assert_eq!(ch.len(), 3, "[spacer, caption, launcher]");

3577

1

        assert!(has_class(&ch[0], "__azul-native-ribbon-footer-spacer"));

3578

1

        assert_eq!(text_of(&ch[1]), Some("Font"));

3579

        // the launcher is a real Button widget with the south_east icon

3580

1

        assert!(matches!(ch[2].root.get_node_type(), NodeType::Button));

3581

1

        assert_eq!(icon_name_of(&ch[2].children.as_ref()[0]), Some("south_east"));

3582

1

        assert_eq!(ch[2].root.get_callbacks().as_ref().len(), 1);

3583

1

3584

3585

    // ------------------------------------------------------------------

3586

    // Items

3587

    // ------------------------------------------------------------------

3588

3589

    /// Renders one item into a throwaway single-group ribbon and returns the

3590

    /// rendered item node.

3591

12

    fn render_item(item: RibbonItem) -> Dom {

3592

12

        let tab = RibbonTab::new(AzString::from("t"))

3593

12

            .with_group(RibbonGroup::new(AzString::from("g")).with_item(item));

3594

12

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab])).dom();

3595

12

        let (_, content) = parts(&dom);

3596

12

        let (items, _) = group_parts(content, 0);

3597

12

        assert_eq!(items.children.as_ref().len(), 1);

3598

12

        items.children.as_ref()[0].clone()

3599

12

3600

3601

    #[test]

3602

1

    fn large_button_expands_to_a_button_widget_with_icon_label_and_arrow() {

3603

1

        let rb = RibbonButton::new(AzString::from("content_paste"), AzString::from("Paste"))

3604

1

            .with_arrow(RibbonArrow::Split);

3605

1

        let node = render_item(RibbonItem::LargeButton(rb));

3606

3607

1

        assert!(matches!(node.root.get_node_type(), NodeType::Button));

3608

1

        assert!(has_class(&node, "__azul-native-button"), "reuses the Button widget");

3609

1

        let ch = node.children.as_ref();

3610

1

        assert_eq!(ch.len(), 3, "[icon, label, arrow]");

3611

1

        assert_eq!(icon_name_of(&ch[0]), Some("content_paste"));

3612

1

        assert_eq!(text_of(&ch[1]), Some("Paste"));

3613

1

        assert_eq!(icon_name_of(&ch[2]), Some("arrow_drop_down"));

3614

3615

1

        let s = RibbonStyle::office_2013();

3616

1

        assert_eq!(inline_props(&node), style_props(&s.large_button_style));

3617

1

        assert_eq!(inline_props(&ch[0]), style_props(&s.large_icon_style));

3618

1

        assert_eq!(inline_props(&ch[1]), style_props(&s.large_label_style));

3619

1

        assert_eq!(inline_props(&ch[2]), style_props(&s.arrow_icon_style));

3620

1

3621

3622

    #[test]

3623

1

    fn icon_only_small_button_skips_the_empty_label() {

3624

1

        let node = render_item(RibbonItem::SmallButton(small_btn("format_bold", "")));

3625

1

        let ch = node.children.as_ref();

3626

1

        assert_eq!(ch.len(), 1, "icon only — no empty text node");

3627

1

        assert_eq!(icon_name_of(&ch[0]), Some("format_bold"));

3628

1

3629

3630

    #[test]

3631

1

    fn toggled_button_appends_the_checked_style_last() {

3632

1

        let rb = small_btn("format_align_left", "").with_toggled(true);

3633

1

        let node = render_item(RibbonItem::SmallButton(rb));

3634

3635

1

        let s = RibbonStyle::office_2013();

3636

1

        let mut expected = style_props(&s.small_button_style);

3637

1

        expected.extend(style_props(&s.checked_style));

3638

1

        assert_eq!(

3639

1

            inline_props(&node),

3640

            expected,

3641

            "checked props must come last so they win (inline CSS is last-wins)"

3642

);

3643

1

3644

3645

    #[test]

3646

1

    fn columns_and_rows_nest_items_recursively() {

3647

1

        let column = RibbonColumn::new()

3648

1

            .with_item(RibbonItem::SmallButton(small_btn("content_cut", "Cut")))

3649

1

            .with_item(RibbonItem::Row(

3650

1

                RibbonRow::new()

3651

1

                    .with_item(RibbonItem::SmallButton(small_btn("format_bold", "")))

3652

1

                    .with_item(RibbonItem::Separator),

3653

1

));

3654

1

        let node = render_item(RibbonItem::Column(column));

3655

3656

1

        assert!(has_class(&node, "__azul-native-ribbon-column"));

3657

1

        let ch = node.children.as_ref();

3658

1

        assert_eq!(ch.len(), 2);

3659

1

        assert!(matches!(ch[0].root.get_node_type(), NodeType::Button));

3660

1

        assert!(has_class(&ch[1], "__azul-native-ribbon-row"));

3661

1

        let row_ch = ch[1].children.as_ref();

3662

1

        assert_eq!(row_ch.len(), 2);

3663

1

        assert!(has_class(&row_ch[1], "__azul-native-ribbon-separator"));

3664

1

3665

3666

    #[test]

3667

1

    fn embedded_widgets_render_with_their_own_classes() {

3668

        use azul_css::StringVec;

3669

3670

1

        let combo = ComboBox::new(StringVec::from_vec(vec![AzString::from("Calibri")]));

3671

1

        let node = render_item(RibbonItem::Combo(combo));

3672

1

        assert!(has_class(&node, "__azul-native-combobox"));

3673

3674

1

        let drop = DropDown::new(StringVec::from_vec(vec![AzString::from("11")]));

3675

1

        let node = render_item(RibbonItem::Drop(drop));

3676

1

        assert!(has_class(&node, "__azul-native-dropdown"));

3677

3678

1

        let check = CheckBox::create(true);

3679

1

        let node = render_item(RibbonItem::Check(check));

3680

1

        assert!(has_class(&node, "__azul-native-checkbox-container"));

3681

1

3682

3683

    #[test]

3684

1

    fn custom_items_pass_through_verbatim() {

3685

1

        let custom = Dom::create_text_do_not_use_without_block_level_wrapper("¶");

3686

1

        let node = render_item(RibbonItem::Custom(custom.clone()));

3687

1

        assert_eq!(node, custom);

3688

1

3689

3690

    // ------------------------------------------------------------------

3691

    // Gallery

3692

    // ------------------------------------------------------------------

3693

3694

7

    fn gallery(cells: usize) -> RibbonGallery {

3695

7

        let v: Vec<RibbonGalleryCell> = (0..cells)

3696

21

            .map(|i| {

3697

21

                RibbonGalleryCell::new(

3698

21

                    Dom::create_text_do_not_use_without_block_level_wrapper(format!("AaBbCc{i}")),

3699

21

                    AzString::from(format!("Style {i}")),

3700

3701

21

})

3702

7

            .collect();

3703

7

        RibbonGallery::new(RibbonGalleryCellVec::from_vec(v))

3704

7

3705

3706

    #[test]

3707

1

    fn gallery_renders_strip_cells_and_three_spinner_buttons() {

3708

1

        let wrapper = render_item(RibbonItem::Gallery(gallery(4).with_selected(2)));

3709

1

        assert!(has_class(&wrapper, "__azul-native-ribbon-gallery-wrapper"));

3710

1

        let node = &wrapper.children.as_ref()[0];

3711

1

        assert!(has_class(node, "__azul-native-ribbon-gallery"));

3712

3713

1

        let ch = node.children.as_ref();

3714

1

        assert_eq!(ch.len(), 2, "[strip, spinner]");

3715

1

        let (strip, spinner) = (&ch[0], &ch[1]);

3716

3717

1

        assert!(has_class(strip, "__azul-native-ribbon-gallery-strip"));

3718

1

        let cells = strip.children.as_ref();

3719

1

        assert_eq!(cells.len(), 4);

3720

4

        for (i, cell) in cells.iter().enumerate() {

3721

4

            assert!(has_class(cell, "__azul-native-ribbon-gallery-cell"));

3722

4

            assert_eq!(

3723

4

                has_class(cell, "__azul-native-ribbon-gallery-cell-selected"),

3724

4

                i == 2,

3725

                "only cell 2 is selected"

3726

);

3727

            // [preview, label]

3728

4

            let cc = cell.children.as_ref();

3729

4

            assert_eq!(cc.len(), 2);

3730

4

            assert_eq!(text_of(&cc[0]), Some(format!("AaBbCc{i}").as_str()));

3731

4

            assert_eq!(text_of(&cc[1]), Some(format!("Style {i}").as_str()));

3732

3733

3734

        // selected cell style = base + selected extras appended

3735

1

        let s = RibbonStyle::office_2013();

3736

1

        let mut expected = style_props(&s.gallery_cell_style);

3737

1

        expected.extend(style_props(&s.gallery_cell_selected_style));

3738

1

        assert_eq!(inline_props(&cells[2]), expected);

3739

3740

1

        assert!(has_class(spinner, "__azul-native-ribbon-gallery-spinner"));

3741

1

        let buttons = spinner.children.as_ref();

3742

1

        assert_eq!(buttons.len(), 3);

3743

1

        let expected_icons = ["expand_less", "expand_more", "arrow_drop_down"];

3744

3

        for (b, expected_icon) in buttons.iter().zip(expected_icons) {

3745

3

            assert!(matches!(b.root.get_node_type(), NodeType::Button));

3746

3

            assert_eq!(icon_name_of(&b.children.as_ref()[0]), Some(expected_icon));

3747

3748

1

3749

3750

    #[test]

3751

1

    fn gallery_cells_carry_their_own_index_in_the_click_payload() {

3752

1

        let g = gallery(2).with_on_select(

3753

1

            RefAny::new(IndexLog { seen: Vec::new() }),

3754

1

            record_index as RibbonGalleryOnSelectCallbackType,

3755

);

3756

1

        let wrapper = render_item(RibbonItem::Gallery(g));

3757

1

        let frame = &wrapper.children.as_ref()[0];

3758

2

        for (i, cell) in frame.children.as_ref()[0].children.as_ref().iter().enumerate() {

3759

2

            let cbs = cell.root.get_callbacks();

3760

2

            assert_eq!(cbs.as_ref().len(), 1);

3761

2

            let mut payload = cbs.as_ref()[0].refany.clone();

3762

2

            let data = payload

3763

2

                .downcast_ref::<GalleryCellClickData>()

3764

2

                .expect("cell payload is a GalleryCellClickData");

3765

2

            assert_eq!(data.cell_idx, i);

3766

3767

1

3768

3769

    // ------------------------------------------------------------------

3770

    // Style injection

3771

    // ------------------------------------------------------------------

3772

3773

    #[test]

3774

1

    fn replacing_a_part_style_restyles_the_expanded_buttons() {

3775

1

        let injected = CssPropertyWithConditionsVec::from_vec(vec![Cond::simple(

3776

1

            P::const_font_size(StyleFontSize::const_px(99)),

3777

        )]);

3778

3779

1

        let tab = RibbonTab::new(AzString::from("t")).with_group(

3780

1

            RibbonGroup::new(AzString::from("g"))

3781

1

                .with_item(RibbonItem::SmallButton(small_btn("format_bold", ""))),

3782

);

3783

1

        let mut r = Ribbon::new(RibbonTabVec::from_vec(vec![tab]));

3784

1

        r.style.small_button_style = injected.clone();

3785

1

        let dom = r.dom();

3786

1

        let (_, content) = parts(&dom);

3787

1

        let (items, _) = group_parts(content, 0);

3788

3789

1

        assert_eq!(

3790

1

            inline_props(&items.children.as_ref()[0]),

3791

1

            style_props(&injected),

3792

            "the injected style must reach the expanded Button verbatim"

3793

);

3794

1

3795

3796

    // ------------------------------------------------------------------

3797

    // Whole-tree invariants

3798

    // ------------------------------------------------------------------

3799

3800

    #[test]

3801

1

    fn estimated_child_count_cache_stays_consistent_for_a_full_ribbon() {

3802

1

        let tab = RibbonTab::new(AzString::from("HOME"))

3803

1

            .with_group(

3804

1

                RibbonGroup::new(AzString::from("Clipboard"))

3805

1

                    .with_item(RibbonItem::LargeButton(

3806

1

                        RibbonButton::new(AzString::from("content_paste"), AzString::from("Paste"))

3807

1

                            .with_arrow(RibbonArrow::Split),

3808

1

))

3809

1

                    .with_item(RibbonItem::Column(

3810

1

                        RibbonColumn::new()

3811

1

                            .with_item(RibbonItem::SmallButton(small_btn("content_cut", "Cut")))

3812

1

                            .with_item(RibbonItem::SmallButton(small_btn("content_copy", "Copy"))),

3813

1

)),

3814

3815

1

            .with_group(

3816

1

                RibbonGroup::new(AzString::from("Styles"))

3817

1

                    .with_item(RibbonItem::Gallery(gallery(6))),

3818

);

3819

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab]))

3820

1

            .with_app_button(RibbonAppButton::new(AzString::from("FILE")))

3821

1

            .dom();

3822

3823

1

        assert_eq!(

3824

            dom.estimated_total_children,

3825

1

            recursive_descendants(&dom),

3826

            "cached descendant count desynced from the real tree"

3827

);

3828

1

3829

3830

    #[test]

3831

1

    fn from_ribbon_for_dom_matches_dom() {

3832

        // Only meaningful without callbacks: every `dom()` call mints fresh

3833

        // per-tab RefAny payloads and two RefAnys never compare equal.

3834

        // Inert: the default behaviors mint a fresh chrome `RefAny` per call

3835

        // and two RefAnys never compare equal.

3836

2

        let inert = || Ribbon::new(tabs(3)).with_behavior(RibbonBehavior::inert());

3837

1

        assert_eq!(Dom::from(inert()), inert().dom());

3838

1

3839

3840

    #[test]

3841

1

    fn styled_combo_box_injects_the_ribbon_field_look() {

3842

        use azul_css::StringVec;

3843

3844

1

        let s = RibbonStyle::office_2013();

3845

1

        let combo = s.styled_combo_box(

3846

1

            StringVec::from_vec(vec![AzString::from("Calibri")]),

3847

1

            AzString::from("Calibri (Body)"),

3848

            133,

3849

);

3850

3851

1

        let default = ComboBox::create();

3852

1

        assert_ne!(combo.wrapper_style, default.wrapper_style, "wrapper restyled");

3853

1

        assert_ne!(combo.field_style, default.field_style, "field restyled");

3854

1

        assert_eq!(combo.combo_state.inner.text.as_str(), "Calibri (Body)");

3855

3856

        // the width is the LAST wrapper property, so it wins over any base width

3857

1

        let last = combo

3858

1

            .wrapper_style

3859

1

            .as_ref()

3860

1

            .last()

3861

1

            .expect("wrapper style is non-empty");

3862

1

        assert!(

3863

1

            matches!(&last.property, CssProperty::Width(_)),

3864

            "styled_combo_box must append the width last, got {:?}",

3865

            last.property

3866

);

3867

1

3868

3869

    // ------------------------------------------------------------------

3870

    // Theming

3871

    // ------------------------------------------------------------------

3872

3873

    #[test]

3874

1

    fn from_theme_recolors_the_accent_carrying_parts() {

3875

1

        let neon = ColorU { r: 255, g: 0, b: 128, a: 255 };

3876

1

        let mut theme = RibbonTheme::office_2013();

3877

1

        theme.accent = neon;

3878

3879

1

        let s = RibbonStyle::from_theme(theme);

3880

1

        assert_eq!(s.theme, theme, "the style bundle records its palette");

3881

1

        assert_ne!(s, RibbonStyle::office_2013());

3882

3883

        // The app button's fill is the accent color.

3884

1

        let app_bg = s

3885

1

            .app_button_style

3886

1

            .as_ref()

3887

1

            .iter()

3888

11

            .find_map(|c| match &c.property {

3889

1

                CssProperty::BackgroundContent(b) => b.get_property().cloned(),

3890

10

                _ => None,

3891

11

})

3892

1

            .expect("app button declares a background");

3893

1

        assert_eq!(

3894

1

            app_bg.as_ref(),

3895

1

            &[StyleBackgroundContent::Color(neon)],

3896

            "the app button fill must follow the theme accent"

3897

);

3898

3899

        // The active tab's text is the accent color.

3900

1

        let active_text = s

3901

1

            .tab_active_style

3902

1

            .as_ref()

3903

1

            .iter()

3904

12

            .find_map(|c| match &c.property {

3905

1

                CssProperty::TextColor(t) => t.get_property().copied(),

3906

11

                _ => None,

3907

12

})

3908

1

            .expect("active tab declares a text color");

3909

1

        assert_eq!(active_text.inner, neon);

3910

1

3911

3912

    #[test]

3913

1

    fn office_2013_is_exactly_from_theme_of_the_office_2013_palette() {

3914

1

        assert_eq!(

3915

1

            RibbonStyle::office_2013(),

3916

1

            RibbonStyle::from_theme(RibbonTheme::office_2013()),

3917

            "one source of truth: the named preset is just from_theme"

3918

);

3919

1

3920

3921

    #[test]

3922

1

    fn from_system_with_no_reported_colors_falls_back_to_office_2013() {

3923

        // SystemStyle::default() may pre-fill platform colors; the fallback

3924

        // contract is about a system that reports NO colors at all.

3925

1

        let mut sys = SystemStyle::default();

3926

1

        sys.colors = system::SystemColors::default();

3927

1

        assert_eq!(RibbonTheme::from_system(sys.clone()), RibbonTheme::office_2013());

3928

1

        assert_eq!(RibbonStyle::from_system(sys), RibbonStyle::office_2013());

3929

1

3930

3931

    #[test]

3932

1

    fn from_system_extracts_reported_colors_and_falls_back_for_the_rest() {

3933

1

        let reported = ColorU { r: 9, g: 99, b: 199, a: 255 };

3934

1

        let mut sys = SystemStyle::default();

3935

1

        sys.colors.accent = Some(reported).into();

3936

3937

1

        let t = RibbonTheme::from_system(sys);

3938

1

        assert_eq!(t.accent, reported, "reported accent must be extracted");

3939

1

        assert_eq!(t.hover_border, reported, "hover border follows the accent");

3940

1

        assert_eq!(

3941

            t.text,

3942

1

            RibbonTheme::office_2013().text,

3943

            "unreported colors fall back to the the Office-2013-era look palette"

3944

);

3945

1

3946

3947

    // ------------------------------------------------------------------

3948

    // Behaviors

3949

    // ------------------------------------------------------------------

3950

3951

    #[test]

3952

1

    fn default_behavior_is_office_2013_and_inert_disables_everything() {

3953

1

        assert_eq!(RibbonBehavior::default(), RibbonBehavior::office_2013());

3954

1

        let w = RibbonBehavior::office_2013();

3955

1

        assert!(w.collapsible && w.peek_on_hover && w.auto_select_gallery && w.expandable_gallery);

3956

1

        assert!(w.mobile_tab_overlay);

3957

1

        let i = RibbonBehavior::inert();

3958

1

        assert!(!i.collapsible && !i.peek_on_hover && !i.auto_select_gallery && !i.expandable_gallery);

3959

1

        assert!(!i.mobile_tab_overlay);

3960

1

        assert_eq!(Ribbon::new(tabs(1)).behavior, RibbonBehavior::office_2013());

3961

1

3962

3963

    #[test]

3964

1

    fn collapsible_tabs_carry_double_click_and_peek_handlers() {

3965

1

        let dom = Ribbon::new(tabs(3)).dom();

3966

1

        let (bar, _) = parts(&dom);

3967

3

        for tab in &bar.children.as_ref()[..3] {

3968

3

            let events: Vec<EventFilter> = tab

3969

3

                .root

3970

3

                .get_callbacks()

3971

3

                .as_ref()

3972

3

                .iter()

3973

3

                .map(|c| c.event)

3974

3

                .collect();

3975

3

            assert!(

3976

3

                events.contains(&EventFilter::Hover(HoverEventFilter::DoubleClick)),

3977

                "a collapsible ribbon must listen for DoubleClick, got {events:?}"

3978

);

3979

3

            assert!(events.contains(&EventFilter::Hover(HoverEventFilter::MouseEnter)));

3980

3

            assert!(events.contains(&EventFilter::Hover(HoverEventFilter::MouseLeave)));

3981

3982

1

3983

3984

    #[test]

3985

1

    fn inert_behavior_attaches_no_chrome_handlers() {

3986

1

        let dom = Ribbon::new(tabs(2))

3987

1

            .with_behavior(RibbonBehavior::inert())

3988

1

            .dom();

3989

1

        let (bar, _) = parts(&dom);

3990

2

        for tab in &bar.children.as_ref()[..2] {

3991

2

            assert!(

3992

2

                tab.root.get_callbacks().as_ref().is_empty(),

3993

                "an inert ribbon with no user callback must attach nothing"

3994

);

3995

3996

1

3997

3998

    #[test]

3999

1

    fn peek_can_be_disabled_while_collapse_stays_on() {

4000

1

        let behavior = RibbonBehavior {

4001

1

            peek_on_hover: false,

4002

1

            ..RibbonBehavior::office_2013()

4003

1

};

4004

1

        let dom = Ribbon::new(tabs(1)).with_behavior(behavior).dom();

4005

1

        let (bar, _) = parts(&dom);

4006

1

        let events: Vec<EventFilter> = bar.children.as_ref()[0]

4007

1

            .root

4008

1

            .get_callbacks()

4009

1

            .as_ref()

4010

1

            .iter()

4011

1

            .map(|c| c.event)

4012

1

            .collect();

4013

1

        assert_eq!(events, vec![EventFilter::Hover(HoverEventFilter::DoubleClick)]);

4014

1

4015

4016

    #[test]

4017

1

    fn expandable_gallery_wraps_the_frame_and_adds_a_hidden_panel() {

4018

1

        let node = render_item(RibbonItem::Gallery(gallery(3)));

4019

1

        assert!(has_class(&node, "__azul-native-ribbon-gallery-wrapper"));

4020

4021

1

        let ch = node.children.as_ref();

4022

1

        assert_eq!(ch.len(), 2, "[frame, panel]");

4023

1

        assert!(has_class(&ch[0], "__azul-native-ribbon-gallery"));

4024

1

        assert!(has_class(&ch[1], "__azul-native-ribbon-gallery-panel"));

4025

4026

        // The panel holds EVERY cell and starts hidden.

4027

1

        assert_eq!(ch[1].children.as_ref().len(), 3);

4028

1

        let display = inline_props(&ch[1]).into_iter().find_map(|p| match p {

4029

1

            CssProperty::Display(d) => d.get_property().copied(),

4030

            _ => None,

4031

1

});

4032

1

        assert_eq!(display, Some(LayoutDisplay::None), "the panel starts hidden");

4033

4034

        // The third spinner button is the "More" toggle.

4035

1

        let spinner = &ch[0].children.as_ref()[1];

4036

1

        let more = &spinner.children.as_ref()[2];

4037

1

        assert_eq!(more.root.get_callbacks().as_ref().len(), 1);

4038

1

        assert_eq!(

4039

1

            more.root.get_callbacks().as_ref()[0].event,

4040

            EventFilter::Hover(HoverEventFilter::MouseUp)

4041

);

4042

1

4043

4044

    #[test]

4045

1

    fn non_expandable_gallery_is_the_bare_frame() {

4046

1

        let tab = RibbonTab::new(AzString::from("t")).with_group(

4047

1

            RibbonGroup::new(AzString::from("g")).with_item(RibbonItem::Gallery(gallery(2))),

4048

);

4049

1

        let behavior = RibbonBehavior {

4050

1

            expandable_gallery: false,

4051

1

            ..RibbonBehavior::office_2013()

4052

1

};

4053

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab]))

4054

1

            .with_behavior(behavior)

4055

1

            .dom();

4056

1

        let (_, content) = parts(&dom);

4057

1

        let (items, _) = group_parts(content, 0);

4058

1

        let node = &items.children.as_ref()[0];

4059

1

        assert!(has_class(node, "__azul-native-ribbon-gallery"));

4060

1

        assert!(!has_class(node, "__azul-native-ribbon-gallery-wrapper"));

4061

1

4062

4063

    #[test]

4064

1

    fn auto_select_attaches_cell_handlers_even_without_a_user_callback() {

4065

        // The classic behavior moves the highlight on click regardless of the app; with

4066

        // auto_select off and no user callback, nothing is attached.

4067

1

        let node = render_item(RibbonItem::Gallery(gallery(2)));

4068

1

        let strip = &node.children.as_ref()[0].children.as_ref()[0];

4069

2

        for cell in strip.children.as_ref() {

4070

2

            assert_eq!(cell.root.get_callbacks().as_ref().len(), 1);

4071

4072

4073

1

        let tab = RibbonTab::new(AzString::from("t")).with_group(

4074

1

            RibbonGroup::new(AzString::from("g")).with_item(RibbonItem::Gallery(gallery(2))),

4075

);

4076

1

        let dom = Ribbon::new(RibbonTabVec::from_vec(vec![tab]))

4077

1

            .with_behavior(RibbonBehavior::inert())

4078

1

            .dom();

4079

1

        let (_, content) = parts(&dom);

4080

1

        let (items, _) = group_parts(content, 0);

4081

1

        let strip = &items.children.as_ref()[0].children.as_ref()[0];

4082

2

        for cell in strip.children.as_ref() {

4083

2

            assert!(cell.root.get_callbacks().as_ref().is_empty());

4084

4085

1

4086

4087

    // ------------------------------------------------------------------

4088

    // Responsive / mobile

4089

    // ------------------------------------------------------------------

4090

4091

    /// Both chromes are emitted once and the VIEWPORT decides which shows,

4092

    /// so the mobile ribbon keeps the desktop semantics (same tabs, same

4093

    /// groups) without a second widget tree.

4094

    #[test]

4095

1

    fn mobile_chrome_is_emitted_alongside_the_desktop_chrome() {

4096

1

        let dom = Ribbon::new(tabs(3)).with_active_tab(1).dom();

4097

1

        let ch = dom.children.as_ref();

4098

4099

5

        for class in [

4100

            "__azul-native-ribbon-tabbar",

4101

1

            "__azul-native-ribbon-mobile-tab",

4102

1

            "__azul-native-ribbon-mobile-tab-overlay",

4103

1

            "__azul-native-ribbon-mobile-group-list",

4104

1

            "__azul-native-ribbon-content",

4105

] {

4106

5

            assert!(

4107

15

                ch.iter().any(|c| has_class(c, class)),

4108

                "the ribbon must emit a {class} child"

4109

);

4110

4111

4112

        // The mobile button shows the ACTIVE tab's label.

4113

1

        let btn = ch

4114

1

            .iter()

4115

2

            .find(|c| has_class(c, "__azul-native-ribbon-mobile-tab"))

4116

1

            .expect("mobile tab button");

4117

1

        assert_eq!(label_text(btn), Some("t1"));

4118

1

        assert_eq!(

4119

1

            icon_name_of(&btn.children.as_ref()[1]),

4120

            Some("expand_more"),

4121

            "the mobile tab button carries the picker chevron"

4122

);

4123

4124

        // The overlay lists every tab.

4125

1

        let overlay = ch

4126

1

            .iter()

4127

3

            .find(|c| has_class(c, "__azul-native-ribbon-mobile-tab-overlay"))

4128

1

            .expect("tab overlay");

4129

1

        assert_eq!(overlay.children.as_ref().len(), 3);

4130

1

4131

4132

    /// The breakpoint is expressed as a real viewport condition, and the

4133

    /// conditional value comes LAST so it wins (inline CSS is last-match).

4134

    #[test]

4135

1

    fn the_desktop_tab_strip_is_hidden_under_the_mobile_breakpoint() {

4136

1

        let s = RibbonStyle::office_2013();

4137

4138

1

        let displays: Vec<(&LayoutDisplay, bool)> = s

4139

1

            .tab_bar_style

4140

1

            .as_ref()

4141

1

            .iter()

4142

7

            .filter_map(|c| match &c.property {

4143

2

                CssProperty::Display(d) => {

4144

2

                    d.get_property().map(|d| (d, !c.apply_if.as_ref().is_empty()))

4145

4146

5

                _ => None,

4147

7

})

4148

1

            .collect();

4149

1

        assert_eq!(

4150

1

            displays.len(),

4151

2,

4152

            "the tab strip declares an unconditional and a mobile display"

4153

);

4154

1

        assert_eq!(*displays[0].0, LayoutDisplay::Flex);

4155

1

        assert!(!displays[0].1, "the desktop value is unconditional");

4156

1

        assert_eq!(*displays[1].0, LayoutDisplay::None);

4157

1

        assert!(displays[1].1, "the mobile value is conditional and comes last");

4158

4159

        // ...and the mobile button is the mirror image.

4160

1

        let mobile: Vec<(&LayoutDisplay, bool)> = s

4161

1

            .mobile_tab_button_style

4162

1

            .as_ref()

4163

1

            .iter()

4164

19

            .filter_map(|c| match &c.property {

4165

2

                CssProperty::Display(d) => {

4166

2

                    d.get_property().map(|d| (d, !c.apply_if.as_ref().is_empty()))

4167

4168

17

                _ => None,

4169

19

})

4170

1

            .collect();

4171

1

        assert_eq!(*mobile[0].0, LayoutDisplay::None);

4172

1

        assert_eq!(*mobile[1].0, LayoutDisplay::Flex);

4173

1

        assert!(mobile[1].1);

4174

1

4175

4176

    /// Handedness moves the mobile group list to the reachable side. It is

4177

    /// independent of text direction, so it is its own system setting.

4178

    #[test]

4179

1

    fn handedness_flips_the_mobile_group_list_divider() {

4180

1

        let right = RibbonStyle::from_theme_handed(RibbonTheme::office_2013(), Handedness::RightHanded);

4181

1

        let left = RibbonStyle::from_theme_handed(RibbonTheme::office_2013(), Handedness::LeftHanded);

4182

1

        assert_ne!(right.mobile_group_list_style, left.mobile_group_list_style);

4183

4184

2

        let has = |s: &CssPropertyWithConditionsVec, want_left: bool| {

4185

22

            s.as_ref().iter().any(|c| {

4186

22

                if want_left {

4187

11

                    matches!(c.property, CssProperty::BorderLeftWidth(_))

4188

                } else {

4189

11

                    matches!(c.property, CssProperty::BorderRightWidth(_))

4190

4191

22

})

4192

2

};

4193

1

        assert!(has(&right.mobile_group_list_style, true),

4194

            "a right-handed list sits at the right edge, so its divider is on its LEFT");

4195

1

        assert!(has(&left.mobile_group_list_style, false),

4196

            "a left-handed list sits at the left edge, so its divider is on its RIGHT");

4197

1

4198

4199

    #[test]

4200

1

    fn from_system_picks_up_the_system_handedness() {

4201

1

        let mut sys = SystemStyle::default();

4202

1

        sys.handedness = Handedness::LeftHanded;

4203

1

        let from_sys = RibbonStyle::from_system(sys.clone());

4204

1

        let expected = RibbonStyle::from_theme_handed(

4205

1

            RibbonTheme::from_system(sys),

4206

1

            Handedness::LeftHanded,

4207

);

4208

1

        assert_eq!(from_sys.mobile_group_list_style, expected.mobile_group_list_style);

4209

1

4210

4211

    #[test]

4212

1

    fn inert_behavior_leaves_the_mobile_tab_button_without_a_toggle() {

4213

1

        let dom = Ribbon::new(tabs(2))

4214

1

            .with_behavior(RibbonBehavior::inert())

4215

1

            .dom();

4216

1

        let btn = dom

4217

1

            .children

4218

1

            .as_ref()

4219

1

            .iter()

4220

2

            .find(|c| has_class(c, "__azul-native-ribbon-mobile-tab"))

4221

1

            .expect("mobile tab button");

4222

1

        assert!(btn.root.get_callbacks().as_ref().is_empty());

4223

1

4224

4225

    #[test]

4226

1

    fn styled_combo_box_follows_the_style_bundles_theme() {

4227

1

        let neon = ColorU { r: 1, g: 2, b: 3, a: 255 };

4228

1

        let mut theme = RibbonTheme::office_2013();

4229

1

        theme.field_border = neon;

4230

4231

1

        let combo = RibbonStyle::from_theme(theme).styled_combo_box(

4232

1

            StringVec::from_vec(vec![]),

4233

1

            AzString::from("x"),

4234

50,

4235

);

4236

1

        let border_color = combo

4237

1

            .field_style

4238

1

            .as_ref()

4239

1

            .iter()

4240

22

            .find_map(|c| match &c.property {

4241

1

                CssProperty::BorderTopColor(b) => b.get_property().copied(),

4242

21

                _ => None,

4243

22

})

4244

1

            .expect("combo field declares a border color");

4245

1

        assert_eq!(border_color.inner, neon, "combo field border follows the theme");

4246

1

4247