Стиль контента Vaadin app-layout-addon не работает на Chrome, но работает на Firefox - PullRequest
0 голосов
/ 29 сентября 2018

Я пытаюсь использовать app-layout-addon (https://vaadin.com/directory/component/app-layout-add-on) в vaadin. До сих пор аддон работает довольно хорошо, за исключением того факта, что написанная мной таблица стилей работает только в Firefox, а не в ChromeЯ создал еще что-то сложное, но я также новичок в работе веб-компонентов. Может кто-нибудь объяснить мне, как должна быть настроена таблица стилей для работы с Chrome.

Пакет класса MainView com.test.style.applayout.content.views;

import com.github.appreciated.app.layout.behaviour.AppLayout;
import com.github.appreciated.app.layout.behaviour.Behaviour;
import com.github.appreciated.app.layout.builder.AppLayoutBuilder;
import com.github.appreciated.app.layout.component.appmenu.left.LeftNavigationComponent;
import com.github.appreciated.app.layout.component.appmenu.left.builder.LeftAppMenuBuilder;
import com.github.appreciated.app.layout.design.AppLayoutDesign;
import com.github.appreciated.app.layout.router.AppLayoutRouterLayout;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.page.Push;
import com.vaadin.flow.component.page.Viewport;


@StyleSheet(value = "frontend://style.css")
@Push
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainView extends AppLayoutRouterLayout {
    private Behaviour variant;

    @Override
    public AppLayout getAppLayout() {
        if (variant == null) {
            variant = Behaviour.LEFT_HYBRID;
        }
        return AppLayoutBuilder.get(variant).withTitle("App Layout").withDesign(AppLayoutDesign.CUSTOM)
                .withAppMenu(LeftAppMenuBuilder.get()
                        .add(new LeftNavigationComponent("Assets", VaadinIcon.ABACUS.create(), AssetsView.class))
                        .build())
                .build();
    }
}

Класс актива содержит простой div с текстом и цветом фона, определенным в таблице стилей. package com.test.style.applayout.content.views;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route(value = "testgrid", layout = MainView.class)
public class AssetsView extends Div {

    public AssetsView() {
        setWidth("100%");
        GridDiv gridDiv = new GridDiv();
        add(gridDiv);
    }

    public class GridDiv extends Div {
        public GridDiv() {
            setClassName("browse-components__grid");
            setText(GridDiv.class.getSimpleName());
            setSizeFull();
        }
    }
}

style.css

.browse-components__grid {
    background-color: red;
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.test</groupId>
<artifactId>style.applayout.content</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>style.applayout.content</name>
<description>Demo project for Spring Boot</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.5.RELEASE</version>
    <relativePath /> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <vaadin.version>10.0.5</vaadin.version>
</properties>

<repositories>
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!-- https://vaadin.com/directory/component/app-layout-add-on -->
    <dependency>
        <groupId>com.github.appreciated</groupId>
        <artifactId>app-layout-addon</artifactId>
        <version>2.0.0</version>
    </dependency>
</dependencies>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

Настройка приложения

application structure

Скриншот Firefox firefox screenshot

Скриншот Chrome chrome screenshot

...