Change the color of the dialog buttons in iOS? - nativescript

Is there a way to change the text color of the dialog buttons in iOS?
I mean for the OK/Cancel buttons at the bottom for the alerts/confirm dialogs etc.
If native code, that's ok also.

You will be needing to use native code if you want to achieve this on IOS, here's how you can do it:
if (isIOS) {
var alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle("title", "message", UIAlertControllerStyle.ActionSheet);
// Here are some premade styling. The destructive by default is red on IOS. You can select default for them all or use existing.
var editAction = UIAlertAction.actionWithTitleStyleHandler("Edit", UIAlertActionStyle.Default, (arg: UIAlertAction) => {
//code implementation here
});
var deleteAction = UIAlertAction.actionWithTitleStyleHandler("Delete", UIAlertActionStyle.Destructive, (arg: UIAlertAction) => {
//code implementation here
});
var cancelAction = UIAlertAction.actionWithTitleStyleHandler("Cancel", UIAlertActionStyle.Cancel, (arg: UIAlertAction) => {
//code implementation here
});
alertController.addAction(editAction);
alertController.addAction(deleteAction);
alertController.addAction(cancelAction);
// This is how you can force change the color of the title text on the actions (buttons).
alertController.view.tintColor = new Color("#FF0000").ios; // Color is a class in Nativescript, if we you want the Native IOS value, this is how you do it.
var currentPage = topmost().currentPage;
var viewController: UIViewController = currentPage.ios;
viewController.presentModalViewControllerAnimated(alertController, true);
}
Make sure you imported what's needed:
import { isIOS, Color } from 'tns-core-modules/ui/page/page';
import { topmost } from 'tns-core-modules/ui/frame';
There are other styling customizations you can do by changing the default alertController.view settings. So just try out what's best for your use case.

Related

FontAwesome icon with normal text in Xamarin

I want to make a button that has a small icon (from FontAwesome) and text on it in my Xamarin app. I know I can just make a button but the problem is that I will require two fonts (the standard font for text and FontAwesome for the icon). Would anyone happen to know how I can do this, or if there is another way to achieve what I want?
Thanks!
As the json mentioned, I just made a simple implementation.
Create a new class inherit from Label, set FormattedText to combine the string(standard and icon), and add tap gesture on it .
public class MyLabel : Label
{
public delegate void MyHandler(object sender, EventArgs e);
public event MyHandler myEvent;
public MyLabel(string _myIcon, string _myText)
{
//build the UI
FormattedString text = new FormattedString();
text.Spans.Add(new Span { Text = _myIcon ,FontFamily= "FontAwesome5Free-Regular" });
text.Spans.Add(new Span { Text = _myText, TextColor = Color.Red ,BackgroundColor = Color.Blue });
FormattedText = text;
//tap event
TapGestureRecognizer tap = new TapGestureRecognizer();
tap.Tapped += (sender,e) => {
myEvent(sender,e);
};
}
}
Usage
MyLabel label = new MyLabel("", "test");
label.myEvent += (sener,e) =>
{
//do something when tapping
};
Content = label;
For how to integrate FontAwesome in Xamarin.Forms ,refer to
https://montemagno.com/xamarin-forms-custom-fonts-everywhere/.

SwiftUI NSTitlebarAccessoryViewController

I'd like to use the SwiftUI app lifecycle, but my app uses NSTitlebarAccessoryViewController to show a bar of tool options below the toolbar:
Specifically, I'm doing this:
let toolSettingsView = NSHostingView(rootView: ToolAccessoryView(model: model))
let vc = NSTitlebarAccessoryViewController()
vc.view = toolSettingsView
vc.fullScreenMinHeight = accessoryHeight // Ensure tool settings are visible in full screen.
toolSettingsView.frame.size = toolSettingsView.fittingSize
window?.addTitlebarAccessoryViewController(vc)
Is there a (practical) way I can mimic the control appearance (of the sliders, etc.) using pure SwiftUI? When use a SwiftUI view I get this:
Code looks like this:
struct MainView: View {
var model: DataModel
var undoManager: UndoManager
var body: some View {
VStack {
ToolAccessoryView(model: model)
SculptingView(model: model, undoManager: undoManager)
}
}
}
This is implemented as of macOS 13 by using a custom toolbar placement identifier as follows:
extension ToolbarItemPlacement {
static let toolOptionsBar = ToolbarItemPlacement(id: "com.companyname.toolOptions")
}
Then specifying the placement in the .toolbar:
ToolbarItem(placement: .toolOptionsBar) {
ToolAccessoryView()
}
Which in my case looks like this:
The colors on the sliders are a bit odd, which is likely their bug.
See also https://developer.apple.com/documentation/swiftui/toolbarplacement/init(id:) which has some example code.

Override menu button label text color (MacOS SwiftUI)

Can I override a Menu button label's "post-set dimmed" color?
The GIF below shows a legibly bright menu item that dims after new selection. (Default behavior for this system style (e.g., in trackpad prefs).
But it fails accessibility standards, such as WCAG's requirement for > 4.5 : 1 luminance contrast for that font size in an active control (system default is ~ 2).
I've tried:
setting accentColor and foregroundColor everywhere
using onChange to update an #State color fed into the aforementioned modifiers
using onReceive for NSMenu.didSendActionNotification or from calls to the delegate menuDidClose method (was hunting for some appearance setting)
using the DefaultMenuStyle, not borderless
ramping up brightness or contrast, but that introduces aliasing issues
Any suggestions? Maybe I'm just supposed to be using a Picker? Should I flag this as an accessibility issue with Apple?
struct BareExample: View {
var body: some View {
Menu { menuContents }
label: { menuLabel }
.menuStyle(BorderlessButtonMenuStyle())
.fixedSize()
}
var menuContents: some View {
ForEach(sortOptions) { option in
Button(option.rawValue) { setSortOrder(option) }
.accentColor(labelColor)
.foregroundColor(labelColor)
}
}
var menuLabel: some View {
HStack {
Image(systemName: sortIcon)
Text(sortOrderLabel)
}
.accentColor(labelColor)
.foregroundColor(labelColor)
}
#State var sortOrder: PaletteSortOrder = .sequential
var sortOrderLabel: String { sortOrder.rawValue }
let sortIcon = "arrow.up.arrow.down"
let sortOptions = PaletteSortOrder.allCases
#State var labelColor = Color.white
func setSortOrder(_ order: PaletteSortOrder) {
sortOrder = order
labelColor = Color.white
}
}
public enum PaletteSortOrder: String, CaseIterable, Identifiable {
case sequential = "Sequential"
case byLuminance = "Luminance"
case byWorstPairwiseContrast = "Pairwise Contrast"
public var id: String { rawValue }
}

Disabling specific button in ToolBar while cursor is in the editable portion of a widget? (CKEditor version 4.5.11)

I am wondering if it is possible to disable a specific widget in the ToolBar in the 'editables' portion of the widget code? I currently have the below code set up for a widget. Within these selectors, I do not want the user adding in a specific widget in the ToolBar.
this.editables = {
content1: {
selector: '.content1',
allowedContent: this.allowedContent
},
content2: {
selector: '.content2',
allowedContent: this.allowedContent
},
content3: {
selector: '.content3',
allowedContent: this.allowedContent
}
};
I have tried adding in the below logic but it breaks my code.
var oWidget= editor.getCommand('customWidget')
oWidget.setState(CKEDITOR.TRISTATE_DISABLED);
Any advise would be much appreciated.
Thank you!
For this you need to check for user selection event, and if selection in editable portion enable command.
Something like this -
CKEDITOR.instances["textarea"].on( 'selectionChange', function( evt ) {
// get desired command from ckeditor
var myCommand = this.getCommand( 'CKEDITOR_COMMAND_NAME' );
var mySelection = null;
// check if something is selected
var mySelection = this.getSelection().getNative() || this.window.$.getSelection() || this.document.$.selection;
if (!mySelection) {
// if not stay disable
myCommand.disable();
} else {
//if yes enable command
myCommand.enable();
}
});

Drag and drop function swift OSX

This is a bit complex but I hope that someone can help me.
I am trying to build a drag and drop function for my OSX application.
This is how it is looking at the moment.
So there is just a single textfield which the user can drag and drop around the view. It is simple enough with just one textfield but if there are several textfields it is getting complicated and I don't know how to approach.
This is what I currently have:
#IBOutlet weak var test: NSTextField!
#IBAction override func mouseDragged(theEvent: NSEvent) {
NSCursor.closedHandCursor().set()
var event_location = theEvent.locationInWindow
test.frame.origin.x = event_location.x - 192
test.frame.origin.y = event_location.y
}
Test is the name of my NSTextField. I know the name of it so it is simple to move it arround. But if the user adds more textfields (see on the left pane) then I don't know how to address this textfield because I have no name of it (like "test" for the first input).
I am adding the textfields via this code:
let input = NSTextField(frame: CGRectMake(width, height, 100, 22))
self.MainView.addSubview(input)
How can I determine which textfield (if there are multiple on the view) was selected and then move the appropriate via drag and drop?
The drag and drop is working for that single static textfield
I have prepared a sample app, so consider this:
https://github.com/melifaro-/DraggableNSTextFieldSample
The idea is to introduce SelectableTextField which inherits NSTextField. SelectableTextField provides facility for subscription of interested listener on text field selection event. It has didSelectCallback block variable, where you need to set you handling code. Something like this:
textField.didSelectCallback = { (textField) in
//this peace of code will be performed once mouse down event
//was detected on the text field
self.currentTextField = textField
}
By using mentioned callback mechanism, once text field selected, we can store it in currentTextField variable. So that when mouseDragged function of ViewController is called we are aware of currentTextField and we can handle it appropriatelly. In case of sample app we need adjust currentTextField origin according drag event shift. Hope it became better now.
P.S. NSTextField is opened for inheriting from it, so you can freely use our SelectableTextField everywhere where you use NSTextField, including Interface Builder.
EDIT
I have checked out your sample. Unfortuantly I am not able to commit /create pull request into you repository, so find my suggestion here:
override func viewDidLoad() {
super.viewDidLoad()
didButtonSelectCallback = { (button) in
if let currentButton = self.currentButton {
currentButton.highlighted = !currentButton.highlighted
if currentButton == button {
self.currentButton = nil
} else {
self.currentButton = button
}
} else {
self.currentButton = button
}
button.highlighted = !button.highlighted
}
addButtonAtRandomePlace()
addButtonAtRandomePlace()
didButtonSelectCallback(button: addButtonAtRandomePlace())
}
override func mouseDragged(theEvent: NSEvent) {
guard let button = currentButton else {
return
}
NSCursor.closedHandCursor().set()
button.frame.origin.x += theEvent.deltaX
button.frame.origin.y -= theEvent.deltaY
}
private func addButtonAtRandomePlace() -> SelectableButton {
let viewWidth = self.view.bounds.size.width
let viewHeight = self.view.bounds.size.height
let x = CGFloat(rand() % Int32((viewWidth - ButtonWidth)))
let y = CGFloat(rand() % Int32((viewHeight - ButtonHeight)))
let button = SelectableButton(frame: CGRectMake(x, y, ButtonWidth, ButtonHeight))
button.setButtonType(NSButtonType.ToggleButton)
button.alignment = NSCenterTextAlignment
button.bezelStyle = NSBezelStyle.RoundedBezelStyle
button.didSelectCallback = didButtonSelectCallback
self.view.addSubview(button)
return button
}

Resources