Масштабируйте расстояние между темами Valo и размер виджета до размера темы "Оленевод"

Новая тема Valo теперь используется по умолчанию в приложениях Vaadin 7.3. Эта тема визуально визуализируется с виджетами (кнопками, полями и т.д.), Которые значительно больше (шире и выше), чем в предыдущем стандарте Reindeer тема.

Такой вид теперь популярен в мобильных приложениях на Android и iOS 7/8, а также на некоторых веб-сайтах. Но эти контексты используются для краткого использования в течение нескольких минут. Напротив, бизнес-ориентированные приложения для настольных приложений используются людьми в течение более длительных рабочих сессий, возможно, часами в режиме "включено-выключено" весь день. И бизнес-ориентированные приложения предоставляют гораздо больше информации в более плотном формате. Для такого использования рендеринг по умолчанию темы Valo по умолчанию является неуместным. В частности, шрифты слишком тонкие и слабый, а размер слишком большой для шрифтов и виджетов.

Вало претендует на славу в том, что он создан, чтобы быть регулируемым и легким в морфинге всего несколько строк кода Java и/или CSS. Кто-нибудь экспериментировал с изменением Вало, чтобы он был похож на тему оленя? Любой исходный код или инструкции для совместного использования?

Чтобы быть ясным, моя цель - просто уменьшить визуальную высоту и ширину и размер шрифта. Я не спрашиваю об изменении дизайна, я был бы благодарен за то, что верну немного места в пикселях. Я ищу просто самый простой и безопасный способ получить размер виджета Valo параллельно визуальному размеру своих коллег в теме оленя.

В краткосрочной перспективе я продолжу переопределять значение по умолчанию для использования Reindeer, как описано в этом вопросе StackOverflow.com, Изменить с темы "Valo" на "Оленье" в новом Приложение Vaadin 7.3. Но в долгосрочной перспективе команда Ваадина делает ставку на Вало. В конце концов оленей выпадет в немилость, поэтому я хотел бы узнать, как перейти.

Я открыл Ticket # 14,909, чтобы предложить включить переключатель, чтобы сделать Valo автоматически уменьшенным до схемы оленя.

Некоторые люди неправильно поняли этот пост: мы не говорим о размере хранилища на диске. Мы говорим о пикселях здесь, а не о битах. Визуальный размер, а не размер файла. Графическая компоновка, а не оптимизация widgetset.

Этот вопрос был необъяснимо закрыт как "слишком широкий". Тем не менее он по-прежнему получает голосов. Я прошу вас, чтобы избиратели проголосовали за повторное открытие.

Ответы

Ответ 1

Чтобы использовать тему valo в качестве замены темы оленей, вы можете настроить переменные темы , используемые для valo, следующим образом:

$v-font-size: 12px;

$v-unit-size: 26px;
$v-unit-size--small: 20px;
$v-unit-size--tiny: 18px;

$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;

(Источник: Проект Valo Demo - тема оленей)

Раздел Книга Ваадин - Вало Тема подробно объясняет, куда поместить эти переменные и как настроить тему.

Ответ 2

У меня также была такая же проблема, когда я переключился с темы оленя на тему Вало. Используя небольшой размер шрифта и семью, перед загрузкой темы была решена моя проблема.

$v-font-size: 12px;
$v-font-family: sans-serif;

@import "../valo/valo.scss";