@gjsify/adwaita-nativescript 0.38.1 → 0.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/widgets/accent-theme.js +1 -1
- package/lib/esm/widgets/adw-about-dialog.js +1 -1
- package/lib/esm/widgets/adw-accent.js +1 -1
- package/lib/esm/widgets/adw-button-row.js +1 -1
- package/lib/esm/widgets/adw-button.js +1 -1
- package/lib/esm/widgets/adw-entry-row.js +1 -1
- package/lib/esm/widgets/adw-expander-row.js +1 -1
- package/lib/esm/widgets/adw-toolbar-view.js +1 -1
- package/lib/esm/widgets/entry-row-view.js +1 -1
- package/lib/esm/widgets/row-state.js +1 -1
- package/lib/esm/widgets/status-page-content.js +1 -1
- package/lib/esm/widgets/window-insets-source.android.js +1 -0
- package/lib/esm/widgets/window-insets-source.ios.js +1 -0
- package/lib/esm/widgets/window-insets-source.js +1 -0
- package/lib/esm/widgets/window-insets.js +1 -0
- package/lib/types/widgets/accent-theme.d.ts +2 -2
- package/lib/types/widgets/adw-about-dialog.d.ts +18 -0
- package/lib/types/widgets/adw-accent.d.ts +11 -1
- package/lib/types/widgets/adw-button-row.d.ts +8 -1
- package/lib/types/widgets/adw-button.d.ts +10 -3
- package/lib/types/widgets/adw-menu-button.d.ts +11 -7
- package/lib/types/widgets/adw-toolbar-view.d.ts +15 -0
- package/lib/types/widgets/entry-row-view.d.ts +10 -2
- package/lib/types/widgets/row-state.d.ts +16 -1
- package/lib/types/widgets/window-insets-source.android.d.ts +3 -0
- package/lib/types/widgets/window-insets-source.d.ts +8 -0
- package/lib/types/widgets/window-insets-source.ios.d.ts +3 -0
- package/lib/types/widgets/window-insets.d.ts +63 -0
- package/lib/types/window-insets.spec.d.ts +2 -0
- package/package.json +7 -7
- package/src/theme/adwaita.css +132 -26
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{adwaitaAccentBgColor as e,adwaitaAccentColor as t}from"@gjsify/adwaita-core";const n=[{selector:`.adw-switch`,property:`color`,role:`fill`},{selector:`.adw-slider`,property:`color`,role:`fill`},{selector:`.adw-button.suggested-action`,property:`background-color`,role:`fill`},{selector:`.adw-button.suggested-action:highlighted`,property:`background-color`,role:`shade`},{selector:`.adw-banner-button.suggested-action`,property:`background-color`,role:`fill`},{selector:`.adw-avatar`,property:`background-color`,role:`fill`},{selector:`.adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label`,property:`color`,role:`fill`},{selector:`.adw-viewswitcherbar-button-badge`,property:`background-color`,role:`fill`},{selector:`.adw-button-row`,property:`color`,role:`fill`},{selector:`.adw-button-row-title`,property:`color`,role:`fill`},{selector:`.adw-
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{adwaitaAccentBgColor as e,adwaitaAccentColor as t}from"@gjsify/adwaita-core";const n=[{selector:`.adw-switch`,property:`color`,role:`fill`},{selector:`.adw-slider`,property:`color`,role:`fill`},{selector:`.adw-button.suggested-action`,property:`background-color`,role:`fill`},{selector:`.adw-button.suggested-action:highlighted`,property:`background-color`,role:`shade`},{selector:`.adw-banner-button.suggested-action`,property:`background-color`,role:`fill`},{selector:`.adw-avatar`,property:`background-color`,role:`fill`},{selector:`.adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label`,property:`color`,role:`fill`},{selector:`.adw-viewswitcherbar-button-badge`,property:`background-color`,role:`fill`},{selector:`.adw-button-row`,property:`color`,role:`fill`},{selector:`.adw-button-row-title`,property:`color`,role:`fill`},{selector:`.adw-view-switcher-button-badge`,property:`background-color`,role:`fill`},{selector:`.adw-inline-view-switcher-button-badge`,property:`background-color`,role:`fill`},{selector:`.adw-carousel-dot.active`,property:`color`,role:`fill`},{selector:`.adw-image-button.adw-entry-apply`,property:`background-color`,role:`fill`},{selector:`.adw-image-button.adw-entry-apply:highlighted`,property:`background-color`,role:`shade`},{selector:`.ns-dark .adw-button.suggested-action`,property:`background-color`,role:`fill`},{selector:`.ns-dark .adw-button.suggested-action:highlighted`,property:`background-color`,role:`shade`},{selector:`.ns-dark .adw-avatar`,property:`background-color`,role:`shade`},{selector:`.ns-dark .adw-image-button.adw-entry-apply:highlighted`,property:`background-color`,role:`shade`},{selector:`.ns-dark .adw-switch`,property:`color`,role:`standalone-dark`},{selector:`.ns-dark .adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label`,property:`color`,role:`standalone-dark`},{selector:`.ns-dark .adw-button-row-title, .ns-dark .adw-button-row-start-icon`,property:`color`,role:`standalone-dark`},{selector:`.ns-dark .adw-carousel-dot.active`,property:`color`,role:`standalone-dark`}];function adwaitaNsAccentColor(n,r){return r===`fill`?e(n):t(n,r===`standalone-dark`)}function adwaitaNsAccentCss(e){return n.map(t=>`${t.selector} { ${t.property}: ${adwaitaNsAccentColor(e,t.role)}; }`).join(`
|
|
2
2
|
`)}export{n as ADWAITA_NS_ACCENT_RULES,adwaitaNsAccentColor,adwaitaNsAccentCss};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{Button as e,GridLayout as t,ItemSpec as n,Label as r,ScrollView as i,StackLayout as a}from"@nativescript/core";const
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{Button as e,GridLayout as t,ItemSpec as n,Label as r,ScrollView as i,StackLayout as a}from"@nativescript/core";import{aboutDialogVisibility as o}from"@gjsify/adwaita-core";const s=`closed`;var AdwAboutDialog=class extends t{_card;_iconLabel;_nameLabel;_versionLabel;_developerLabel;_commentsLabel;_websiteLabel;_copyrightLabel;_applicationName=``;_applicationIcon=``;_developerName=``;_version=``;_comments=``;_website=``;_copyright=``;constructor(){super(),this.className=`adw-about-dialog`,this.visibility=`collapse`,this.addColumn(new n(1,`star`)),this.addRow(new n(1,`star`));let r=new i;r.orientation=`vertical`,r.verticalAlignment=`middle`,r.horizontalAlignment=`center`,t.setColumn(r,0),t.setRow(r,0);let o=new a;o.orientation=`vertical`,o.className=`adw-about-dialog-card`,r.content=o,this.addChild(r),this._card=o,this._iconLabel=this._addCardLabel(o,`adw-about-dialog-icon`),this._nameLabel=this._addCardLabel(o,`adw-about-dialog-name`),this._versionLabel=this._addCardLabel(o,`adw-about-dialog-version`),this._developerLabel=this._addCardLabel(o,`adw-about-dialog-developer`),this._commentsLabel=this._addCardLabel(o,`adw-about-dialog-comments`),this._websiteLabel=this._addCardLabel(o,`adw-about-dialog-website`),this._copyrightLabel=this._addCardLabel(o,`adw-about-dialog-copyright`);let s=new e;s.text=`Close`,s.className=`adw-about-dialog-close`,s.set(`androidElevation`,0),s.addEventListener(`tap`,()=>this.close()),o.addChild(s),this._render()}_addCardLabel(e,t){let n=new r;return n.className=t,n.horizontalAlignment=`center`,n.textWrap=!0,e.addChild(n),n}get applicationName(){return this._applicationName}set applicationName(e){this._applicationName=e??``,this._render()}get applicationIcon(){return this._applicationIcon}set applicationIcon(e){this._applicationIcon=e??``,this._render()}get version(){return this._version}set version(e){this._version=e??``,this._render()}get developerName(){return this._developerName}set developerName(e){this._developerName=e??``,this._render()}get comments(){return this._comments}set comments(e){this._comments=e??``,this._render()}get website(){return this._website}set website(e){this._website=e??``,this._render()}get copyright(){return this._copyright}set copyright(e){this._copyright=e??``,this._render()}_render(){let e=o({applicationName:this._applicationName,applicationIcon:this._applicationIcon,developerName:this._developerName,version:this._version,comments:this._comments,website:this._website}),show=(e,t,n)=>{e.text=t,e.visibility=n?`visible`:`collapse`};show(this._iconLabel,this._applicationIcon,e.appIcon),show(this._nameLabel,this._applicationName,e.appName),show(this._versionLabel,this._version,e.version),show(this._developerLabel,this._developerName,e.developerName),show(this._commentsLabel,this._comments,e.commentsLabel),show(this._websiteLabel,this._website,e.websiteRow),show(this._copyrightLabel,this._copyright,this._copyright.length>0)}present(){this.visibility=`visible`}close(){this.visibility=`collapse`;let e={eventName:s,object:this};this.notify(e)}get open(){return this.visibility===`visible`}set open(e){e?this.present():this.close()}};export{AdwAboutDialog,s as CLOSED};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{adwaitaNsAccentCss as e}from"./accent-theme.js";import{Application as t}from"@nativescript/core";import{ADW_DEFAULT_ACCENT_COLOR as n}from"@gjsify/adwaita-core";function applyAdwaitaNsAccent(n){t.addCss(e(n))}function clearAdwaitaNsAccent(){t.addCss(e(n))}export{applyAdwaitaNsAccent,clearAdwaitaNsAccent};
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{adwaitaNsAccentCss as e}from"./accent-theme.js";import{Application as t}from"@nativescript/core";import{ADW_DEFAULT_ACCENT_COLOR as n,setAdwaitaAccent as r}from"@gjsify/adwaita-core";function applyAdwaitaNsAccent(n){r(n),t.addCss(e(n))}function clearAdwaitaNsAccent(){r(n),t.addCss(e(n))}export{applyAdwaitaNsAccent,clearAdwaitaNsAccent};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{ButtonRowState as e,buttonRowIconVisuals as
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{ButtonRowState as e,buttonRowIconColor as t,buttonRowIconVisuals as n}from"./row-state.js";import{ACTIVATED as r,AdwActionRow as i}from"./adw-action-row.js";import{AdwIcon as a}from"./adw-icon.js";import{attachRowPressFeedback as o}from"./row-press.js";import{StackLayout as s}from"@nativescript/core";import{adwaitaAccent as c,onAdwaitaAccentChanged as l}from"@gjsify/adwaita-core";var u=class AdwButtonRow extends i{isActionRow=!1;_contentBox;_startIcon;_endIcon;_pinnedIconColor=null;_unsubAccent=null;_buttonState=new e;constructor(){super(),this.className=`adw-row adw-action-row adw-button-row`,this._titleLabel.className=`adw-button-row-title`,this._titleLabel.horizontalAlignment=`center`,this._textStack.removeChild(this._titleLabel);let e=new s;e.orientation=`horizontal`,e.className=`adw-button-row-content`,e.horizontalAlignment=`center`,this._startIcon=AdwButtonRow._makeIcon(`adw-button-row-start-icon`),this._endIcon=AdwButtonRow._makeIcon(`adw-button-row-end-icon`),this._applyIconColor(),this.addEventListener(`loaded`,()=>{this._applyIconColor(),this._unsubAccent??=l(()=>this._applyIconColor())}),this.addEventListener(`unloaded`,()=>{this._unsubAccent?.(),this._unsubAccent=null}),e.addChild(this._startIcon),e.addChild(this._titleLabel),e.addChild(this._endIcon),this._textStack.addChild(e),this._textStack.horizontalAlignment=`center`,this._contentBox=e,this.activatable=!0,this._applyIcons(),o(this)}static _makeIcon(e){let t=new a;return t.className=`${t.className} ${e}`.trim(),t.verticalAlignment=`middle`,t}get startIcon(){return this._buttonState.startIconName}set startIcon(e){this._buttonState.setStartIconName(e)&&this._applyIcons()}get endIcon(){return this._buttonState.endIconName}set endIcon(e){this._buttonState.setEndIconName(e)&&this._applyIcons()}get startIconColor(){return this._startIcon.iconColor}set startIconColor(e){this._pinnedIconColor=e||null,this._applyIconColor()}_applyIconColor(){let e=t(this._pinnedIconColor,c());this._startIcon.iconColor=e,this._endIcon.iconColor=e}_applyIcons(){let e=n(this._buttonState.state);this._startIcon.icon=e.startIcon,this._startIcon.visibility=e.startIconVisibility,this._endIcon.icon=e.endIcon,this._endIcon.visibility=e.endIconVisibility}};export{r as ACTIVATED,u as AdwButtonRow};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{Button as e}from"@nativescript/core";
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{Button as e}from"@nativescript/core";import{ADW_BUTTON_STYLE_CLASSES as t,buttonStyleClass as n}from"@gjsify/adwaita-core";var AdwButton=class extends e{_variant=`default`;constructor(){super(),this.className=`adw-button`,this.set(`androidElevation`,0)}get variant(){return this._variant}set variant(e){this._variant=e;let t=e==="default"?null:n(e);this.className=t?`adw-button ${t}`:`adw-button`}static get variantClasses(){return t}};export{AdwButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{AdwActionRow as e}from"./adw-action-row.js";import{AdwIcon as t}from"./adw-icon.js";import{AdwImageButton as n}from"./adw-image-button.js";import{NS_EDIT_ICON_CLASS as r,NS_ENTRY_ROW_CLASS as i,applyEntryRowState as a}from"./entry-row-view.js";import{Label as o,StackLayout as s,TextField as c}from"@nativescript/core";import{
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{AdwActionRow as e}from"./adw-action-row.js";import{AdwIcon as t}from"./adw-icon.js";import{AdwImageButton as n}from"./adw-image-button.js";import{NS_EDIT_ICON_CLASS as r,NS_ENTRY_ROW_CLASS as i,applyEntryRowState as a}from"./entry-row-view.js";import{Label as o,StackLayout as s,TextField as c}from"@nativescript/core";import{ADW_ACCENT_FG_COLOR as l,EntryRowState as u,EntryRowState as d}from"@gjsify/adwaita-core";import{documentEditSymbolic as f,objectSelectSymbolic as p}from"@gjsify/adwaita-icons/actions";const m=`notify::text`,h=`notify::text-length`,g=`apply`,_=`entry-activated`;var AdwEntryRow=class extends e{isActionRow=!1;_state=new d;_field;_emptyTitle;_suffixes;_editIcon;_indicator;_applyButton;_slotSuffix=null;_lastText=``;_lastLength=0;constructor(){super(),this._titleLabel.className=`adw-row-title adw-entry-title`,this._managesTitleVisibility=!1;let e=new o;e.className=`adw-row-title adw-entry-empty-title`,e.textWrap=!0,this._textStack.insertChild(e,0),this._emptyTitle=e;let i=new c;i.className=`adw-entry-field`,i.set(`backgroundColor`,`transparent`),i.set(`borderWidth`,0),this._textStack.addChild(i),this._field=i;let a=new s;a.orientation=`horizontal`,a.className=`adw-entry-row-suffixes`,this._suffixes=a;let u=new t;u.className=`adw-icon adw-entry-indicator`,a.addChild(u),this._indicator=u;let d=new n;d.className=`${d.className} adw-entry-apply`.trim(),d.icon=p,d.iconColor=l,d.addEventListener(`tap`,()=>this.apply()),a.addChild(d),this._applyButton=d;let m=new t;m.className=r,m.icon=f,a.addChild(m),this._editIcon=m,super.setSuffix(a),this._field.addEventListener(`textChange`,()=>{this._state.setText(this._field.text??``)}),this._field.addEventListener(`focus`,()=>this._state.setEditing(!0)),this._field.addEventListener(`blur`,()=>this._state.setEditing(!1)),this._field.addEventListener(`returnPress`,()=>this._activate()),this._lastText=this._state.text,this._lastLength=this._state.textLength,this._render(this._state.state),this._state.subscribe(e=>this._onStateChanged(e))}get text(){return this._state.text}set text(e){this._state.setText(e??``)}get textLength(){return this._state.textLength}get maxLength(){return this._state.maxLength}set maxLength(e){this._state.setMaxLength(e)}get editable(){return this._state.editable}set editable(e){this._state.setEditable(e)}get showApplyButton(){return this._state.showApplyButton}set showApplyButton(e){this._state.setShowApplyButton(e)}get activatesDefault(){return this._state.activatesDefault}set activatesDefault(e){this._state.setActivatesDefault(e)}get editing(){return this._state.editing}addSuffix(e){e.className=`${e.className??``} adw-row-suffix`.trim(),this._suffixes.addChild(e)}setSuffix(e){this._slotSuffix&&=(this._suffixes.removeChild(this._slotSuffix),null),e&&(this.addSuffix(e),this._slotSuffix=e)}get suffix(){return this._slotSuffix}setShowIndicator(e){this._state.setShowIndicator(e)}setIndicatorIcon(e){this._indicator.icon=e}apply(){this._state.apply(),this.notify({eventName:g,object:this})}_activate(){let e=this._state.activate();if(e.signal===`apply`){this.notify({eventName:g,object:this});return}let t={eventName:_,object:this,activateDefault:e.activateDefault};this.notify(t)}_render(e){a({row:this,emptyTitle:this._emptyTitle,title:this._titleLabel,field:this._field,editIcon:this._editIcon,indicator:this._indicator,applyButton:this._applyButton},e,this._baseClassName)}get _baseClassName(){return i}_onStateChanged(e){if(this._render(e),e.text!==this._lastText){this._lastText=e.text;let t={eventName:m,object:this,text:e.text};this.notify(t)}if(e.textLength!==this._lastLength){this._lastLength=e.textLength;let t={eventName:h,object:this,textLength:e.textLength};this.notify(t)}}};export{AdwEntryRow,u as EntryRowState,m as NOTIFY_TEXT,h as NOTIFY_TEXT_LENGTH,g as SIGNAL_APPLY,_ as SIGNAL_ENTRY_ACTIVATED};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{AdwActionRow as e}from"./adw-action-row.js";import{AdwIcon as t}from"./adw-icon.js";import{GridLayout as n,ItemSpec as r,StackLayout as i}from"@nativescript/core";import{ExpanderState as a,ExpanderState as o}from"@gjsify/adwaita-core";import{panDownSymbolic as s,panUpSymbolic as c}from"@gjsify/adwaita-icons/ui";const l=`notify::expanded`;var AdwExpanderRow=class extends e{isActionRow=!1;_toggle;_disclosure;_state=new o;constructor(){super(),this.className=`adw-row adw-action-row adw-expander-row`,this.addRow(new r(1,`auto`));let e=new i;e.orientation=`vertical`,e.className=`adw-expander-disclosure`,e.visibility=`collapse`,n.setRow(e,1),n.setColumn(e,0),n.setColumnSpan(e,3),this.addChild(e),this._disclosure=e;let a=new t;a.icon=s,a.className=`${a.className} adw-expander-toggle`.trim(),this.setSuffix(a),this._toggle=a,this._state.subscribe(e=>{this._disclosure.visibility=e?`visible`:`collapse`,this._toggle.icon=e?c:s;let t={eventName:l,object:this,expanded:e};this.notify(t)})
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{AdwActionRow as e}from"./adw-action-row.js";import{AdwIcon as t}from"./adw-icon.js";import{GridLayout as n,ItemSpec as r,StackLayout as i}from"@nativescript/core";import{ExpanderState as a,ExpanderState as o}from"@gjsify/adwaita-core";import{panDownSymbolic as s,panUpSymbolic as c}from"@gjsify/adwaita-icons/ui";const l=`notify::expanded`;var AdwExpanderRow=class extends e{isActionRow=!1;_toggle;_disclosure;_state=new o;constructor(){super(),this.className=`adw-row adw-action-row adw-expander-row`,this.addRow(new r(1,`auto`));let e=new i;e.orientation=`vertical`,e.className=`adw-expander-disclosure`,e.visibility=`collapse`,n.setRow(e,1),n.setColumn(e,0),n.setColumnSpan(e,3),this.addChild(e),this._disclosure=e;let a=new t;a.icon=s,a.className=`${a.className} adw-expander-toggle`.trim(),this.setSuffix(a),this._toggle=a,this._state.subscribe(e=>{this._disclosure.visibility=e?`visible`:`collapse`,this._toggle.icon=e?c:s;let t={eventName:l,object:this,expanded:e};this.notify(t)});let toggleOnTap=()=>{this._state.toggle()};this._textStack.addEventListener(`tap`,toggleOnTap),a.addEventListener(`tap`,toggleOnTap)}addRow(e){if(e instanceof r){super.addRow(e);return}this._disclosure.addChild(e)}removeRow(e){this._disclosure.removeChild(e)}get expanded(){return this._state.expanded}set expanded(e){this._state.setExpanded(e)}};export{AdwExpanderRow,a as ExpanderState,l as NOTIFY_EXPANDED};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{defaultToolbarViewProps as e,toolbarViewClassNames as t}from"./chrome.js";import{
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{defaultToolbarViewProps as e,toolbarViewClassNames as t}from"./chrome.js";import{NO_INSETS as n,toolbarViewInsetPadding as r}from"./window-insets.js";import{observeWindowInsets as i}from"./window-insets-source.js";import{GridLayout as a,ItemSpec as o,StackLayout as s}from"@nativescript/core";const c={view:`adw-toolbar-view`,topBar:`adw-toolbar-view-top`,bottomBar:`adw-toolbar-view-bottom`};var AdwToolbarView=class extends a{_topBox;_bottomBox;_content=null;_props=e();_insets=n;_topBarCount=0;_bottomBarCount=0;_detachInsets=null;constructor(){super(),this.className=c.view,this.addColumn(new o(1,`star`)),this.addRow(new o(1,`auto`)),this.addRow(new o(1,`star`)),this.addRow(new o(1,`auto`));let e=new s;e.orientation=`vertical`,e.className=c.topBar,a.setRow(e,0),this.addChild(e),this._topBox=e;let t=new s;t.orientation=`vertical`,t.className=c.bottomBar,a.setRow(t,2),this.addChild(t),this._bottomBox=t,this.addEventListener(`layoutChanged`,()=>this._syncClasses()),this.addEventListener(`loaded`,()=>{this._detachInsets??=i(e=>this._applyInsets(e))}),this.addEventListener(`unloaded`,()=>{this._detachInsets?.(),this._detachInsets=null})}addTopBar(e){this._topBox.addChild(e),this._topBarCount+=1,this._applyInsets(this._insets)}addBottomBar(e){this._bottomBox.addChild(e),this._bottomBarCount+=1,this._applyInsets(this._insets)}setContent(e){this._content&&=(this.removeChild(this._content),null),e&&(a.setRow(e,1),this.addChild(e),this._content=e),this._restackBars()}get content(){return this._content}get topBar(){return this._topBox}get bottomBar(){return this._bottomBox}get topBarStyle(){return this._props.topBarStyle}set topBarStyle(e){this._props.topBarStyle=e,this._syncClasses()}get bottomBarStyle(){return this._props.bottomBarStyle}set bottomBarStyle(e){this._props.bottomBarStyle=e,this._syncClasses()}get extendContentToTopEdge(){return this._props.extendContentToTopEdge}set extendContentToTopEdge(e){this._props.extendContentToTopEdge=!!e,this._applyBarPlacement()}get extendContentToBottomEdge(){return this._props.extendContentToBottomEdge}set extendContentToBottomEdge(e){this._props.extendContentToBottomEdge=!!e,this._applyBarPlacement()}_applyBarPlacement(){a.setRow(this._topBox,+!!this._props.extendContentToTopEdge),this._topBox.verticalAlignment=this._props.extendContentToTopEdge?`top`:`stretch`,a.setRow(this._bottomBox,this._props.extendContentToBottomEdge?1:2),this._bottomBox.verticalAlignment=this._props.extendContentToBottomEdge?`bottom`:`stretch`,this._restackBars(),this._syncClasses()}_restackBars(){if(!(!this._props.extendContentToTopEdge&&!this._props.extendContentToBottomEdge))for(let e of[this._topBox,this._bottomBox])this.removeChild(e),this.addChild(e)}_applyInsets(e){this._insets=e;let t=r(e,{hasTopBar:this._topBarCount>0,hasBottomBar:this._bottomBarCount>0});this._topBox.paddingTop=t.topBarTop,this._bottomBox.paddingBottom=t.bottomBarBottom,this.paddingTop=t.contentTop,this.paddingBottom=t.contentBottom}_syncClasses(){let e={topBarHeight:this._topBox.getActualSize?.().height??0,bottomBarHeight:this._bottomBox.getActualSize?.().height??0},n=t({view:this.className,topBar:this._topBox.className,bottomBar:this._bottomBox.className},this._props,e);this.className!==n.view&&(this.className=n.view),this._topBox.className!==n.topBar&&(this._topBox.className=n.topBar),this._bottomBox.className!==n.bottomBar&&(this._bottomBox.className=n.bottomBar)}};export{AdwToolbarView};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{viewConcealSymbolic as e,viewRevealSymbolic as t}from"@gjsify/adwaita-icons/actions";const n=`adw-row adw-action-row adw-entry-row`,r=`${n} adw-password-entry-row`,i=`adw-icon adw-entry-edit`,a=`adw-insensitive`,o=.
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{viewConcealSymbolic as e,viewRevealSymbolic as t}from"@gjsify/adwaita-icons/actions";const n=`adw-row adw-action-row adw-entry-row`,r=`${n} adw-password-entry-row`,i=`adw-icon adw-entry-edit`,a=`adw-insensitive`,o=.3;function nsVisibility(e){return e?`visible`:`collapse`}function entryRowClassName(e,t){let n=e;return t.editing&&(n+=` focused`),t.empty&&(n+=` empty`),n}function applyEntryRowState(e,t,n){e.row.className=entryRowClassName(n,t),e.field.text!==t.text&&(e.field.text=t.text),e.field.editable=t.editable,e.emptyTitle.visibility=nsVisibility(t.emptyTarget===0),e.title.visibility=nsVisibility(t.emptyTarget===1),e.editIcon.visibility=nsVisibility(t.editIconVisible),e.editIcon.className=t.editIconSensitive?i:`${i} ${a}`,e.editIcon.opacity=t.editIconSensitive?1:o,e.indicator.visibility=nsVisibility(t.indicatorVisible),e.applyButton.visibility=nsVisibility(t.applyButtonVisible)}function peekIconSvg(n){return n===`view-conceal-symbolic`?e:t}function applyPasswordEntryRowState(e,t){e.field.secure=!t.revealed,e.peekButton.icon=peekIconSvg(t.peekIconName)}export{i as NS_EDIT_ICON_CLASS,n as NS_ENTRY_ROW_CLASS,a as NS_INSENSITIVE_CLASS,o as NS_INSENSITIVE_OPACITY,r as NS_PASSWORD_ENTRY_ROW_CLASS,applyEntryRowState,applyPasswordEntryRowState,entryRowClassName,nsVisibility,peekIconSvg};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";import{ActionRowState as e,ButtonRowState as t,SwitchRowState as n,WindowTitleState as r,deriveRowLabels as
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{ActionRowState as e,ButtonRowState as t,SwitchRowState as n,WindowTitleState as r,adwaitaAccentBgColor as i,deriveRowLabels as a}from"@gjsify/adwaita-core";function nsVisibility(e){return e?`visible`:`collapse`}function rowLabelVisuals(e){return toLabelVisuals(a(e))}function toLabelVisuals(e){return{title:e.title,titleVisibility:nsVisibility(e.titleVisible),subtitle:e.subtitle,subtitleVisibility:nsVisibility(e.subtitleVisible)}}function buttonRowIconVisuals(e){return{startIcon:e.startIconName,startIconVisibility:nsVisibility(e.startIconVisible),endIcon:e.endIconName,endIconVisibility:nsVisibility(e.endIconVisible)}}function buttonRowIconColor(e,t){return e||i(t)}function isViewSensitive(e){return e?e.isUserInteractionEnabled!==!1:!0}export{e as ActionRowState,t as ButtonRowState,n as SwitchRowState,r as WindowTitleState,buttonRowIconColor,buttonRowIconVisuals,isViewSensitive,nsVisibility,rowLabelVisuals,toLabelVisuals};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../_virtual/_rolldown/runtime.js";function statusPageLabelVisibility(
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{stringIsNotEmpty as e}from"@gjsify/adwaita-core";function statusPageLabelVisibility(t){return e(t)?`visible`:`collapse`}function statusPageIconVisibility(t){return e(t)?`visible`:`collapse`}export{statusPageIconVisibility,statusPageLabelVisibility};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{WindowInsetsBroadcast as e}from"./window-insets.js";import{Application as t,Screen as n}from"@nativescript/core";const r=new e;let i=!1;function toDips(e){let t=n.mainScreen?.scale??1;return t>0?e/t:e}function install(){if(i)return;let e=androidx?.core?.view;if(!e)return;let n=(t.android?.foregroundActivity??t.android?.startActivity)?.getWindow?.(),a=n?.getDecorView?.();if(!n||!a)return;i=!0,e.WindowCompat.setDecorFitsSystemWindows(n,!1);let o=e.WindowInsetsCompat.Type.systemBars()|e.WindowInsetsCompat.Type.displayCutout();e.ViewCompat.setOnApplyWindowInsetsListener(a,new e.OnApplyWindowInsetsListener({onApplyWindowInsets(e,t){let n=t.getInsets(o);return r.publish({top:toDips(n.top),bottom:toDips(n.bottom),left:toDips(n.left),right:toDips(n.right)}),t}}))}function observeWindowInsets(e){return install(),r.subscribe(e)}export{observeWindowInsets};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{WindowInsetsBroadcast as e}from"./window-insets.js";import{Application as t}from"@nativescript/core";const n=new e;function read(){let e=t.ios?.window?.safeAreaInsets;e&&n.publish(e)}const r=[`orientationChanged`,`resume`];function observeWindowInsets(e){read();let i=n.subscribe(e),reread=()=>read();for(let e of r)t.on?.(e,reread);return()=>{for(let e of r)t.off?.(e,reread);i()}}export{observeWindowInsets};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";import{WindowInsetsBroadcast as e}from"./window-insets.js";const t=new e;function observeWindowInsets(e){return t.subscribe(e)}export{observeWindowInsets};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"../_virtual/_rolldown/runtime.js";const e={top:0,bottom:0,left:0,right:0};function toolbarViewInsetPadding(e,t){return{topBarTop:t.hasTopBar?e.top:0,contentTop:t.hasTopBar?0:e.top,bottomBarBottom:t.hasBottomBar?e.bottom:0,contentBottom:t.hasBottomBar?0:e.bottom}}function normaliseInsets(e){let at=e=>typeof e==`number`&&Number.isFinite(e)&&e>0?e:0;return{top:at(e?.top),bottom:at(e?.bottom),left:at(e?.left),right:at(e?.right)}}var WindowInsetsBroadcast=class{_listeners=new Set;_last=e;get last(){return this._last}subscribe(e){return this._listeners.add(e),e(this._last),()=>{this._listeners.delete(e)}}publish(e){let t=normaliseInsets(e);if(t.top===this._last.top&&t.bottom===this._last.bottom&&t.left===this._last.left&&t.right===this._last.right)return!1;this._last=t;for(let e of[...this._listeners])e(t);return!0}};export{e as NO_INSETS,WindowInsetsBroadcast,normaliseInsets,toolbarViewInsetPadding};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type AdwAccentColorName } from '@gjsify/adwaita-core';
|
|
2
|
-
/** Which
|
|
3
|
-
export type AccentRole = 'fill' | 'shade';
|
|
2
|
+
/** Which accent shade a declaration carries. */
|
|
3
|
+
export type AccentRole = 'fill' | 'shade' | 'standalone-dark';
|
|
4
4
|
/** One accent-carrying declaration in `theme/adwaita.css`. */
|
|
5
5
|
export interface AccentRule {
|
|
6
6
|
/** The selector, exactly as the theme spells it. */
|
|
@@ -40,6 +40,24 @@ export declare class AdwAboutDialog extends GridLayout {
|
|
|
40
40
|
/** The copyright line. */
|
|
41
41
|
get copyright(): string;
|
|
42
42
|
set copyright(value: string);
|
|
43
|
+
/**
|
|
44
|
+
* Push the seven strings onto their labels, and COLLAPSE the ones with nothing
|
|
45
|
+
* to say.
|
|
46
|
+
*
|
|
47
|
+
* Every label used to be unconditionally visible, so an about dialog without a
|
|
48
|
+
* version rendered a blank line where the version belongs — the exact case
|
|
49
|
+
* `aboutDialogVisibility` answers for the browser port (`adw-about-dialog.c`
|
|
50
|
+
* binds each part's `visible` to a closure over the property that feeds it).
|
|
51
|
+
* Same input, two different dialogs, and nothing said so.
|
|
52
|
+
*
|
|
53
|
+
* The core's record covers a nineteen-part dialog; this port is a flat card, so
|
|
54
|
+
* it reads the parts it has. `copyright` is NOT one of them: upstream has no
|
|
55
|
+
* copyright LABEL, it derives the string into the Legal page this port does not
|
|
56
|
+
* build (`legalSectionVisible` takes it as a separate argument). It therefore
|
|
57
|
+
* keeps the same non-empty rule directly. The website row is the core's
|
|
58
|
+
* `websiteRow`, which is the flat-card equivalent here.
|
|
59
|
+
*/
|
|
60
|
+
private _render;
|
|
43
61
|
/** Reveal the about overlay. */
|
|
44
62
|
present(): void;
|
|
45
63
|
/** Hide the about overlay and emit `closed`. */
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import { type AdwAccentColorName } from '@gjsify/adwaita-core';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Repaint every accent-coloured rule in the theme for `accent`.
|
|
4
|
+
*
|
|
5
|
+
* The core's accent state is set FIRST, and that is not bookkeeping. A widget
|
|
6
|
+
* whose accent lands somewhere CSS cannot reach — a symbolic icon is a bitmap
|
|
7
|
+
* rendered in its fill colour — can only follow by re-rendering on
|
|
8
|
+
* `onAdwaitaAccentChanged`, and that fires from here. `setAdwaitaAccent`'s own
|
|
9
|
+
* documentation names this as the renderer's half of the contract; the two were
|
|
10
|
+
* simply never connected on this port, so `adwaitaAccent()` stayed `'blue'`
|
|
11
|
+
* however many times the stylesheet was replaced.
|
|
12
|
+
*/
|
|
3
13
|
export declare function applyAdwaitaNsAccent(accent: AdwAccentColorName): void;
|
|
4
14
|
/**
|
|
5
15
|
* Go back to libadwaita's default blue.
|
|
@@ -13,6 +13,10 @@ export declare class AdwButtonRow extends AdwActionRow {
|
|
|
13
13
|
protected readonly _startIcon: AdwIcon;
|
|
14
14
|
/** The trailing symbolic icon. */
|
|
15
15
|
protected readonly _endIcon: AdwIcon;
|
|
16
|
+
/** An explicit icon fill (the destructive red), or `null` to follow the accent. */
|
|
17
|
+
private _pinnedIconColor;
|
|
18
|
+
/** Live accent subscription — held only while the row is on screen. */
|
|
19
|
+
private _unsubAccent;
|
|
16
20
|
/**
|
|
17
21
|
* The headless start/end icon state (ADR 0004).
|
|
18
22
|
*
|
|
@@ -23,7 +27,8 @@ export declare class AdwButtonRow extends AdwActionRow {
|
|
|
23
27
|
*/
|
|
24
28
|
private readonly _buttonState;
|
|
25
29
|
constructor();
|
|
26
|
-
/** A centered
|
|
30
|
+
/** A centered symbolic icon, collapsed until it has content. Its fill is set by
|
|
31
|
+
* {@link _applyIconColor}, which is also what follows an accent change. */
|
|
27
32
|
private static _makeIcon;
|
|
28
33
|
/**
|
|
29
34
|
* A leading Adwaita symbolic SVG string before the centered title (e.g.
|
|
@@ -45,6 +50,8 @@ export declare class AdwButtonRow extends AdwActionRow {
|
|
|
45
50
|
*/
|
|
46
51
|
get startIconColor(): string;
|
|
47
52
|
set startIconColor(value: string);
|
|
53
|
+
/** Paint both icons in the pinned colour, or in the active accent's fill. */
|
|
54
|
+
private _applyIconColor;
|
|
48
55
|
/** Push the derived icon payload + visibility onto the two `AdwIcon`s. */
|
|
49
56
|
private _applyIcons;
|
|
50
57
|
}
|
|
@@ -1,12 +1,19 @@
|
|
|
1
|
+
import { type AdwButtonStyleClass } from '@gjsify/adwaita-core';
|
|
1
2
|
import { Button } from '@nativescript/core';
|
|
2
|
-
/**
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* The Adwaita button variants this widget can apply. `'default'` = plain button.
|
|
5
|
+
*
|
|
6
|
+
* The class list is `@gjsify/adwaita-core`'s, not a local table: this widget's own
|
|
7
|
+
* one was MISSING `circular`, which the browser element had, and neither file could
|
|
8
|
+
* see the other. `circular` is now here because the shared table says it exists.
|
|
9
|
+
*/
|
|
10
|
+
export type AdwButtonVariant = 'default' | AdwButtonStyleClass;
|
|
4
11
|
export declare class AdwButton extends Button {
|
|
5
12
|
private _variant;
|
|
6
13
|
constructor();
|
|
7
14
|
/**
|
|
8
15
|
* The Adwaita style variant. Setting it swaps the corresponding CSS class
|
|
9
|
-
* (
|
|
16
|
+
* (one of `AdwButton.variantClasses`) onto the button,
|
|
10
17
|
* preserving the base `adw-button` class. Note that `pill` is the rounded
|
|
11
18
|
* SHAPE and combines with no other variant here (set the shape OR the accent
|
|
12
19
|
* intent — matching how this CSS subset expresses them as flat classes).
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
import type { AdwMenuEntry } from '@gjsify/adwaita-core';
|
|
1
2
|
import { type EventData } from '@nativescript/core';
|
|
2
3
|
import { AdwImageButton } from './adw-image-button.js';
|
|
3
4
|
/** Event name emitted when a menu item is chosen. */
|
|
4
5
|
export declare const MENU_ITEM_ACTIVATED = "menuItemActivated";
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
/**
|
|
7
|
+
* One entry in an {@link AdwMenuButton}'s menu — `@gjsify/adwaita-core`'s
|
|
8
|
+
* {@link AdwMenuEntry}, under the name this widget has always used.
|
|
9
|
+
*
|
|
10
|
+
* It used to be a THIRD declaration of the same shape (the browser element had a
|
|
11
|
+
* second, and the core the original), and this one was missing `icon` — so a menu
|
|
12
|
+
* written for one renderer was not the same object on the other. The browser side
|
|
13
|
+
* adopted the core type in #1191; this is its twin.
|
|
14
|
+
*/
|
|
15
|
+
export type AdwMenuItem = AdwMenuEntry;
|
|
12
16
|
/** Payload of the {@link MENU_ITEM_ACTIVATED} event. */
|
|
13
17
|
export interface MenuItemActivatedEventData extends EventData {
|
|
14
18
|
/** The chosen item's id (or its label when no id was given). */
|
|
@@ -8,6 +8,11 @@ export declare class AdwToolbarView extends GridLayout {
|
|
|
8
8
|
/** The currently-installed content view (row 1), if any. */
|
|
9
9
|
private _content;
|
|
10
10
|
private _props;
|
|
11
|
+
/** The last window insets seen, so a shape change can be re-paid without waiting. */
|
|
12
|
+
private _insets;
|
|
13
|
+
private _topBarCount;
|
|
14
|
+
private _bottomBarCount;
|
|
15
|
+
private _detachInsets;
|
|
11
16
|
constructor();
|
|
12
17
|
/** Append a widget (e.g. an {@link AdwHeaderBar}) to the top-bar slot. */
|
|
13
18
|
addTopBar(view: View): void;
|
|
@@ -48,6 +53,16 @@ export declare class AdwToolbarView extends GridLayout {
|
|
|
48
53
|
* while neither edge is extended, since the boxes then have their own rows.
|
|
49
54
|
*/
|
|
50
55
|
private _restackBars;
|
|
56
|
+
/**
|
|
57
|
+
* Pay each edge's inset out of the slot that sits on it.
|
|
58
|
+
*
|
|
59
|
+
* The assignment is decided by the pure sibling (`toolbarViewInsetPadding`); this
|
|
60
|
+
* only spells it in NativeScript. Where that module says "the content pays", the
|
|
61
|
+
* padding goes on THIS view rather than on the content view: the content belongs
|
|
62
|
+
* to the consumer, and a chrome that writes padding into a consumer's widget
|
|
63
|
+
* would silently overwrite whatever they set there.
|
|
64
|
+
*/
|
|
65
|
+
private _applyInsets;
|
|
51
66
|
/**
|
|
52
67
|
* Re-derive the four libadwaita style classes from the current state.
|
|
53
68
|
*
|
|
@@ -54,8 +54,16 @@ export declare const NS_EDIT_ICON_CLASS = "adw-icon adw-entry-edit";
|
|
|
54
54
|
* actually sees.
|
|
55
55
|
*/
|
|
56
56
|
export declare const NS_INSENSITIVE_CLASS = "adw-insensitive";
|
|
57
|
-
/**
|
|
58
|
-
|
|
57
|
+
/**
|
|
58
|
+
* Opacity of the desensitized pencil — `$strong_disabled_opacity` 30%
|
|
59
|
+
* (_colors.scss:311), which `> .edit-icon:disabled` takes (_lists.scss:205-207).
|
|
60
|
+
*
|
|
61
|
+
* NOT the general `--disabled-opacity` (50% light / 40% dark): libadwaita gives
|
|
62
|
+
* this one icon a stronger dim than a disabled widget gets, and 0.4 here was the
|
|
63
|
+
* general value applied to the one place that has its own. A second user of
|
|
64
|
+
* {@link NS_INSENSITIVE_CLASS} needs its own number, not this one.
|
|
65
|
+
*/
|
|
66
|
+
export declare const NS_INSENSITIVE_OPACITY = 0.3;
|
|
59
67
|
/** Map a boolean onto NativeScript's `visibility`. */
|
|
60
68
|
export declare function nsVisibility(visible: boolean): NsVisibility;
|
|
61
69
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ActionRowState, ButtonRowState, SwitchRowState, WindowTitleState } from '@gjsify/adwaita-core';
|
|
2
|
-
import type { AdwRowLabelInput, AdwRowLabels, ButtonRowRenderState } from '@gjsify/adwaita-core';
|
|
2
|
+
import type { AdwAccentColorName, AdwRowLabelInput, AdwRowLabels, ButtonRowRenderState } from '@gjsify/adwaita-core';
|
|
3
3
|
import type { View } from '@nativescript/core';
|
|
4
4
|
export { ActionRowState, ButtonRowState, SwitchRowState, WindowTitleState };
|
|
5
5
|
export type { AdwRowLabels, ButtonRowRenderState };
|
|
@@ -42,6 +42,21 @@ export interface NsButtonRowIconVisuals {
|
|
|
42
42
|
* is `string_is_not_empty`, which reads the first byte.
|
|
43
43
|
*/
|
|
44
44
|
export declare function buttonRowIconVisuals(state: ButtonRowRenderState): NsButtonRowIconVisuals;
|
|
45
|
+
/**
|
|
46
|
+
* The fill an `AdwButtonRow`'s two symbolic icons take.
|
|
47
|
+
*
|
|
48
|
+
* `row.button` paints its title in `--accent-color` and libadwaita moves it with
|
|
49
|
+
* the accent; here the icons are bitmaps rendered in a colour, so the value has
|
|
50
|
+
* to be RESOLVED rather than inherited, and it has to be resolved again whenever
|
|
51
|
+
* the accent changes. An explicit `pinned` colour wins — that is how a caller
|
|
52
|
+
* gives a `destructive-action` row its red — and an empty pin means "follow",
|
|
53
|
+
* not "freeze on the blue that was current when you asked".
|
|
54
|
+
*
|
|
55
|
+
* Lives here, in the module with no `@nativescript/core` value imports, because
|
|
56
|
+
* `AdwButtonRow extends AdwActionRow extends GridLayout` and no spec can import
|
|
57
|
+
* it off-device. A rule inside that class is a rule nothing checks.
|
|
58
|
+
*/
|
|
59
|
+
export declare function buttonRowIconColor(pinned: string | null | undefined, accent: AdwAccentColorName): string;
|
|
45
60
|
/**
|
|
46
61
|
* Whether a view is "sensitive" in the sense the `activatable-widget` binding reads
|
|
47
62
|
* (`GtkWidget:sensitive` → `GtkListBoxRow:activatable`).
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type WindowInsetsListener } from './window-insets.js';
|
|
2
|
+
/**
|
|
3
|
+
* Subscribe to window-inset changes. Returns the unsubscribe.
|
|
4
|
+
*
|
|
5
|
+
* The listener is called once, immediately, with zero insets — the same contract
|
|
6
|
+
* the platform variants keep, so a consumer never needs a platform branch.
|
|
7
|
+
*/
|
|
8
|
+
export declare function observeWindowInsets(listener: WindowInsetsListener): () => void;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/** The four window insets, in device-independent pixels. */
|
|
2
|
+
export interface WindowInsets {
|
|
3
|
+
readonly top: number;
|
|
4
|
+
readonly bottom: number;
|
|
5
|
+
readonly left: number;
|
|
6
|
+
readonly right: number;
|
|
7
|
+
}
|
|
8
|
+
/** What the toolbar view looks like, as far as inset assignment cares. */
|
|
9
|
+
export interface ToolbarViewShape {
|
|
10
|
+
readonly hasTopBar: boolean;
|
|
11
|
+
readonly hasBottomBar: boolean;
|
|
12
|
+
}
|
|
13
|
+
/** Extra padding each slot must add on top of whatever the theme gives it. */
|
|
14
|
+
export interface InsetPadding {
|
|
15
|
+
readonly topBarTop: number;
|
|
16
|
+
readonly contentTop: number;
|
|
17
|
+
readonly bottomBarBottom: number;
|
|
18
|
+
readonly contentBottom: number;
|
|
19
|
+
}
|
|
20
|
+
export declare const NO_INSETS: WindowInsets;
|
|
21
|
+
/**
|
|
22
|
+
* Assign `insets` to the slots of a toolbar view of `shape`.
|
|
23
|
+
*
|
|
24
|
+
* Total per edge is always exactly the inset — never doubled across two slots, which
|
|
25
|
+
* would leave a visible gap the width of the status bar, and never dropped.
|
|
26
|
+
*/
|
|
27
|
+
export declare function toolbarViewInsetPadding(insets: WindowInsets, shape: ToolbarViewShape): InsetPadding;
|
|
28
|
+
/**
|
|
29
|
+
* Read the four values off whatever the platform handed over, clamping to ≥ 0.
|
|
30
|
+
*
|
|
31
|
+
* Defensive because the source is a native object across the NS bridge: a missing
|
|
32
|
+
* field arrives as `undefined` and would poison a `padding` assignment with `NaN`,
|
|
33
|
+
* which NS renders as zero padding on one edge and no error anywhere.
|
|
34
|
+
*/
|
|
35
|
+
export declare function normaliseInsets(raw: Partial<WindowInsets> | null | undefined): WindowInsets;
|
|
36
|
+
/** Notified whenever the window's insets change. */
|
|
37
|
+
export type WindowInsetsListener = (insets: WindowInsets) => void;
|
|
38
|
+
/**
|
|
39
|
+
* One inset reading, many widgets.
|
|
40
|
+
*
|
|
41
|
+
* The platform hands insets to ONE listener — `setOnApplyWindowInsetsListener`
|
|
42
|
+
* REPLACES whatever was there — while an app has as many toolbar views as it has
|
|
43
|
+
* panes (the storybook has two, sidebar and content). So the native listener is
|
|
44
|
+
* installed once and this fans the reading out.
|
|
45
|
+
*
|
|
46
|
+
* Two behaviours are load-bearing and both are checked from a Linux runner:
|
|
47
|
+
*
|
|
48
|
+
* - a subscriber gets the LAST reading immediately. Insets are dispatched once,
|
|
49
|
+
* early; a pane built afterwards would otherwise sit un-inset until the next
|
|
50
|
+
* rotation, which is the shape of bug that looks like "sometimes it works".
|
|
51
|
+
* - an unchanged reading is dropped. Android re-dispatches insets on every
|
|
52
|
+
* layout pass, and a `padding` write schedules another layout pass.
|
|
53
|
+
*/
|
|
54
|
+
export declare class WindowInsetsBroadcast {
|
|
55
|
+
private readonly _listeners;
|
|
56
|
+
private _last;
|
|
57
|
+
/** The most recent reading — {@link NO_INSETS} until the platform reports one. */
|
|
58
|
+
get last(): WindowInsets;
|
|
59
|
+
/** Subscribe, receiving {@link last} at once. Returns the unsubscribe. */
|
|
60
|
+
subscribe(listener: WindowInsetsListener): () => void;
|
|
61
|
+
/** Publish a platform reading. Normalised first; a no-change is not published. */
|
|
62
|
+
publish(raw: Partial<WindowInsets> | null | undefined): boolean;
|
|
63
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gjsify/adwaita-nativescript",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.40.0",
|
|
4
4
|
"description": "Native Adwaita widgets for the NativeScript runtime — real NativeScript components (StackLayout/GridLayout/Switch/Label) styled like Libadwaita, not a webview",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "lib/esm/index.js",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"design-system"
|
|
48
48
|
],
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@gjsify/adwaita-core": "^0.
|
|
51
|
-
"@gjsify/adwaita-fonts": "^0.
|
|
52
|
-
"@gjsify/adwaita-icons": "^0.
|
|
53
|
-
"@gjsify/native-platform": "^0.
|
|
50
|
+
"@gjsify/adwaita-core": "^0.40.0",
|
|
51
|
+
"@gjsify/adwaita-fonts": "^0.40.0",
|
|
52
|
+
"@gjsify/adwaita-icons": "^0.40.0",
|
|
53
|
+
"@gjsify/native-platform": "^0.40.0"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@nativescript/core": "*"
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@gjsify/cli": "^0.
|
|
65
|
-
"@gjsify/unit": "^0.
|
|
64
|
+
"@gjsify/cli": "^0.40.0",
|
|
65
|
+
"@gjsify/unit": "^0.40.0",
|
|
66
66
|
"@types/node": "^25.9.2",
|
|
67
67
|
"typescript": "^6.0.3"
|
|
68
68
|
},
|
package/src/theme/adwaita.css
CHANGED
|
@@ -55,11 +55,15 @@ Page.adw-window {
|
|
|
55
55
|
/* NS has no text-transform; author titles in upper-case in markup if desired. */
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
/* Dimmed description line below the title.
|
|
58
|
+
/* Dimmed description line below the title.
|
|
59
|
+
*
|
|
60
|
+
* The 6 above it is `box.labels`'s `border-spacing: 6px` (_preferences.scss:7-9)
|
|
61
|
+
* — the labels box carries nothing else, and the NS subset has no property for a
|
|
62
|
+
* spacing, so the gap rides on the second child. It was 2. */
|
|
59
63
|
.adw-preferences-group-description {
|
|
60
64
|
font-size: 12;
|
|
61
65
|
color: rgba(0, 0, 0, 0.55);
|
|
62
|
-
margin:
|
|
66
|
+
margin: 6 0 0 0;
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
/* The boxed list: rounded card holding the rows. */
|
|
@@ -185,6 +189,58 @@ Page.adw-window {
|
|
|
185
189
|
margin: 2 0 0 0;
|
|
186
190
|
}
|
|
187
191
|
|
|
192
|
+
/* The large placeholder shown while the row is EMPTY. `empty_title` carries
|
|
193
|
+
* `.title` AND `.dimmed` (adw-entry-row.ui), so it is a full-size title at
|
|
194
|
+
* `--dim-opacity` 55% (_colors.scss:319) — not a full-strength one. It inherits
|
|
195
|
+
* `.adw-row-title`'s size and colour and only dims here.
|
|
196
|
+
*
|
|
197
|
+
* `opacity`, not a dimmer `color` as most of this file spells "dim": the two
|
|
198
|
+
* titles are the endpoints of a cross-fade, so what this reproduces IS an alpha,
|
|
199
|
+
* and one value then answers both schemes. */
|
|
200
|
+
.adw-entry-empty-title {
|
|
201
|
+
opacity: 0.55;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* The trailing cluster — caps-lock indicator, apply button, pencil.
|
|
205
|
+
*
|
|
206
|
+
* libadwaita separates the three with `margin-left: 6px` EACH (_lists.scss:200-203,
|
|
207
|
+
* LTR), not with a spacing on the box that holds them: the NS subset has no
|
|
208
|
+
* `border-spacing`, so the same 6 rides on the children, as it does between the
|
|
209
|
+
* keycaps in `.adw-shortcut-label`.
|
|
210
|
+
*
|
|
211
|
+
* Their 24×24 + 5 padding box (_lists.scss:194-198) is deliberately NOT
|
|
212
|
+
* reproduced. It is a hit/alignment box around a 16 glyph, and NS would read a
|
|
213
|
+
* `min-width` on an `Image` as room to SCALE the bitmap into — an icon half
|
|
214
|
+
* again too large rather than a roomier one. The glyph size is AdwIcon's own. */
|
|
215
|
+
.adw-entry-indicator,
|
|
216
|
+
.adw-entry-edit {
|
|
217
|
+
margin: 0 0 0 6;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* The caps-lock warning sits at `$dimmer_opacity` 30% (_colors.scss:309, applied
|
|
221
|
+
* _lists.scss:209-214) — dimmer than `.dimmed`, because it is a passive warning
|
|
222
|
+
* rather than a label. */
|
|
223
|
+
.adw-entry-indicator {
|
|
224
|
+
opacity: 0.3;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* `apply_button` is built `suggested-action circular` (adw-entry-row.ui:91-102):
|
|
228
|
+
* an ACCENT-FILLED round button, not the flat rounded square every other
|
|
229
|
+
* `AdwImageButton` is. Compound selector so it beats the later `.adw-image-button`
|
|
230
|
+
* rule, as `.adw-spin-button` does. The 34×34 the base gives it already IS
|
|
231
|
+
* `%circular_button`'s minimum (_buttons.scss:312-317), so only the fill, the
|
|
232
|
+
* full radius and the 6 gap change. The checkmark is turned white in the widget:
|
|
233
|
+
* `--accent-fg-color` lands on a bitmap fill, which no CSS rule here can reach. */
|
|
234
|
+
.adw-image-button.adw-entry-apply {
|
|
235
|
+
background-color: #3584e4;
|
|
236
|
+
border-radius: 9999;
|
|
237
|
+
margin: 0 0 0 6;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.adw-image-button.adw-entry-apply:highlighted {
|
|
241
|
+
background-color: #1c71d8;
|
|
242
|
+
}
|
|
243
|
+
|
|
188
244
|
.adw-password-field {
|
|
189
245
|
/* secure handled in code; styling identical to a normal entry field. */
|
|
190
246
|
color: rgba(0, 0, 0, 0.8);
|
|
@@ -333,14 +389,24 @@ Page.adw-window {
|
|
|
333
389
|
|
|
334
390
|
/* ===== Expander row (disclosure) ===== */
|
|
335
391
|
|
|
392
|
+
/* The disclosure chevron. `expander-widget > box > title > expander` sits at 70%
|
|
393
|
+
* and goes opaque on hover/press (_expanders.scss:16-21); NS has no hover, so the
|
|
394
|
+
* resting 70% is the whole of it.
|
|
395
|
+
*
|
|
396
|
+
* The `width: 32` / `height: 32` that used to be here NEVER APPLIED. NativeScript
|
|
397
|
+
* ignores a CSS value for a property the widget has set as a LOCAL one
|
|
398
|
+
* (properties/index.js:585-598), and `AdwIcon` assigns `width`/`height` in its
|
|
399
|
+
* constructor — so the chevron has always been the 16 `expander`'s own minimum
|
|
400
|
+
* asks for (_expanders.scss:2-3), which is right, while the stylesheet claimed
|
|
401
|
+
* a 32 tap target it never got. `color` and `font-size` were dead for the other
|
|
402
|
+
* reason: it is an `Image` of a pre-coloured bitmap.
|
|
403
|
+
*
|
|
404
|
+
* The tap target is a separate matter, filed as #1155 — libadwaita toggles from
|
|
405
|
+
* the HEADER ROW ("must be activatable to toggle expansion by clicking or
|
|
406
|
+
* tapping anywhere on it", adw-expander-row.ui:25-27), and this port listens on
|
|
407
|
+
* the chevron alone. */
|
|
336
408
|
.adw-expander-toggle {
|
|
337
|
-
|
|
338
|
-
height: 32;
|
|
339
|
-
/* Flat chevron affordance — transparent, no button chrome. */
|
|
340
|
-
background-color: transparent;
|
|
341
|
-
color: rgba(0, 0, 0, 0.55);
|
|
342
|
-
font-size: 16;
|
|
343
|
-
padding: 0;
|
|
409
|
+
opacity: 0.7;
|
|
344
410
|
margin: 0;
|
|
345
411
|
}
|
|
346
412
|
|
|
@@ -537,22 +603,24 @@ Page.adw-window {
|
|
|
537
603
|
background-color: #fafafb;
|
|
538
604
|
}
|
|
539
605
|
|
|
606
|
+
/* The header-bar background, so the status-bar inset the widget pads with is painted
|
|
607
|
+
* in the header colour: the chrome reaches the screen edge, the header content stops
|
|
608
|
+
* short of the clock.
|
|
609
|
+
*
|
|
610
|
+
* The PADDING is no longer here. It used to be `padding-top: var(--safeAreaInsetTop,
|
|
611
|
+
* 0)`, with "the host app feeds the variable" — and nothing in this repo ever fed it,
|
|
612
|
+
* on any platform, so the fallback was the only value it ever had. It could not have
|
|
613
|
+
* worked either way: this NS CSS subset has no custom properties at all, which is the
|
|
614
|
+
* same reason the accent has to be inlined as a literal. AdwToolbarView applies the
|
|
615
|
+
* real reading now (#1128). */
|
|
540
616
|
.adw-toolbar-view-top {
|
|
541
|
-
/* Match the header-bar background so the TOP safe-area inset (status bar) is
|
|
542
|
-
* painted in the header colour — the chrome reaches the screen edge but the
|
|
543
|
-
* header content does not slide under the clock. Host app feeds the inset
|
|
544
|
-
* into --safeAreaInsetTop (falls back to 0 when unset). */
|
|
545
617
|
background-color: #ffffff;
|
|
546
|
-
padding-top: var(--safeAreaInsetTop, 0);
|
|
547
618
|
}
|
|
548
619
|
|
|
549
620
|
.adw-toolbar-view-bottom {
|
|
550
621
|
background-color: #ffffff;
|
|
551
622
|
border-top-width: 1;
|
|
552
623
|
border-top-color: rgba(0, 0, 0, 0.1);
|
|
553
|
-
/* BOTTOM safe-area inset (nav bar / gesture pill) painted in the bottom-bar
|
|
554
|
-
* colour. Host app feeds --safeAreaInsetBottom (falls back to 0). */
|
|
555
|
-
padding-bottom: var(--safeAreaInsetBottom, 0);
|
|
556
624
|
}
|
|
557
625
|
|
|
558
626
|
/* top-bar-style / bottom-bar-style = raised: an opaque background with a
|
|
@@ -836,10 +904,21 @@ Page.adw-window {
|
|
|
836
904
|
margin: 0;
|
|
837
905
|
}
|
|
838
906
|
|
|
907
|
+
/* The two glyphs either side of the centered title. `row.button > box` spaces its
|
|
908
|
+
* three children with `border-spacing: 6px` (_lists.scss:458-462), which the NS
|
|
909
|
+
* subset has no property for — so the 6 rides on the icons, mirrored.
|
|
910
|
+
*
|
|
911
|
+
* MARGIN ONLY. Both are `AdwIcon`s, i.e. `Image`s showing a bitmap that was
|
|
912
|
+
* rendered in its fill colour, so `color` here reaches nothing and `font-size`
|
|
913
|
+
* has no text to size. They used to be declared anyway, which put a dead accent
|
|
914
|
+
* declaration in the runtime-accent table as well; the colour now follows the
|
|
915
|
+
* accent through `iconColor`, which is the only thing that can carry it. */
|
|
839
916
|
.adw-button-row-start-icon {
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
917
|
+
margin: 0 6 0 0;
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
.adw-button-row-end-icon {
|
|
921
|
+
margin: 0 0 0 6;
|
|
843
922
|
}
|
|
844
923
|
|
|
845
924
|
/* ===== Button content (icon + label) ===== */
|
|
@@ -1494,6 +1573,27 @@ Page.ns-dark.adw-window {
|
|
|
1494
1573
|
color: #ffffff;
|
|
1495
1574
|
}
|
|
1496
1575
|
|
|
1576
|
+
/* The apply button keeps the SAME accent in both schemes (`--accent-bg-color`
|
|
1577
|
+
* does not change), so only the press shade is restated — and it HAS to be.
|
|
1578
|
+
* NativeScript sums specificity flat (class, attribute and pseudo-class are 10
|
|
1579
|
+
* each; css-selector.js:205,292) and breaks ties by source order, so the light
|
|
1580
|
+
* `.adw-image-button.adw-entry-apply:highlighted` (30) TIES the generic
|
|
1581
|
+
* `.ns-dark .adw-image-button:highlighted` (30) further down and loses to it.
|
|
1582
|
+
* Naming the scheme here (40) is what settles it; without this rule a pressed
|
|
1583
|
+
* apply button flashes grey on a dark page.
|
|
1584
|
+
*
|
|
1585
|
+
* It carries the SHADE role, the same one the light press uses — `.ns-dark
|
|
1586
|
+
* .adw-avatar` already spells a shade under a dark selector, and the role is
|
|
1587
|
+
* scheme-independent by construction (accent-theme.ts). The dark button press two
|
|
1588
|
+
* sections down used to hand-pick its own literal instead; #1154 made it carry
|
|
1589
|
+
* this same role, so the two dark presses now agree. */
|
|
1590
|
+
.ns-dark .adw-image-button.adw-entry-apply:highlighted {
|
|
1591
|
+
background-color: #1c71d8;
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
/* The two dims are alphas, not colours — they answer both schemes unchanged, so
|
|
1595
|
+
* `.adw-entry-empty-title` and `.adw-entry-indicator` need no dark counterpart. */
|
|
1596
|
+
|
|
1497
1597
|
/* ===== Dark: entry (standalone) ===== */
|
|
1498
1598
|
|
|
1499
1599
|
/* The dark `$button_color`: currentColor at 10% over a white foreground. */
|
|
@@ -1551,11 +1651,9 @@ Page.ns-dark.adw-window {
|
|
|
1551
1651
|
|
|
1552
1652
|
/* ===== Dark: expander row ===== */
|
|
1553
1653
|
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
color: rgba(255, 255, 255, 0.55);
|
|
1558
|
-
}
|
|
1654
|
+
/* No dark counterpart for the chevron: the 70% is an alpha over whatever the
|
|
1655
|
+
* bitmap was rendered in, and AdwIcon re-renders that on a scheme change. The
|
|
1656
|
+
* `color` this rule used to set reached an `Image` and did nothing. */
|
|
1559
1657
|
|
|
1560
1658
|
.ns-dark .adw-expander-disclosure {
|
|
1561
1659
|
background-color: #222226;
|
|
@@ -1592,8 +1690,16 @@ Page.ns-dark.adw-window {
|
|
|
1592
1690
|
background-color: rgba(255, 255, 255, 0.22);
|
|
1593
1691
|
}
|
|
1594
1692
|
|
|
1693
|
+
/* The SHADE, not a lighter press. libadwaita presses an opaque button — which is
|
|
1694
|
+
* what `.suggested-action` extends — with `background-image: image(RGB(0 0 6 /
|
|
1695
|
+
* 20%))`, a darkening overlay that is identical in both schemes
|
|
1696
|
+
* (_buttons.scss:165-167). The lighter press two rules up belongs to the plain
|
|
1697
|
+
* button, whose fill is itself an overlay; an accent button has no lighter state
|
|
1698
|
+
* in either scheme. This used to hand-pick `#2c75d6`, a third literal the accent
|
|
1699
|
+
* override could not reach, so the button turned orange and its pressed state
|
|
1700
|
+
* flashed blue (#1154). */
|
|
1595
1701
|
.ns-dark .adw-button.suggested-action:highlighted {
|
|
1596
|
-
background-color: #
|
|
1702
|
+
background-color: #1c71d8;
|
|
1597
1703
|
}
|
|
1598
1704
|
|
|
1599
1705
|
.ns-dark .adw-button.destructive-action:highlighted {
|