Using om.next and sablono, I am trying to style a button with mdl, as seen there.
Here is what I tried in my render method :
;; This works but misses the icon
[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:value "ok"}]
;; The following work, but I would like to avoid using a string
[:button {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:dangerouslySetInnerHTML {:__html "<i class=\"material-icons\">add</i>" }}]
;; All the following do not render the inside of the icon properly
[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:dangerouslySetInnerHTML {:__html [:i {:className "material-icons"} "add"]}}]
[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"}
[:i {:className "material-icons"} "add"]]
[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:dangerouslySetInnerHTML {:__html ~(html [:i {:className "material-icons"} "add"])}}]
I will have to take sablono out of the equation.
This example works:
(defui MDSubmitButton
Object
(render [this]
(dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"})
(dom/i (clj->js {:className "material-icons"}) "add"))))
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id}))
The missing ingredient for me was this line:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
, in the Markup.
In total this is all the markup I used:
<link href="/css/material.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
I believe that Javascript is required a ripple effects and so on, just not needed to answer this question.
I suspect you may have also missed the "Material Icons". To find out what was actually going on I pressed the "Open in CodePen" graphic/button from this page
Related
I'm using Tinymce 5.9.1 with template plugin.
I made a new template like this code with special css code :
templates: [
{title: 'green-box', description: 'box tiny green', content: '<div class="tiny-green-box"> Content </div><div class="p-1"></div></br>'},],
It works when edit content in one line. when i want to put multiple line there is a problem.
Tinymce duplicates template for every new line.
for example if i type line1 and press ENTER it will create new div and result will be something like this :
you can see in html code it repeates many time :
putting content inside an extra <p></p> tag can solve this problem.
final code must be something like this :
templates: [
{
title: 'green-box',
description: 'box tiny green',
content: '<div class="tiny-green-box"><p> Content </p></div><div class="p-1"></div></br>'
}
,],
The result HTML code will be like this :
<div class="tiny-green-box">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
I have a requirement: I need to add descriptive texts for Radio Buttons as shown below.
It's currently not possible to add such a description under the text of sap.m.RadioButton. However (same as this answer), you can achieve similar behavior, look, and feel in the following combination:
Use sap.m.List with
mode="SingleSelectLeft"
backgroundDesign="Transparent"
showSeparators="None"
In its items aggregation, use a subclass of ListItemBase that supports description / info. Use CustomListItem if nothing suites.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/List",
"sap/m/StandardListItem", // or ObjectListItem, CustomListItem, etc..
], (List, StandardListItem) => new List({
mode: "SingleSelectLeft", // displays radio buttons.
showSeparators: "None", // between items
backgroundDesign: "Transparent",
includeItemInSelection: true,
width: "19rem",
}).addItem(new StandardListItem({
title: "Others",
description: "3rd Party Vendor Lis",
})).placeAt("content")));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-waitForTheme="true"
></script><body class="sapUiBody sapUiSizeCompact" id="content"></body>
I am working on an application using admin-on-rest framework. For editing an entry on a Resource we provide XXXEdit, XXXShow, XXXCreate props to it. My requirement is that when I click on an Edit button in List view on any entry I should get a Dialog box with the parameters in XXXEdit instead of going to a new page. I tried doing this by using a Dialog in XXXEdit component
<Edit title={<RoleTitle />} {...props}>
<SimpleForm>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={true}
>
<TextInput source="id" />
<TextInput source="name" validate={required} />
.
.//some more fields
</Dialog>
</SimpleForm>
</Edit>
I get errors like The TextInput component wasn't called within a redux-form
If I use a DisabledInput then I get an error cannot read value of undefined
How do I go on with this?
I do not think you can use Simpleform for this. You will need to create a custom Form using Redux-Form. Look at the bottom answer that documents the final answer.
This might help you
How to richly style AOR Edit page
Instead of creating a page. You are creating a component that connects to the Redux state and displays as a dialog box.
I tried to resolve this using HOC and react-router.
I created a button using AOR button and provided a containerElement
containerElement={
<Link
key={record.id}
to={{
...{
pathname: `${basePath}/${encodeURIComponent(record.id)}`
},
...{ state: { modal: true } }
}}
/>
}
I created a route like this where DialogRoleEdit is an AOR edit component wrapped with a dialog HOC below .
<Route
exact
path="/roles/:id"
render={routeProps => {
return !!(
routeProps.location.state && routeProps.location.state.modal
) ? (
<Restricted authClient={authClient} location={routeProps.location}>
<div>
<RoleList resource={"roles"} {...routeProps} />
<DialogRoleEdit resource={"roles"} {...routeProps} />
</div>
</Restricted>
) : (
<Restricted authClient={authClient} location={routeProps.location}>
<RoleEdit resource={"roles"} {...routeProps} />
</Restricted>
);
}}
/>
Finally an HOC
handleClose = () => {
this.props.history.goBack();
};
render() {
const actions = [
<FlatButton label="Cancel" primary={true} onClick={this.handleClose} />
];
return (
<Dialog>
<WrappedComponent/>
</Dialog>
)
}
We need to provide edit prop for this resource in App.js
edit={DialogUserEdit}
Im trying to use markdown together with Templetor in web.py but I can't figure out what Im missing
Documentation is here http://webpy.org/docs/0.3/templetor#builtins
import markdown
t_globals = {
'datestr': web.datestr,
'markdown': markdown.markdown
}
render = web.template.render(globals=t_globals)
class Blog:
def GET(self, post_slug):
""" Render single post """
post = BlogPost.get(BlogPost.slug == post_slug)
render = web.template.render(base="layout")
return render.post({
"blogpost_title": post.title,
"blogpost_content": post.content,
"blogpost_teaser": post.teaser
})
here is how I try to use markdown inside the post.html template
$def with (values)
$var title: $values['blogpost_title']
<article class="post">
<div class="post-meta">
<h1 class="post-title">$values['blogpost_title']</h1>
</div>
<section class="post-content">
<a name="topofpage"></a>
$:markdown(values['blogpost_content'])
</section>
But Im getting this exception
type 'exceptions.NameError' at
/blog/he-ll-want-to-use-your-yacht-and-i-don-t-want-this-thing-smelling-like-fish/
global name 'markdown' is not defined
You're re-initializing render, once in global scope setting globals and once within Blog.GET setting base. Do it only once!
How do I find element in Protractor to click on a button (login button).... I have entered login name and Password but no luck clicking on my "log in" button. My code does not have model, Repeater , ID or class for the login section to enter the App.
Thanks in advance for the help. Ho do I format the actual code so I can run this using Protratcor?
Following is my code:
<div class="btn-panel">
div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
!--<div class="brad-all attention" hs-gesture="{handler: clearLogin}">
i class="icon-close-round"></i>
</div>-->
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>
</div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
Edit for future users (This command was a workaround rather than a direct solution to his original problem of not finding/clicking button):
You could also try submitting the form by hitting enter (you may want to do this while within the password field) - browser.driver.actions().sendKeys(protractor.Key.ENTER).perform();
Another Edit: This also just occurred to me - there is another option to simulate a click event: browser.driver.actions().mouseDown(loginBtn).mouseUp().perform();
Original Post
You say your code does not have an ID or class, but I see your Login links having the class 'btn-ok'? Maybe I'm misunderstanding but you could try using cssContainingText:
var loginBtn = element(by.cssContainingText('.btn-ok', 'Log In');
loginBtn.click();
That will locate the element with a class of 'btn-ok' with the specified string of 'Log In'
Source: https://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.cssContainingText
#kevin Presuming that
' <div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>'
is the tag that holds the your login button and also only clicking is what you need. following might work for you:
element(by.xpath("//div[contains(#class,'btn-ok') and contains(text(),'Log In')]")).click();
You can select it by className using element(by.className('btn-ok')) or element(by.css('.btn-ok')) and then simply throw a .click() on the end and voila:
element(by.css('.btn-ok')).click(); or $('.btn-ok').click()