将Valo主题的间距和小部件大小缩小到Reindeer主题的大小。

Question

将Valo主题的间距和小部件大小缩小到Reindeer主题的大小。

javathemesvaadinvaadin7vaadin-valo-theme

14

新的Valo主题现在是Vaadin 7.3应用程序的默认主题。该主题呈现出的小部件（按钮、字段等）比以前的默认主题Reindeer大得多（宽度和高度）。这种外观现在在Android和iOS 7/8的移动应用程序以及一些网站中很受欢迎。但是，这些情境仅供短暂使用，范围仅限于几分钟。相比之下，面向业务的桌面式应用程序被人们用于更长时间的工作会话，可能是每天断断续续地使用数小时。并且，面向业务的应用程序以更密集的格式呈现更多信息。对于这种用途，Valo主题的默认渲染不合适。具体而言，字体太细且模糊，字体和小部件的大小也过大。

Valo主题的声名在于它被构建为可调整和易于变形，只需修改几行Java和/或CSS代码即可。有人尝试过将Valo改变为与Reindeer主题类似的大小吗？是否有任何源代码或说明可以分享？

请注意，我的目标仅是减小可视高度和宽度以及它们的字体大小。我不是在询问如何修改设计，我只是希望获得一些像素空间。我只是寻找最简单和最安全的方法，使Valo小部件的大小与Reindeer主题中它们的对应物的可视大小相同。

短期内，我将继续覆盖默认值以使用Reindeer，如此StackOverflow.com问题所述，Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app。但从长远来看，Vaadin团队正在大力推广Valo。最终，Reindeer将不再受欢迎，因此我想学习如何过渡。

我打开了Ticket # 14,909，建议提供一个开关，使Valo自动缩小到Reindeer方案。

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

这个问题被毫无理由地关闭为“过于宽泛”。然而，它仍然继续接收到赞同。我请求您这些点赞者投票重新开放。

- Basil Bourque

3

关于因“范围过大”而被投票关闭的问题-也许投票者不熟悉Vaadin主题和专门的Valo主题。Valo主题旨在进行自定义，具有更改颜色、字体、角落的圆润度、蓬松或扁平、动画、不透明度、边框等各种参数。请参阅此[wiki教程]（https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started）。在尝试自己构建之前，我想问一下是否有人已经开始构建了一组自定义代码，以近似以前的Reindeer主题的大小和外观。 - Basil Bourque

2

$v-font-size 是你的起点，接下来是 $v-unit-size。它们两个应该能够帮助你走得更远。如果你想让这个问题重新开启，你还可以删除问题中对此事的不满，并清楚表明你关心的是生成代码的视觉尺寸还是文件系统尺寸。 - cfrick

我已经点赞并向管理员举报了它。这里有一个相当简单的解决方案，我刚刚在我们的应用程序中实现了（在@cfrick的评论中发布）。为什么有人想关闭这个问题？ - kukis

2

@kukis，Valo主题演示现在甚至提供了一个示例，您可以在此处查看：https://github.com/vaadin/valo-demo/blob/69a1bcc1d709f9abdd759a419944f4c1ac6a6fb9/src/main/webapp/VAADIN/themes/tests-valo-reindeer/_variables.scss - cfrick

这个Wiki页面列出了Valo中定义的主要变量：Valo主题-入门指南。 - Basil Bourque

显示剩余4条评论

2个回答

1

当我从Reindeer主题切换到Valo主题时，也遇到了同样的问题。在加载主题之前使用小字号和字体解决了我的问题。

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

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

- Waqar Detho

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JDC · Accepted Answer

如果想要使用Valo主题替换Reindeer主题，您可以像这样配置使用于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演示项目 - 驯鹿主题)

该Vaadin之书-Valo主题章节详细说明了如何放置这些变量以及如何自定义主题。