Skalieren Sie den Abstand und die Widgetgröße des Valo-Themas auf das des Rentier-Designs

Question

Das neue Valo theme ist jetzt die Standardeinstellung in Vaadin 7.3-Apps. Dieses Thema wird visuell mit Widgets (Schaltflächen, Felder usw.) gerendert, die dramatisch größer (breiter und höher) als im vorherigen Standardthema Reindeer sind.

Diese Art von Aussehen ist jetzt in mobilen Apps in Android und iOS 7/8 sowie einigen Websites beliebt. Aber diese Kontexte sind für eine kurze Verwendung im Bereich von wenigen Minuten. Im Gegensatz dazu werden Business-orientierte Anwendungen im Desktop-Stil von den Leuten für viel längere Arbeitssitzungen verwendet, vielleicht für Stunden den ganzen Tag lang an und aus. Und Business-orientierte Apps präsentieren viel mehr Informationen in einem dichteren Format. Für diese Verwendung ist das Standard-Rendering des Valo-Themas nicht geeignet. Insbesondere sind die Schriftarten zu dünn und Ohnmacht, und die Größe ist zu groß für Schriftarten und Widgets.

Valos Anspruch auf Ruhm ist, dass es so aufgebaut ist, dass es einstellbar und leicht zu maskieren nur ein paar Zeilen von Java und/oder CSS-Code ist. Hat jemand mit experimentiert, Valo zu ändern, um dem Rentierthema ähnlich zu sein? Irgendein Quellcode oder Anweisungen zum Teilen?

Um klar zu sein, ist mein Ziel einfach die visuelle Höhe & Breite und ihre Schriftgröße zu reduzieren. Ich frage nicht, ob ich das Design ändern könnte, ich wäre dankbar, wenn ich nur etwas Pixelraum zurückbekomme. Ich suche einfach nach dem einfachsten und sichersten Weg, um die Größe der Valo-Widgets parallel zur visuellen Größe ihrer Gegenstücke im Rentier-Thema zu bekommen.

Kurzfristig werde ich weiterhin den Standard überschreiben, Rentiere zu verwenden, wie in dieser Frage StackOverflow.com, Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app beschrieben. Aber längerfristig setzt das Vaadin-Team auf Valo. Irgendwann wird Rentier in Ungnade fallen, also würde ich gerne lernen, wie man umzieht.

Ich habe Ticket # 14,909 geöffnet, um vorzuschlagen, einen Schalter zur Verfügung zu stellen, um Valo automatisch auf Rentierschema zu verkleinern.

Einige Leute haben diesen Beitrag falsch gelesen: Wir sprechen nicht über die Speichergröße auf der Festplatte. Wir sprechen hier über Pixel, nicht über Bits. Visuelle Größe, nicht Dateigröße. Grafisches Layout, nicht Optimierung.

Diese Frage wurde unerklärlicherweise als "zu breit" geschlossen. Dennoch erhält es weiterhin Stimmen. Ich bitte Sie, Wähler zu stimmen, um wieder zu öffnen.

Answer 1

Um das Valo Thema als Ersatz für das Rentiere Thema verwenden Sie das Thema Variablen für Valo wie diese nur verwendet konfigurieren:

$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; 

(Quelle: Valo Demo Project - Reindeer Theme)

---

Der Abschnitt Book of Vaadin - Valo Theme ex Ebenen, in denen diese Variablen platziert und das Thema angepasst werden können.

Answer 2

Ich hatte auch das gleiche Problem, wenn ich von Rentier zu Valo Thema wechselte. Mit kleiner Schriftgröße und Familie vor dem Laden des Themas löste mein Problem.

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

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