Vaadin 8 изменить глобальный шрифт программно - PullRequest
Новая
       12

Vaadin 8 изменить глобальный шрифт программно

0 голосов
/ 14 сентября 2018

У меня есть окно пользовательских настроек, которое позволяет пользователю выбирать размер шрифта и при применении окна (с помощью кнопки щелчка) все компоненты в корневом пользовательском интерфейсе, и дети получают новый размер шрифта.

Я перепробовал все доступные решения для обработки глобальных изменений шрифтов с помощью файла scss. Однако изменяются только элементы непосредственно под корневым шрифтом пользовательского интерфейса, но дочерние элементы, такие как шрифт Tree Elements и Grid Row, остаются прежними.

Вот ссылка на аналогичный вопрос, который работает частично. https://vaadin.com/forum/thread/10962145

Решение 1. Используйте файл styles.scss для настройки, как показано ниже 

@import "mytheme.scss";
@import "addons.scss";
@import "mythememedium.scss";
@import "mythemelarge.scss";

.mytheme {
  @include addons;
  @include mytheme;
}

.mytheme-small{
   $v-font-size: 13px;
  @include mytheme;
}

.mytheme-medium{
   $v-font-size: 16px;
  @include mythememedium;
}

.mytheme-large{
   $v-font-size: 17px;
  @include addons;
  @include mythemelarge;
}

UserPreferenceWindow.java 

apply.addClickListener(new Button.ClickListener() {
@Override
public void buttonClick(Button.ClickEvent event) {
       String fontSize = (String) fontSizeCmb.getValue();
       String styleName = UI.getCurrent().getStyleName();
       if (fontSize.equals("MEDIUM")) {
            UI.getCurrent().addStyleName("abstheme-medium");
            UI.getCurrent().removeStyleName(styleName);
        } else if (fontSize.equals("LARGE")) {
            UI.getCurrent().addStyleName("abstheme-large");
            UI.getCurrent().removeStyleName(styleName);
        } else {
            UI.getCurrent().addStyleName("abstheme-small");
            UI.getCurrent().removeStyleName(styleName);
        }
     }
});

mythemelarge.scss 

.v-tree8 {
  .v-tree8-scroller, .v-tree8-scroller-horizontal { }
  .v-tree8-tablewrapper {
    .v-tree8-body {
      .v-tree8-row,
      .v-tree8-stripe,
      .v-tree8-row-focused,
      .v-tree8-row-has-data {
        .v-tree8-expander, expanded {}
        .v-tree8-cell-content {font-size: 17px;  color: black !important;}
      }
    }
  }
}
}

.mygrid .v-grid-body .v-grid-cell {  
    font-size: 17px;       // adjust to your needs
}

Есть ли какие-либо указатели о том, как справиться с этим ??

ТИА.

...