My Customer has very strict design guidelines, e.g. for alpha:
Text should have no alpha.
However, I can't seem to customize MaterialDesign´s alpha in a theme like way.
Sure, I can customize each and every component, but this is tedious:
Modifier.alpha(1.0f)
Sure, I can wrap my whole app in an alpha-Provider, but most material-components overwrite it, e.g. AppBar, so this doesn't work as expected either.
// my wrapper:
CompositionLocalProvider(LocalContentAlpha provides 1.0f) { /* my ui */ }
// will be overwritten by
#Composable
private fun AppBar(...) {
Surface(...) {
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Row(..., content)
}
}
}
So I guess what I should be doing is providing a custom ContentAlpha, since it is used in nearly every material component, but I don't know how to. Do you?
It seems to me like you don't really need material design and want to just go custom theme. It's fine, really, I'm currently working on production app that went in that direction and it's completely workable.
We are still wrapping our content with MaterialTheme to make SOME of material components available, but the material dependency is internal to base ui module. So if we want to use any material component in UI code (in feature for example) - we have to create our wrapper for it. This way we are using only our code in UI without loosing some of material components. And if material design will change in a way we cannot accept it - we can just reimplement the thin wrapper to something 100% custom (like we did with Button and text fields).
You can override any part of material component within those thin wrappers using Modifier.alpha(1.0f). You are doing it once and then forget about that :)
Related
I'm in the process of migrating some legacy pages to web components using StencilJS, so I'm in a situation where some elements are already handled with StencilJS, some are not, and migrating everything will take quite some time.
In this context I need to be able to update the contents of a target div not managed with StencilJS from a StencilJS component. This div is in a totally different branch of the DOM and it's impossible to move it into the component without rethinking the entire page.
So from my component I need to be able to do something like this:
render() {
const target = document.getElementById(this.targetDiv);
if (target) {
target.innerHTML = jsxToString(this.renderDivContents()) // obviously this doesn't work
}
}
renderDivContents() {
return (<p>Some JSX stuff</p>)
}
So, in other words I need to compile the JSX template immediately into a string. I'm not sure how to do that with StencilJS and if it is even possible. I'm under the impression that there is a way to achieve that because it looks very similar to what we do in tests, but all the resources I find on the topic are for JSX with React and does not really help with StencilJS
If this is not the correct approach, what do you suggest? I know injecting HTML into a DOM element is not ideal, but I'm just trying to find a temporary solution to be able to release my changes gradually.
PS: I know I can also use an overlay approach (generate a div into the component and give it the same position and size than the target div), but this sounds even uglier than innerHTML. This is not the answer I expect.
I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.
Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.
For example, the Microsoft documentation for the Commandbar component is available here.
The default theme renders the Commandbar background with a gray color, with blue command buttons.
From what i could understand, Microsoft provides a Themes/Styling system.
Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.
So, my questions are:
How can i change the default theme, and apply a specific theme on a fabric-react component?
How can i create a custom theme?
Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
https://developer.microsoft.com/en-us/fabric#/components/themes
You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.
This is a copy of Microsoft response on Github, so the merit is not mine :)
Current
Use loadTheme to provide component wide colors and fonts.
Use styles prop for components for one-off tweaks.
If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.
In progress
Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26
The problems we've recognized
Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".
Solutions to shortcomings
Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
Add support for color schemes.
Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.
I am creating an app with some style differences in portrait-landscape rendering.
For example the navigation bar height can be different and there are several sizes that I want to keep under strict control to make sure certain control/text fit to screen without scrolling.
I am fine with calculating stylesheets dynamically or caching them with either own utilities or utilities like react-native-extended-stylesheet yet.. where to store the calculated sheets for portrait landscape?
Possible options
1. A module level variable in my style.js. Possibly calculated on demand and cached later. I'd need to pass screen size to it though
2. Make styles a part of a state and update it on orientation changes action
3. Anything else
What makes most sense? What do you use in your applications?
I think a stylesheet library should take care about caching styles for landscape/portrait layouts and developer should just write styles and component logic.
I'm working on it currently here: https://github.com/vitalets/react-native-extended-stylesheet/issues/9
Until it is ready I think the best option is to cache on module level.
const styleLandscape = ...
const stylePorttrait = ...
Putting styles into component state will mix it with logic data that seems not good.
I started to use GWTP for my project and I'm currently re-writing all my code to let it work with this library.
However, I struggle to understand how I use GWTP if I want e.g. a ListView with ListItemView items.
#Inject
public ToolsPresenter(PlaceManager placeManager, EventBus eventBus, MyView view, MyProxy proxy) {
super(eventBus, view, proxy, AdminToolPresenter.SLOT_AdminToolMainContent);
this.placeManager = placeManager;
ToolListView toolListView = new ToolListView(...)
ToolListPresenter toolListPresenter = new ToolListPresenter(....);
this.setInSlot(SLOT_ToolList, toolListPresenter);
}
What I want is to place my ListView inside a slot. I am very certain that I can't do what is shown up there but I just don't get how I use just simple Widgets with GWTP.
Or am I doing this completely wrong and I should just extend a Composite for ListView and not use GWTP stuff here at all?
There is a lot of information missing from your question so this is a difficult one to answer.
Assumption 1 - Your GWTP artifacts (ToolListView, ToolListPresenter, ToolListView.ui.xml, and ToolListModule) are setup correctly and ToolListModule is installed in a parent module.
Assumption 2 - You are using GWTP version 1.5+ which has typed slots.
You should not be instantiating your ToolListView or ToolListPresenter.
Simply add:
#Inject ToolListPresenter toolListPresenter;
If you are trying to call the setInSlot method then
Make sure ToolListPresenter is a PresenterWidget
Make sure your slot is not a NestedSlot.
Finally try moving the call to setInSlot outside of your constructor and into the overridden onBind() method.
At various places in my single page app I use composition to compose one view into another. At the same time I have noticed some animation effects when certain pages load, almost as if sections were dynamically expanding as binding, etc. took place. I am pretty sure that this has nothing to do with Durandal's transitions as I disabled that and still got the expanding "animation" effect.
This morning I created a new view, copied some existing HTML from another view into it and replaced this HTML in the parent view with the new composed child view. In other words, the parent view went from this:
<div data-bind="visible: contactPerson, with: contactPerson">
<span data-bind="text: firstName"></span><br />
<span data-bind="text: lastName"></span><br />
</div>
to this:
<div data-bind="compose: { model: 'viewmodels/contact-view', activationData: { contactPerson: contactPerson } }"></div>
Upon testing this change I immediately noticed that the original version had no expanding animation effect while the composed version does. After playing around with the Durandal transitions I came to the conclusion that this is quite possibly not related to that but more probably due to delayed insertion of the child view HTML.
The new child viewmodel is extremely simple so I see no issues there, unless it has to do with the fact that it is not a singleton, which it cannot be in this case.
define(['services/dataservice',
'services/logger'],
function (dataservice, logger) {
return function () {
var self = this;
var contactPerson = ko.observable();
var activate = function (activationData) {
contactPerson(ko.unwrap(activationData.contactPerson));
};
// Make sure required internally defined functions and properties are exported.
self.activate = activate;
self.contactPerson = contactPerson;
};
});
Can anybody help me figure out how to get rid of the transition effect? I can post a video of the before and after if somebody wants to take a look at it.
Composition does not, in itself, cause the effect you are witnessing. It is most likely a CSS issue. We witnessed the same effect many times (particularly when trying to position a wait spinner) and it was always the CSS.
In those cases where we want to "make room" for an incoming view, we set our CSS on the container that will hold the view in such a way as to have that container "expanded" already, so to speak. Think "placeholder," if you will.
If you are in debug mode with caching disabled then the composition binding is much slower than in a built app. You see this effect because of the debug mode and how it is writing and evaluating each binding to the console as well. If you want to disable it turn off debug mode or look at the built version of your application.