I am having trouble adding a background image to my login page: enter image description here that contains an overlay.
I tried to play around with CSS and HTML code in my program and looking for the answer online but I still was not able to get a background image to show up. The image that I want to use as a background is called "books.jpg".
Layout of my application: enter image description here
LoginView class:
package com.example.application.views;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
#Route("login")
#PageTitle("Login | Sample App")
public class LoginView extends Div implements BeforeEnterObserver {
private final LoginOverlay login = new LoginOverlay();
public LoginView(){
addClassName("login-view");
LoginOverlay loginOverlay = new LoginOverlay();
loginOverlay.setTitle("Sample App");
loginOverlay.setOpened(true);
loginOverlay.setAction("login");
add(loginOverlay);
}
#Override
public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
// inform the user about an authentication error
if(beforeEnterEvent.getLocation()
.getQueryParameters()
.getParameters()
.containsKey("error")) {
login.setError(true);
}
}
}
Index.html class:
<!DOCTYPE html>
<!---->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, #outlet {
height: 100vh;
width: 100%;
margin: 0;
}
[part="backdrop"] {
background-image: url(../images/books.png);
background-size: cover;
}
</style>
<!-- index.ts is included here automatically (either by the dev server or during the build) -->
</head>
<body>
</body>
</html>
Styles.css class
#import url('./views/list-view.css');
#import url('lumo-css-framework/all-classes.css');
a[highlight] {
font-weight: bold;
text-decoration: underline;
}
.login-view {
background-image: url("images/books.jpg");
background-repeat: no-repeat;
background-position: center
}
Since this question is almost exactly the same as your other one about login views, the solution is also almost exactly the same: https://stackoverflow.com/a/75028635/396573
Place the image in the frontend folder, and then target the correct component part with this CSS:
.login-view vaadin-login-overlay-wrapper::part(backdrop) {
background: url("images/prepbooks.jpg");
background-size: cover;
}
Related
I am trying to understand core-style. I noticed that in all examples I have seen so far, only elements eg Button are referenced in a core-style - there is no class reference (eg .blue). I tried to place a class reference in the core-style but it does not render. Please see the example below
.html
<link href='../../../../packages/polymer/polymer.html' rel='import' >
<link href='../../../../packages/core_elements/core_style.html' rel='import' >
<polymer-element name='blue-theme'>
<template>
<core-style id='blue-theme'>
:host {
background-color: red;
.lb-container1 {
background-color: {{lb50}};
padding-top: 5px;
padding-bottom: 5px;
width: {{width}}
}
}
</core-style>
</template>
<script type='application/dart' src='blue_theme.dart'></script>
</polymer-element>
.dart
import 'package:polymer/polymer.dart';
import 'package:epimss_shared/epimss_shared_client.dart' hide DataEvent;
#CustomTag( 'blue-theme' )
class BlueTheme extends PolymerElement
{
String topic = '';
#observable String lb50 = LightBlue['50'];
#observable String lb100 = LightBlue['100'];
#observable String lb200 = LightBlue['200'];
BlueTheme.created() : super.created();
#published
String get width => readValue( #width );
set width(String value) => writeValue( #width, value );
#override
void attached()
{
super.attached();
topic = this.dataset['topic'];
}
}
The above code does not render.
Thanks
You only created a <core-style> producer (provides reusable styles). What you also need is a <core-style> consumer.
<core-style ref="blue-theme"></core-style>
I haven't used it myself but I think just adding this line should solve the problem. You can have the producer and consumer in different elements. That is rather the point of the element. Define a style once and reuse it just by referencing.
This tutorial looks good so far https://pascalprecht.github.io/2014/08/01/sharing-styles-across-web-components-with-polymer-and-core-style/
It appears that my Polymer Dart custom elements that were once working now stopped firing. Dartium displays in localhost the h1 tag but not my custom elements.
The only Dart Editor error/warning I get is:
"(from html5lib) Unexpected start tag (link). Expected DOCTYPE. See http://goo.gl/5HPeuP#polymer_40 for details."
This warning message appears on every
<link rel="import" href="packages/polymer/polymer.html">
but as best I can see this is a known issue which should not impede application execution.
My troubleshooting efforts to date include:
- Running pub cache repair from command line
- Manually deleting package cache directory and running pub get again.
- Downloading and running polymer-and-dart-codelab-master.zip (I get the same behavior)
How can I diagnose this issue?
Pubspec.yaml contents:
name: mpower
description: Sample app built with the polymer.dart package
environment:
sdk: '>=1.2.0 <2.0.0'
dependencies:
polymer: '>=0.15.1 <0.16.0'
dev_dependencies:
unittest: '>=0.10.0 <0.11.0'
transformers:
- polymer:
entry_points:
- web/index.html
Index.html Contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mosaic mPower</title>
<link rel="import" href="est_list.html">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Mosaic mPower</h1>
<est-list></est-list>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
est-list.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="est_form.html">
<link rel="import" href="est_element.html">
<polymer-element name="est-list">
<template>
<style>
select {
margin-bottom: 30px;
display: inline;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
</style>
<div>
<label>Filter: </label>
<select value="{{filterValue}}" on-change="{{filter}}">
<option template repeat="{{filter in filters}}">
{{filter}}
</option>
</select>
</div>
<div on-estvalidated="{{addEst}}"
on-formnotneeded="{{resetForm}}">
<est-form est="{{newEst}}"></est-form>
</div>
<div on-deleteest="{{deleteEst}}"
on-levelchanged="{{filter}}">
<template repeat="{{est in filteredEsts}}">
<est-element est="{{est}}"></est-element>
</template>
</div>
</template>
<script type="application/dart" src="est_list.dart"></script>
est-list.dart
import 'package:polymer/polymer.dart';
import 'model.dart' show Est;
import 'dart:html' show Event, Node;
/*
* Class to represent a collectionon-est of Est objects.
*/
#CustomTag('est-list')
class EstList extends PolymerElement {
static const ALL = "all";
/*
* Field for a new Est object.
*/
#observable Est newEst = new Est();
/*
* Collection of ests. The source of truth for all ests in this app.
*/
#observable List<Est> ests = toObservable([]);
/*
* Sets the new est form to default to the intermediate level.
*/
String get defaultCustomer => Est.CUSTOMERS[0];
/*
* List of filter values. Includes the levels defined in the model, as well
* as a filter to return all ests.
*/
final List<String> filters = [ALL]..addAll(Est.CUSTOMERS);
/*
* String that stores the value used to filter ests.
*/
#observable String filterValue = ALL;
/*
* The list of filtered ests.
*/
#observable List<Est> filteredEsts = toObservable([]);
/*
* Named constructor. Sets initial value of filtered ests and sets
* the new est's customer to the default.
*/
EstList.created() : super.created() {
filteredEsts = ests;
newEst.customer = defaultCustomer;
}
/*
* Replaces the existing new Est, causing the new est form to reset.
*/
resetForm() {
newEst = new Est();
newEst.customer = defaultCustomer;
}
/*
* Adds a est to the ests list and resets the new est form. This
* triggers estsChanged().
*/
addEst(Event e, var detail, Node sender) {
e.preventDefault();
ests.add(detail['est']);
resetForm();
}
/*
* Removes a est from the ests list. This triggers estsChanged().
*/
deleteEst(Event e, var detail, Node sender) {
var est = detail['est'];
ests.remove(est);
}
/*
* Calculates the ests to display when using a filter.
*/
filter() {
if (filterValue == ALL) {
filteredEsts = ests;
return;
}
filteredEsts = ests.where((est) {
return est.customer == filterValue;
}).toList();
}
/*
* Refreshes the filtered ests list every time the ests list changes.
*/
estsChanged() {
filter();
}
}
As mentioned in the comment,
this is caused by an expired Dartium.
Sadly it doesn't show a message to tell about it.
Star this open issue http://dartbug.com/18560 for updates.
For some reason when a member variable of my controller gets changed, which is linked to in my HTML, the browser re-render to show the new variable until I type in a input box on the same page. I'd of expected
{{SignInCtrl.userLoggedIn}}
to get updated automatically when bool userLoggedIn is changed.
Controller
import 'package:angular/angular.dart';
import 'package:js/js.dart' as js;
import 'dart:html'; //for window.console
#NgController(
selector: '[signin-controller]',
publishAs: 'SignInCtrl')
class SignInController {
bool userLoggedIn = false;
HTML
<!DOCTYPE html><html ng-app>
<head><meta charset='UTF-8'>
<script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.dev.js'></script>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<style>.ng-hide{
display: none !important;
}
.ng-show {
}
#auth {
border: none;
}
#media screen and (max-width: 740px) {
#auth button {
width: 100%;
}
}</style></head><body>
<main ng-cloak signin-controller>
<nav class="navbar navbar-default" role="navigation" ng-controller="SignInCtrl">
<span>
Is user logged in: {{SignInCtrl.userLoggedIn}}
</span>
</nav>
</main>
<script type="text/javascript" src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
<script src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
main.dart
import 'package:angular/angular.dart';
#MirrorsUsed(override: '*') //used to make js output files smaller
import 'dart:mirrors';
import 'package:my_app/app_module.dart';
void main() {
ngBootstrap(module: new AppModule());
}
I use dart-polymer package to create custom elements. I have noticed that there is some blinking during of page with the custom elements loading. This effect also is visible for the very simple ClickCounter app. Is there any way to avoid this vexing blinking?
The issue is good described in Wikipedia http://en.wikipedia.org/wiki/Flash_of_unstyled_content
The suggested solution from http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention does not work for the simple application (polymer: '0.10.0-pre.2')..
<html>
<head>
<title>Click Counter</title>
<!-- import the click-counter -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body unresolved>
<h1>CC</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#published int count = 0;
ClickCounter.created() : super.created() {
}
void increment() {
count++;
}
}
see also the created issue in code.google.com https://code.google.com/p/dart/issues/detail?id=17498
Polymer 0.9.5
The class names to use are polymer-veiled (hidden) and polymer-unveil (during unveil transition)
If it is different than in Polymer.js it is probably subject of change but as of PolymerDart 0.9.0 it should work.
The relevant code is in packages/polymer/src/boot.dart.
Polymer 0.10.0
Polymer 0.10.0-pre.1 uses already the unresolved attribute like explained here
Polymer - Styling reference - FOUC prevention
You need to add a version constraint in pubspec.yaml to get the development version like
polymer: ">=0.10.0-pre.1"
I am trying to change the default web application that uses the polymer library so that the polymer element is created and added to the DOM from DART code rather than including in the HTML. I have succeeded in adding the element to the DOM, but my observable variable are not being updated on the DOM. The events are being fired, and the values are changing. I have got the DOM to update using Observable.dirtyCheck(), however, this is apparently expensive, so am trying to figure out how to get polymer to update dom without dirtyCheck().
So, In short, how to I get rid of Observable.dirtyCheck()???
dynamiccreate.dart
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
//create click-counter element at runtime from DART, not HTML
var NewElement = new Element.tag('click-counter');
NewElement.setAttribute("count", "5");
//Add to DOM
querySelector('#sample_container_id').children.add(NewElement);
}
dynamiccreate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="dynamiccreate.css">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<!-- <script type="application/dart">export 'package:polymer/init.dart';</script> -->
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>DynamicCreate</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<!-- <click-counter count="5"></click-counter> -->
</div>
<script src="dynamiccreate.dart" type="application/dart"></script>
</body>
</html>
clickcounter.dart
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#published int count = 0;
ClickCounter.created() : super.created() {
}
//increment gets called when dynamically adding object at runtime
//But does not update count on DOM
void increment() {
count++;
//Have to add this to update count in DOM
Observable.dirtyCheck(); //<<<---How do I get rid of this???
}
}
clickcounter.html
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
Change your dynamiccreate.dart file to look like this, and the counter starts incrementing in the UI:
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer().run(() {
var newElement = new Element.tag('click-counter');
newElement.setAttribute("count", "15");
querySelector('#sample_container_id').children.add(newElement);
});
}
Nit: name your variable newElement, not NewElement. Fixed here.