Ikony

Galerie

K dispozici je zhruba 900 ikon ve dvou základních velikostech, rozdělených do 19 kategorií.

V případě potřeby dokreslení ikony kontaktuje oddělení UX.

Použití

Ikony jsou řešeny webovým fontem. Každá ikona je tedy jedním znakem daného fontu, který je umisťován do pseudoelementu. MultiWeb nabízí dva způsoby, jakými tohoto dosáhnout.

HTML

<div class="icon ui-home-a"></div>

Less

.foo {
   .iconify(@ui-home-a);
}

Velikosti

Ve skutečnosti jsou ikony řešeny dvěma fonty pro malou a velkou variantů znaků. Aby ikony nebyly rozmazané, je potřeba držet se násobků definovaných velikostí

Základní

<!-- small (default) --> 
<span class="icon location-pin-b"></span>

<!-- large --> 
<span class="icon location-pin-b icon-large"></span>

Násobky pomocí Less

<span class="foo"></span> 
<span class="foo large"></span>
<span class="foo big"></span>
<span class="foo huge"></span>

.foo {
   .iconify(@location-pin-b);

   &.large {
	   --icon-size: var(--icon-large-font-size);
   }

   &.big {
	   --icon-size: calc(2 * var(--icon-small-font-size)); 
   }

   &.huge {
	   --icon-size: calc(2 * var(--icon-large-font-size)); 
   }
}

Užitečné

var(--icon-small-font-size)
var(--icon-large-font-size)

Převod SL → MW

V prostředí Sliverlight byly ikony řešeny obrázky. Pro snadnější přechod na MultiWeb jsme převodní tabluku s novými názvy ikon.

Ikona SL	Soubor *.png	Ikona MW	Název
	Action		settings-gear-a
	aeoVrstvy		doc-paper-stack
	Auto		transport-car
	awfMrizka		tool-grid
	awfRezimZmeny		ui-arrow-top-left
	awfUlozPozici		tool-floppy-disk
	awfValidWFSady		doc-todo-list
	BezpecnostniSys		tool-umbrella
	Budova		building-office
	Buffer		doc-paper-stack
	Cd		music-cd
	Chart		web-chart
	Ciselniky_Directory		web-increase-mail
	Ciselniky_Form		web-analytics-net
	Ciselniky		web-data-file-bars
	CiselnikyDIS		web-tablet-increase
	CiselnikyTSO		web-bars-home
	CLASS_LIST		doc-todo-list-square
	Directory		doc-folder
	Domek_Directory		doc-folder-home
	Domek_Form		doc-common-file-home
	Domek		building-house
	DruhExtZadanky		doc-book-upload
	DruhIntZadanky		doc-book-download
	DruhZakazky		doc-book-target
	eOpen_ZoomAll		ui-zoom-in-page
	eOpen_ZoomBase		ui-search-plus
	Excel		doc-file-xls
	Export		ui-export
	Firma		building-office-a
	Form		doc-wboard-line
	Form2		doc-file-line
	Form2Action		doc-wboard-gear
	Form2Print		doc-printer
	Hand		misc-cursor-hand-open
	HandSelect-Blue		misc-gesture
	HandSelect-Green		misc-gesture
	HandSelect-Red		misc-gesture
	HandSelect-Yellow		misc-gesture
	HandSelectMenu		misc-module-hand-puzzle
	IDCard_Directory		doc-office-folder
	IDCard_Form		doc-id-card-vertical
	IDCard		doc-profile
	Import		doc-archive-download
	InExLoadTree		ui-tree-load
	InExSaveTree		ui-tree-save
	Interier		building-door
	Inventarizace		settings-hotspot
	Jizdy		transport-bus-ticket
	Katalog sluzeb		doc-book-modules
	Katalog TZ		doc-book-settings
	Katalog Zbozi		doc-book-cash
	KlicTextu		user-key
	Kniha		doc-book-b
	Kniha2		doc-book-a
	KnihaNakladu		tool-smartphone-pay
	KomunikacniZar		com-satellite
	Majetek		doc-box-p
	Mapa		location-map
	MessageBuffer		com-advertising-megaphone
	NakladoveObjekty		doc-invoice
	NavTree		ui-hierarchy-tree
	Obec		building-daylight
	Object_2		shop-box-empty
	Object_3		misc-cube
	Object_4		shop-box-empty
	Objekty		shop-shipment-packages
	Osoba		user
	Osoby		user-group
	OtevKniha		doc-book
	Parametr-)		settings-equalizer
	Peníze		shop-cash
	Plochy		building-real-estate-dimensions-plan
	Pocitac		tool-laptop
	Poradace		doc-book-library
	Pozemek		location-pin-map
	Pracoviste		building-desk
	Pracovnik		user-headset
	Prehled		tool-binoculars
	PrehledMajetku		web-bars-home
	Print		doc-printer
	Print		doc-printer
	Profese		doc-briefcase
	RecordCancelChanges		doc-file-cross
	RecordCopy		doc-copy
	RecordDelete		doc-file-minus
	RecordEdit		doc-common-file-edit
	RecordMultiEdit		doc-common-file-text-edit
	RecordNew		doc-file-plus
	RecordNext		doc-file-next
	RecordPrev		doc-file-prev
	RecordPrint		doc-file-print
	RecordRefresh		doc-file-refresh
	RecordSaveChanges		doc-file-save
	Relating		web-share
	ReselectProject		misc-gesture-double-tap
	Rexport		web-grid-upload
	Role		user
	RolePoradace		user-contact-book
	RoleUzivatele		user-male
	Save		tool-floppy-disk
	SH_rastr		tool-grid
	SipkaVlevo		ui-arrow-left
	SipkaVpravo		ui-arrow-right
	SKP		ui-hierarchy-tree
	SpravaUdalosti		weather-flash
	Star		ui-star
	Stop		transport-sign-stop
	Sum		ui-circle-plus
	System		web-browser-grid
	TechZar		settings-gear-a
	Teplomer		weather-thermometer
	Tool		settings-wrench
	Typ-Druh		tool-module-three
	TypTextu		tool-text-type
	TypyBS		tool-protection-type
	TypyHW		tool-hardware-type
	TypyInt		tool-int-type
	TypyKZ		tool-satelite-type
	TypyMajetku		tool-property-type
	TypyPloch		tool-area-type
	TypySW		tool-android-type
	TypyTZ		tool-gears-type
	Ubytovna		building-bed
	Umisteni		location-pin
	UnSelect		web-tabs-cross
	UtvarOrganizace		user-single-neutral-home
	Uzivatel		user-circle
	Vozidla		transport-truck-a
	Vyroba		settings-wrench
	VyrobniTypy		tool-tools-box
	Way		location-direction-sign
	Workflow		web-share
	WorkflowForm		web-share
	Zadanky_Directory		doc-notes-flip
	Zadanky_Form		doc-notes-give
	ZadankyExterni		doc-notes-upload
	ZadankyInterni		doc-notes-home
	Zakazka		doc-briefcase
	ZoomIn-2		ui-search-plus
	ZoomIn		ui-search-plus
	ZoomOut-2		ui-search-minus
	ZoomOut		ui-search-minus
	Zprava		com-mail