I am trying to build an iOS app using Promotion. It works fine as long
as I use the build in default design. But I want to be able to style for example
the navbar as I want (different colors and different background images).
How can I do this using Promotion?
Thanks!
You can use Teacup to easily customize your views. https://github.com/rubymotion/teacup
Add teacup to your gemfile, create a file appearence.rb in app/styles/appearence.rb and paste the following code:
Teacup::Appearance.new do
style UINavigationBar, {
tintColor: UIColor.blackColor
}
style UIBarButtonItem, {
tintColor: UIColor.blackColor
}
style UITableViewCell, {
layer: { # style the layer!
shadowRadius: 3
},
backgroundView: { # style the background!
backgroundColor: UIColor.blackColor
},
imageView: { # style the imageView!
contentMode: UIViewContentModeScaleAspectFill
}
}
style UISearchBar, {
tintColor: UIColor.colorWithRed(0.733, green:0.733, blue:0.733, alpha:1)
}
end
Add this line to your app delegate before loading your views
Teacup::Appearance.apply
Hope it helps.
Related
I'm curious, is there a way to make the fonts in a view match those of an existing view in SwiftUI? I don't like the default selections of swiftUI in a certain context, and I'd like some control over the situation.
Here's some code to illustrate:
struct FontMatchView: View {
var body: some View {
Form {
Section {
Text("Some Controls Here")
} header: {
HStack {
Text("Header")
Spacer()
Button("Option") {
}
}
}
}
}
}
This gives this result:
In the Section Header, I'd like the font in the button on the right (with label "OPTION") to match the label to its left ("HEADER"). I'm guessing this will be hard because the font is not known at the time of view definition. But the choices SwiftUI has made here are "clearly wrong" :-), and I need to fix this.
Is there a way we solve this (other than overriding both fonts)? Ideally, I could say "use a font that is 0.8 x the height of whatever font will be used in view X". But I'd settle for "use the same font as will be used in view X".
You can remove "buttonizing" (which includes adjusting the font) by applying .buttonStyle(.plain). This will make it match the other Text in the current context. If you then want to re-accent it, you may:
Button("Option") {}
.buttonStyle(.plain)
.foregroundColor(.accentColor)
That said (and somewhat unrelated), making the button as small as the HEADER text may make it uncomfortably small as a hit area. It may be better to make HEADER larger rather than OPTION smaller.
I have a phone / iPad application. It would be useful to export text, images, or other data to other apps or other devices.
I can export the colour data as text using UIpasteboard.general.string. This works nicely. The Universal pasteboard lets me paste into other devices.
I can export an image using UIpasteboard.general.image. I have a PNG image in my bundle resources. I can the paste it into Preview or some other image viewer. I would like to be able to paste it as a file but I can't see how to do that at the other end.
I have also a PDF manual in the Bundle. It would be nice to export that too. Like the previous image, it would be nice to paste it as a file but I cannot see how this is done.
Before I get into the code, is UIpasteboard the right way to do this? Or is there some other approach I ought to be using rather than trying to fix this. What do other apps do?
Grid(horizontalSpacing: 3, verticalSpacing:3) {
GridRow {
Text("Text: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
let pasteboard = UIPasteboard.general
pasteboard.string = toString(sw: sd.mySwatch)
} label: {
Text("Current swatch").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("Text: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
var reply: String = ""
for sw in sd.swatches {
reply = reply + toString(sw: sw)
}
UIPasteboard.general.string = reply
} label: {
Text("All swatches").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("Image: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
UIPasteboard.general.image = UIImage(contentsOfFile: Bundle.main.path(forResource: "Macbeth", ofType: "png")!)
} label: {
Text("Macbeth.png").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
GridRow {
Text("PDF: ").gridColumnAlignment(.trailing).foregroundColor(.gray)
Button {
UIPasteboard.general.url = Bundle.main.url(forResource: "ByEye", withExtension: "pdf")!
} label: {
Text("ByEye.pdf").lineLimit(1).frame(width:buttonW)
}.buttonStyle(.bordered)
}
}
That is my code. The first three options work. The last one does not because the URL is a private one for the application. I might be able to copy the file to a public directory so the URL worked but that seems like the wrong way to go about it.
Postscript:
This actually works well enough for now. I can copy stuff to the pasteboard, then paste it into an e-mail or other message to myself. This lets me get stuff out of the app without creating temporary files the I have to clean up.
I did not find a solution for the PDF or other files. I was hoping for something like this...
UIPasteboard.general.file = UIImage(contentsOfFile: Bundle.main.path(forResource: "manual", ofType: "pdf")!)
...but nothing like that exists as far as I can tell.
I'm using ember-emojione to display and insert emoji.
Out of four rendering options that EmojiOne offers:
PNG sprites
PNG individual images
SVG sprites
SVG individual images
...only PNG sprites suit me. Individual images take too much time to load and emoji display sequentially. SVG sprites are awesome, but rerendering the preview area causes SVG sprite emoji to flicker. Only PNG sprite emoji never flicker and display simultaneously.
Unfortunately, EmojiOne offers spritesheets only in three sizes: 64, 128 and 512 px. We need to display emoji in 20 px size.
Resizing emoji displayed via PNG sprites is problematic.
ember-emojione readme suggests this hack to resize PNG sprite emoji:
.emojione {
transform: scale(0.3125);
margin: -22px;
}
It works, but it has some disadvantages:
In certain cases, emoji appear blurred.
Text selection blows up:
The solution is to use emoji spritesheets tailored to desired size. The Deveo/emojione-png-sprites repo offers such spritesheets.
But when I include those spritesheets instead of default ones, ember-emojione emoji picker component displays incorrectly.
Question: how do I use ember-emojione with emojione-png-sprites correctly?
emojione-png-sprites relies on Sass mixins, so you'll need ember-cli-sass. If you don't want to install ember-cli-sass, you can alternatively precompile mixin invocations manually and insert resulting CSS into your app.
Decide which spritesheets to include from emojione-png-sprites.
We're gonna use 20px emoji. For retina, we'll also need double and triple size spritesheets. As 40px and 60px aren't available, we're gonna use next available ones: 48px and 64px.
Include spritesheets and the Sass file into your repo. Run these commands in your Ember app root:
bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss
It's very important that you use a specific release version of the files, so that your dependencies are locked. Otherwise, if the repo has a breaking change, an innocent bower install will break your project.
Tell ember-emojione not to include default EmojiOne CSS and spritesheets. In your app's ember-cli-build.js:
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
"ember-emojione": {
shouldImportCss: false,
shouldIncludePngSprite: false,
shouldIncludeSvgSprite: false,
shouldIncludePngImages: false,
shouldIncludeSvgImages: false
}
});
// ...
Import PNG sprites into your app.
Install broccoli-funnel:
npm install -D broccoli-funnel
In your app's ember-cli-build.js:
var Funnel = require("broccoli-funnel");
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
// ...
}
});
const funnels = [
// PNG sprites
new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-20.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-48.png";
}
}),
new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
include: ['index.png'],
getDestinationPath () {
return "assets/emojione-png-sprites/sprite-64.png";
}
}),
];
if (app.env === "development" || app.env === "test") {
app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
}
return app.toTree(funnels);
};
In your app's Sass, include the mixin and invoke it:
#import "bower_components/emojione-png-sprite-style/index.scss";
#include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));
This will break the looks of ember-emojione components. The addon contains a mixin that restores the looks:
#import 'node_modules/ember-emojione/app/styles/ember-emojione';
#include ember-emojione-cancel-scale;
I'm trying to implement a BB10 settings menu, looking like the one in the Calendar app for example. The question here is, which components should I use? Using a ListView with an XML model looks great, but is incompatible with translation. Using a C++ model looks overkill for a simple menu with a couple of entries…
There's probably an established pattern somewhere, but I can't find it.
Screenshot of the Calendar app settings view
What you want is the expendable content property of the title bar:
I would create a QML object that you can re-use for each entry with properties for title and image.
So for example, something perhaps like this:
SettingEntry.qml
Container {
property alias title:title.Text
signal click()
TextView {
id: title
text: "[title goes here]"
}
gestureHandlers: [
TapHandler {
onTapped: {
click();
}
}
]
}
Then in your settings page you would use it like a normal object:
Page {
Container {
SettingEntry {
title: "General"
onClick: {
//open general page
}
}
SettingEntry {
title: "Invitation Settings"
}
}
}
The above is obviously very simplified, you would want to include an icon image, add translation code and add visual adjustments like filling the width and padding.
It should however give you a good idea of where to start.
I also included a gesturehandler and signal to show you how to handle events such as a click.
I need to have a checkbox like control where the checked and unchecked states use a custom graphic. I've looked at all the docs for QToolButton and QCheckBox, along with QIcon but couldn't find any combination that does what I want.
I just want to use one icon (pixmap actually) in the unchecked state, and a different one in the checked state.
This feels like it should be easy, but the solution (short of a custom control) is eluding me.
I've tried using a style sheet as well, and QToolButton:checked with a background-image kind of works but I can't get the layout correct -- it's not positioned/sized as with an icon.
Use ::indicator sub-item. the code below works excellent for me...
QCheckBox::indicator {
width: 18px;
height: 18px;
}
QCheckBox::indicator:checked
{
image: url(.../Checkbox_checked_normal.png);
}
QCheckBox::indicator:unchecked
{
image: url(.../Checkbox_unchecked_normal.png);
}
QCheckBox::indicator:checked:hover
{
image: url(.../Checkbox_checked_hovered.png);
}
QCheckBox::indicator:unchecked:hover
{
image: url(.../Checkbox_unchecked_hovered.png);
}
QCheckBox::indicator:checked:pressed
{
image: url(.../Checkbox_checked_pressed.png);
}
QCheckBox::indicator:unchecked:pressed
{
image: url(.../Checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked:disabled
{
image: url(.../Checkbox_checked_disabled.png);
}
QCheckBox::indicator:unchecked:disabled
{
image: url(.../Checkbox_unchecked_disabled.png);
}
This must be entered as a StyleSheet. Do this via the Design editor by right click on the check box and selecting "Change stylesheet...".
You may also include and use your icons as resources:
QCheckBox::indicator:checked {image: url(:/circle-green.png);}
QCheckBox::indicator:unchecked {image: url(:/circle-red.png);}