将 Valo 主题的间距和小部件大小缩小到 Reindeer 主题的大小 [英] Scale down the Valo theme’s spacing and widget size to that of the Reindeer theme

问题描述

新的 Valo 主题现在是 Vaadin 7.3 应用程序的默认主题.此主题使用比以前的默认驯鹿 主题.

The new Valo theme is now the default in Vaadin 7.3 apps. This theme renders visually with widgets (buttons, fields, and so on) that are dramatically larger (wider and taller) than in the previous default Reindeer theme.

这种外观现在在 Android 和 iOS 7/8 以及一些网站的移动应用中很流行.但是这些上下文仅在几分钟的范围内短暂使用.相比之下，人们使用面向业务的桌面风格的应用程序进行更长的工作会话，可能一整天都断断续续地工作数小时.面向业务的应用程序以更密集的格式呈现更多信息.对于这种用途，Valo 主题的默认渲染是不合适的.具体来说，字体太细和暗淡，字体和小部件的尺寸太大.

This kind of look is now popular in mobile apps in Android and iOS 7/8 as well as some web sites. But those contexts are for brief usage in the range of mere minutes. In contrast, business-oriented desktop-style apps are used by people for much longer work sessions, perhaps for hours on-and-off all day. And business-oriented apps present much more information in a denser format. For such use, the default rendering of the Valo theme is inappropriate. Specifically, the fonts are too thin and faint, and the size is too large for fonts and widgets.

Valo 声名鹊起的原因在于它的构建是可调整的，并且只需几行 Java 和/或 CSS 代码即可轻松变形.有没有人尝试过将 Valo 更改为与 Reindeer 主题相似的大小?有没有要分享的源代码或说明?

Valo's claim to fame is that it is built to be adjustable and easy to morph just a few lines of Java and/or CSS code. Has any one experimented with altering Valo to be sized similar to the Reindeer theme? Any source code or instructions to share?

明确地说，我的目标只是降低视觉高度 &宽度和它们的字体大小.我不是在问改变设计，我会很感激能找回一些像素空间.我只是在寻找最简单、最安全的方法，使 Valo 小部件的大小与驯鹿主题中对应物的视觉大小平行.

To be clear, my goal is simply reduce the visual height & width and their font size. I'm not asking about altering the design, I would be grateful just to get back some pixel space. I'm looking simply for the easiest and safest way to get the Valo widgets’ size to parallel the visual size of their counterparts in Reindeer theme.

在短期内，我将继续覆盖默认使用 Reindeer，如此 StackOverflow.com 问题中所述，更改自在新的 Vaadin 7.3 应用程序中将Valo"主题转换为Reindeer".但从长远来看，Vaadin 团队对 Valo 的赌注很大.最终驯鹿会失宠，所以我想学习如何过渡.

In the short term, I will continue to override the default to use Reindeer, as described on this StackOverflow.com Question, Change from "Valo" theme to "Reindeer" in new Vaadin 7.3 app. But longer term, the Vaadin team is betting big on Valo. Eventually Reindeer will fall out of favor, so I would like to learn how to transition.

我确实打开了 Ticket # 14,909 建议提供一个开关让 Valo 自动缩小到驯鹿计划.

I did open Ticket # 14,909 to suggest providing a switch to make Valo automatically downsize to Reindeer scheme.

有些人误读了这篇文章:我们不是在谈论磁盘上的存储大小.我们在这里谈论的是像素，而不是位.视觉大小，而不是文件大小.图形布局，而不是 widgetset 优化.

Some people have misread this post: we are not talking about storage size on disk. We are talking about pixels here, not bits. Visual size, not file size. Graphical layout, not widgetset optimization.

这个问题莫名其妙地被关闭为太宽泛".然而，它继续获得赞成票.我请你们投票支持重新开放.

This Question was inexplicably closed as "too broad". Yet it continues to receive up-votes. I ask you up-voters to vote to re-open.

推荐答案

要使用 valo 主题 作为 reindeer 主题 的替代品，您可以配置 用于 valo 的主题变量就像这样:

To use the valo theme as a replacement for the reindeer theme you can configure the theme variables used for valo just like this:

$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 演示项目 - 驯鹿主题)

Vaadin 之书 - Valo 主题 深入解释了这些变量的放置位置以及如何自定义主题.

The section Book of Vaadin - Valo Theme explains in depth where to put those variables and how to customize the theme.

这篇关于将 Valo 主题的间距和小部件大小缩小到 Reindeer 主题的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！