Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add gradient decorator to demo sample, some adjustments.

Michael Ragazzon 6 years ago
parent
f49f5bc83e
commit
813aa49f09
2 changed files with 34 additions and 99 deletions
Unified View Show Diff Stats
  1. 32 45
      Samples/basic/demo/data/demo.rml
  2. 2 54
      Samples/basic/demo/src/main.cpp

+ 32 - 45
Samples/basic/demo/data/demo.rml
View File 

@@ -5,27 +5,15 @@
 
 <style>
 
 <style>
 
 body.window
 
 body.window
 
 {
 
 {
 
-	max-width: 1000px;
 
-	max-height: 8000px;
 
-	width: 1000px;
 
+	max-width: 1400px;
 
+	max-height: 850px;
 
+	width: 1300px;
 
 	height: 800px;
 
 	height: 800px;
 
-	opacity: 0.8;
 
-}
 
-body.window:focus {
 
-	opacity: 1.0;
 
 }
 
 }
 
 div#title_bar div#icon
 
 div#title_bar div#icon
 
 {
 
 {
 
 	display: none;
 
 	display: none;
 
 }
 
 }
 
-#fps 
-{
 
-	position: absolute;
 
-	top: 55px;
 
-	left: 20px;
 
-	font-size: 0.85em;
 
-	text-align: left;
 
-}
 
 
 
 tabset
 
 tabset
 
 {
 
 {
 
@@ -50,18 +38,15 @@ tab
 
 	image-color: #cff9;
 
 	image-color: #cff9;
 
 	
 	
 	font-size: 16px;
 
 	font-size: 16px;
 
-	color: #ccc;
 
+	color: #ddd;
 
 	text-align: center;
 
 	text-align: center;
 
 }
 
 }
 
 tab:hover
 
 tab:hover
 
 {
 
 {
 
 	image-color: #fffc;
 
 	image-color: #fffc;
 
+	color: #fff;
 
 }
 
 }
 
-tab:active
 
-{
 
-	image-color: #fee;
 
-}
 
-tab:selected
 
+tab:active, tab:selected
 
 {
 
 {
 
 	image-color: #fff;
 
 	image-color: #fff;
 
 	color: #fff;
 
 	color: #fff;
 
@@ -84,24 +69,17 @@ panel
 
 button:focus {
 
 button:focus {
 
 	image-color: #0ff;
 
 	image-color: #0ff;
 
 }
 
 }
 
-#decorators button.big
 
-{
 
-	width: 250px;
 
-	height: 150px;
 
-	line-height: 150px;
 
+#decorators div {
 
+	margin-bottom: 14px;
 
 }
 
 }
 
-#decorators button.small
 
-{
 
-	width: 90px;
 
-	height: 35px;
 
-	line-height: 20px;
 
-	font-size: 10px;
 
+#decorators p {
 
+	text-align: center;
 
 }
 
 }
 
-#decorators button.tiny
 
+#decorators button.big
 
 {
 
 {
 
-	width: 15px;
 
-	height: 10px;
 
-	line-height: 5px;
 
+	width: 220px;
 
+	height: 120px;
 
+	line-height: 120px;
 
 }
 
 }
 
 #decorators button.ninepatch
 
 #decorators button.ninepatch
 
 {
 
 {
 
@@ -116,6 +94,21 @@ button:focus {
 
 {
 
 {
 
 	decorator: ninepatch(button-active, button-inner-active);
 
 	decorator: ninepatch(button-active, button-inner-active);
 
 }
 
 }
 
+#decorators button.gradient
 
+{
 
+	decorator: gradient( vertical #415857 #5990A3 );
 
+	border: 2px #415857;
 
+	margin-right: 12px;
 
+}
 
+#decorators button.gradient.horizontal
 
+{
 
+	decorator: gradient( horizontal #DB6565 #F1B58A );
 
+	border: 2px #DB6565;
 
+}
 
+#decorators button.gradient:hover
 
+{
 
+	border-color: #F9EFA3;
 
+}
 
 p.emojis
 
 p.emojis
 
 {
 
 {
 
 	text-align: left;
 
 	text-align: left;
 
@@ -134,8 +127,6 @@ textarea {
 
 
 
 <body template="window">
 
 <body template="window">
 
 
 
-<div style="font-size: 0.85em; text-align: left;" id="fps"></div>
 
-
 
 <tabset id="menu">
 
 <tabset id="menu">
 
 <tab>Welcome</tab>
 
 <tab>Welcome</tab>
 
 <panel id="welcome">
 
 <panel id="welcome">
 
@@ -146,7 +137,6 @@ textarea {
 
 </panel>
 
 </panel>
 
 <tab>Decorators</tab>
 
 <tab>Decorators</tab>
 
 <panel id="decorators">
 
 <panel id="decorators">
 
-	<p>Image vs ninepatch decorator:</p>
 
 	<div>	
 	<div>	
 		<button>Image</button>
 
 		<button>Image</button>
 
 		<button class="ninepatch">Ninepatch</button>
 
 		<button class="ninepatch">Ninepatch</button>
 
@@ -154,14 +144,11 @@ textarea {
 
 	<div>	
 	<div>	
 		<button class="big">Image</button>
 
 		<button class="big">Image</button>
 
 		<button class="big ninepatch">Ninepatch</button>
 
 		<button class="big ninepatch">Ninepatch</button>
 
+		<p>The ninepatch decorator scales the background without blurring the texture, keeping the corners fixed.</p>
 
 	</div>
 
 	</div>
 
 	<div>	
 	<div>	
-		<button class="small">Image</button>
 
-		<button class="small ninepatch" autofocus>Ninepatch</button>
 
-	</div>
 
-	<div>	
-		<button class="tiny"></button>
 
-		<button class="tiny ninepatch"></button>
 
+		<button class="gradient">Gradient</button>
 
+		<button class="gradient horizontal">Gradient</button>
 
 	</div>
 
 	</div>
 
 </panel>
 
 </panel>
 
 <tab>Buttons</tab>
 
 <tab>Buttons</tab>

+ 2 - 54
Samples/basic/demo/src/main.cpp
View File 

@@ -41,7 +41,6 @@ bool single_loop = false;
 
 
 
 class DemoWindow;
 
 class DemoWindow;
 
 DemoWindow* window = nullptr;
 
 DemoWindow* window = nullptr;
 
-DemoWindow* window2 = nullptr;
 
 
 
 class DemoWindow : public Rml::Core::EventListener
 
 class DemoWindow : public Rml::Core::EventListener
 
 {
 
 {
 
@@ -97,36 +96,6 @@ public:
 
 			{
 
 			{
 
 				Rml::Debugger::SetVisible(!Rml::Debugger::IsVisible());
 
 				Rml::Debugger::SetVisible(!Rml::Debugger::IsVisible());
 
 			}
 
 			}
 
-			else if (key_identifier == Rml::Core::Input::KI_H)
 
-			{
 
-				window2->GetDocument()->Hide();
 
-			}
 
-
 
-			using Rml::Core::ModalFlag;
 
-			using Rml::Core::FocusFlag;
 
-
 
-			ModalFlag modal_flag = ModalFlag::None;
 
-			if (event.GetParameter("ctrl_key", 0))
 
-				modal_flag = ModalFlag::Modal;
 
-			else if (event.GetParameter("shift_key", 0))
 
-				modal_flag = ModalFlag::Keep;
 
-			
-			if (key_identifier == Rml::Core::Input::KI_Q)
 
-			{
 
-				window2->GetDocument()->Show(modal_flag, FocusFlag::None);
 
-			}
 
-			else if (key_identifier == Rml::Core::Input::KI_W)
 
-			{
 
-				window2->GetDocument()->Show(modal_flag, FocusFlag::Document);
 
-			}
 
-			else if (key_identifier == Rml::Core::Input::KI_E)
 
-			{
 
-				window2->GetDocument()->Show(modal_flag, FocusFlag::Keep);
 
-			}
 
-			else if (key_identifier == Rml::Core::Input::KI_R)
 
-			{
 
-				window2->GetDocument()->Show(modal_flag, FocusFlag::Auto);
 
-			}
 
 		}
 
 		}
 
 		break;
 
 		break;
 
 
 
@@ -160,21 +129,6 @@ void GameLoop()
 
 
 
 		single_loop = false;
 
 		single_loop = false;
 
 	}
 
 	}
 
-
 
-	static double t_prev = 0.0f;
 
-	double t = Shell::GetElapsedTime();
 
-	float dt = float(t - t_prev);
 
-	static int count_frames = 0;
 
-	count_frames += 1;
 
-
 
-	if (window && dt > 0.2f)
 
-	{
 
-		t_prev = t;
 
-		auto el = window->GetDocument()->GetElementById("fps");
 
-		float fps = float(count_frames) / dt;
 
-		count_frames = 0;
 
-		el->SetInnerRML(Rml::Core::CreateString( 20, "FPS: %f", fps ));
 
-	}
 
 }
 
 }
 
 
 
 
 
@@ -236,10 +190,9 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	RMLUI_UNUSED(argv);
 
 	RMLUI_UNUSED(argv);
 
 #endif
 
 #endif
 
 
 
-	const int width = 2200;
 
+	const int width = 1600;
 
 	const int height = 1000;
 
 	const int height = 1000;
 
 
 
-
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
 
 	shell_renderer = &opengl_renderer;
 
 	shell_renderer = &opengl_renderer;
 
 
 
@@ -281,18 +234,14 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 
 
 	Shell::LoadFonts("assets/");
 
 	Shell::LoadFonts("assets/");
 
 
 
-	window = new DemoWindow("Demo sample", Rml::Core::Vector2f(81, 100), context);
 
+	window = new DemoWindow("Demo sample", Rml::Core::Vector2f(150, 80), context);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Keydown, window);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Keydown, window);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Keyup, window);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Keyup, window);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Animationend, window);
 
 	window->GetDocument()->AddEventListener(Rml::Core::EventId::Animationend, window);
 
 
 
-	window2 = new DemoWindow("Demo sample 2", Rml::Core::Vector2f(1150, 100), context);
 
-	window2->GetDocument()->AddEventListener(Rml::Core::EventId::Keydown, window2);
 
-
 
 	Shell::EventLoop(GameLoop);
 
 	Shell::EventLoop(GameLoop);
 
 
 
 	window->Shutdown();
 
 	window->Shutdown();
 
-	window2->Shutdown();
 
 
 
 	// Shutdown RmlUi.
 
 	// Shutdown RmlUi.
 
 	Rml::Core::Shutdown();
 
 	Rml::Core::Shutdown();
 
@@ -301,7 +250,6 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Shell::Shutdown();
 
 	Shell::Shutdown();
 
 
 
 	delete window;
 
 	delete window;
 
-	delete window2;
 
 
 
 	return 0;
 
 	return 0;
 
 }
 
 }