topmenubar/sourceHtml.html at master · crowdcode-de/topmenubar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 data-tmb-bgcolor="#223d62"
	data-tmb-headline="TEST APPLICATION" data-tmb-icon-url="images/logo.svg"
	class="TMB_application">


	<nav class="navbar navbar-default" role="navigation"
		style="background-color: rgb(34, 61, 98); margin-bottom: 0pt;">
		<div class="navbar-header">
			<div class="TMB_application__logocontainer">
				<img src="images/logo.svg" class="">
			</div>
			<a href="javascript:;" class="navbar-brand">
				<span class="badge"
				style="margin-left: 0; margin-right: 0;">TEST APPLICATION</span>
			</a>
		</div>
		<div class="collapse navbar-collapse" id="tmb_navbar_collapse">
			<div id="tmb_portal_links">
				<ul id="internal_topics" class="nav navbar-nav"><!-- class="text-right" wenn der Text im Dropdown rechtsbündig ausgerichtet werden soll -->
					<li><a href="#">Home</a></li>
					<li><a href="#">Thema 1</a></li>
					<li><a href="#">Thema 2</a></li>
					<li><a href="#"> . . . </a></li>
				</ul>
			</div>
		</div>
		<div id="icons_right">

			<button type="button"
				class="navbar-toggle TMB_application__button headertabs"
				data-toggle="collapse" data-target="#tmb_navbar_collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<div id="tmb_app_launcher"
				data-tmb-javascript-url="/applauncher/applauncher.nocache.js"
				data-tmb-application-url="http://localhost:9010/applauncher"
				class="headertabs APL_application">

				Der applauncher hat hier noch eine LI statt eines DIVS
				<div class="dropdown"
					onfocusout="javasript:hideApplauncherPopover();"
					style="float: right;">
					<a class="dropdown-toggle"
					href="javascript:;" data-original-title="" title="">
						<i class="fa fa-th fa-3x"></i>
					</a>
				</div>
			</div>
			<div id="tmb_profile" class="fa fa-user headertabs"><a href="#"></a></div>
			<div id="tmb_messaging" class="fa fa-envelope-o headertabs"><a href="#"></a></div>
		</div>
	</nav>
</div>

für die Links, die von außen kommen, gilt diese Struktur: (class="text-right" nur dann, wenn der Text rechts ausgerichtet sein soll)
<ul id="internal_topics"><!-- class="text-right" wenn der Text im Dropdown rechtsbündig ausgerichtet werden soll -->
	<li><a href="#">Home</a></li>
	<li><a href="#">Thema 1</a></li>
	<li><a href="#">Thema 2</a></li>
	<li><a href="#">Thema 3</a></li>
	<li><a href="#">Thema 4</a></li>
	<li><a href="#">Thema 5</a></li>
</ul>


oder einfacher:
<div id="tmb_top_menu_bar">
	<!-- class="INTERSEROH_application" wenn die Standardklasse "TMB_application" mit dem interseroh-bootstrap überschrieben werden soll -->
	<nav class="navbar navbar-default">

		1
		<div class="navbar-header">
			<div class="TMB_application__logocontainer">
				LOGO
			</div>
			<a class="navbar-brand">
				TITLE
			</a>
		</div>

		2
		<div class="collapse navbar-collapse" id="tmb_navbar_collapse">
			<div id="tmb_portal_links">
				<ul id="internal_topics" class="nav navbar-nav"><!-- class="text-right" wenn der Text im Dropdown rechtsbündig ausgerichtet werden soll -->
					<li><a href="#">COLAPSABLE</a></li>
					<li><a href="#">LIST</a></li>
					<li><a href="#">Thema 2</a></li>
					<li><a href="#"> . . . </a></li>
				</ul>
			</div>
		</div>

		3
		<div id="icons_right">
			<button type="button">
				BURGERBUTTON
			</button>
			<div id="tmb_app_launcher">
				APPLAUNCHER
			</div>
			<div>ICON</div>
			<div>ICON</div>
		</div>


	</nav>
</div>

in der topmenubar.html stehen bereit
Container für alles
<div id="tmb_top_menu_bar"></div>
Links vom Portal
<div id="tmb_portal_links"></div>
Icons auf der rechten Seite
<div id="icons_right"></div>
Profile Icon mit Verlinkung
<div id="tmb_profile" class="fa fa-user headertabs"><a href="#"></a></div>
Nachrichten Icon mit Verlinkung
<div id="tmb_messaging" class="fa fa-envelope-o headertabs"><a href="#"></a></div>


 jedes Template musss mindestens enthalten:
 <div id="tmb_top_menu_bar" ......  />
 <div id="icons_right"></div>
 für die icons und den applauncher damit das rechts steht

Optional
 <div id="tmb_portal_links"></div>
 für die eventuell anfallenden portal links

 die Linkliste
 <ul id="internal_topics" class="nav navbar-nav"><!-- class="text-right" wenn der Text im Dropdown rechtsbündig ausgerichtet werden soll -->
	 <li><a href="#"> . . . .</a></li>
	 <li><a href="#"> . . . . </a></li>
 </ul>

 Einbinden der css Dateien:

 zuerst applauncher.css, dann
 topmenubar.css,
 zuletzt landingpage css
 da letzte hat die höchste Priorität.

 demgemäß diesmal umgekehrt:

 child - child - parent

 somit bestimmt die letzte Einzubindende als höchstes und kann überschreiben


 getBootstrap Konfiguration:

 Die im Ordner unter .. topmenubar-parent\topmenubar\src\main\resources\de\interseroh\tmb\resource\themes\interseroh\bootstrap\config\" gespeicherte "config.json" speichert bisherige bootstrap Konfigurationen und muss dort unter "Boortstrap/configurize" voher upgeloaded werden, um bisherige Änderungen zu übernehmen.