Skip to content

Commit 0314237

Browse files
RubenKuilderRubenKuilder
committed
More work on explorer UI.
- Size is nu nog in bytes - Folder of file icoon moet nog dynamisch. Dit is nu nog een placeholder. - Childcount (contents) moet nog dynamisch gemaakt worden. Dit is nu nog een placeholder. - Show and hide logout / settings popup
1 parent 9297624 commit 0314237

File tree

6 files changed

+200
-29
lines changed

6 files changed

+200
-29
lines changed

‎Assets/Icons/folder.png‎

307 Bytes
Loading

‎Assets/Icons/logout.png‎

778 Bytes
Loading

‎Assets/Icons/settings.png‎

1.88 KB
Loading

‎Assets/Icons/up-left.png‎

616 Bytes
Loading

‎Main/MainWindow.xaml‎

Lines changed: 192 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,27 @@
3232
<Grid.RowDefinitions>
3333
<RowDefinition Height="auto"/>
3434
<RowDefinition Height="auto"/>
35-
<RowDefinition/>
35+
<RowDefinition Height="*"/>
3636
</Grid.RowDefinitions>
3737

3838
<!--USER-->
39-
<Border Grid.Row="0" Background="Transparent" Padding="0,50">
39+
<Border Name="UserPanel" Grid.Row="0" Background="Transparent" Padding="0, 50">
4040
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
41+
<!--Profile pictures should be here-->
4142
<TextBlock
42-
Text="PPHere"
43+
Text="Photo"
4344
VerticalAlignment="Center"
4445

45-
FontSize="21"
46+
FontSize="16"
4647
FontFamily="{StaticResource Lato}"
4748
FontWeight="Regular"
4849
Foreground="White"/>
50+
<!--Hi, {name}-->
4951
<TextBlock
50-
Text="Hi, nameHere"
52+
Text="{Binding currentUsername}"
5153
VerticalAlignment="Center"
5254

53-
FontSize="21"
55+
FontSize="16"
5456
FontFamily="{StaticResource Lato}"
5557
FontWeight="Regular"
5658
Foreground="White"
@@ -70,7 +72,7 @@
7072
Text="Search..."
7173
Grid.Row="1"
7274

73-
FontSize="21"
75+
FontSize="16"
7476
FontFamily="{StaticResource Lato}"
7577
FontWeight="Regular"
7678
Foreground="White"
@@ -85,6 +87,104 @@
8587
<!--Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}"-->
8688
</TextBox>
8789

90+
<!-- LOGOUT / SETTINGS POPUP -->
91+
<Canvas HorizontalAlignment="Center">
92+
<Canvas.Style>
93+
<Style TargetType="Canvas">
94+
<Setter Property="Visibility" Value="Hidden"/>
95+
<Style.Triggers>
96+
<DataTrigger Binding="{Binding IsMouseOver, ElementName=UserPanel}">
97+
<Setter Property="Visibility" Value="Visible"/>
98+
</DataTrigger>
99+
</Style.Triggers>
100+
</Style>
101+
</Canvas.Style>
102+
103+
<Grid Canvas.Left="-56" Canvas.Top="90">
104+
<Grid.RowDefinitions>
105+
<RowDefinition Height="auto"/>
106+
<RowDefinition Height="auto"/>
107+
</Grid.RowDefinitions>
108+
109+
<Button Grid.Row="0" Command="{Binding SettingsCommand}">
110+
<Button.Style>
111+
<Style TargetType="{x:Type Button}">
112+
<Setter Property="Background" Value="Transparent"/>
113+
<Setter Property="Template">
114+
<Setter.Value>
115+
<ControlTemplate TargetType="{x:Type Button}">
116+
<Border Background="{TemplateBinding Background}" Padding="10">
117+
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
118+
</Border>
119+
</ControlTemplate>
120+
</Setter.Value>
121+
</Setter>
122+
<Style.Triggers>
123+
<Trigger Property="IsMouseOver" Value="True">
124+
<Setter Property="Background" Value="#414E58"/>
125+
</Trigger>
126+
</Style.Triggers>
127+
</Style>
128+
</Button.Style>
129+
<Grid>
130+
<Grid.ColumnDefinitions>
131+
<ColumnDefinition Width="35"/>
132+
<ColumnDefinition Width="*"/>
133+
</Grid.ColumnDefinitions>
134+
135+
<Image Grid.Column="0" Source="/Assets/Icons/settings.png" Width="20" HorizontalAlignment="Left"/>
136+
<TextBlock
137+
Grid.Column="1"
138+
Text="Settings"
139+
140+
FontSize="16"
141+
FontFamily="{StaticResource Lato}"
142+
FontWeight="Regular"
143+
Foreground="White"/>
144+
</Grid>
145+
</Button>
146+
<Button
147+
Grid.Row="1"
148+
Command="{Binding LogoutCommand}">
149+
<Button.Style>
150+
<Style TargetType="{x:Type Button}">
151+
<Setter Property="Background" Value="#1C262E"/>
152+
<Setter Property="Template">
153+
<Setter.Value>
154+
<ControlTemplate TargetType="{x:Type Button}">
155+
<Border Background="{TemplateBinding Background}" Padding="10">
156+
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
157+
</Border>
158+
</ControlTemplate>
159+
</Setter.Value>
160+
</Setter>
161+
<Style.Triggers>
162+
<Trigger Property="IsMouseOver" Value="True">
163+
<Setter Property="Background" Value="#414E58"/>
164+
</Trigger>
165+
</Style.Triggers>
166+
</Style>
167+
</Button.Style>
168+
<Grid>
169+
<Grid.ColumnDefinitions>
170+
<ColumnDefinition Width="35"/>
171+
<ColumnDefinition Width="*"/>
172+
</Grid.ColumnDefinitions>
173+
174+
<Image Grid.Column="0" Source="/Assets/Icons/logout.png" Width="20" HorizontalAlignment="Left"/>
175+
<TextBlock
176+
Grid.Column="1"
177+
Text="Logout"
178+
179+
FontSize="16"
180+
FontFamily="{StaticResource Lato}"
181+
FontWeight="Regular"
182+
Foreground="White"/>
183+
</Grid>
184+
</Button>
185+
</Grid>
186+
</Canvas>
187+
88188
<!--CATEGORY LIST-->
89189
<ListBox
90190
x:Name="DriveListBox"
@@ -172,18 +272,16 @@
172272
</DataTemplate>
173273
</ListBox.ItemTemplate>
174274
</ListBox>
175-
<!-- LOGOUT BUTTON -->
176-
<Button Command="{Binding LogoutCommand}" Grid.Row="2" Height="40" VerticalAlignment="Bottom" Content="Logout"></Button>
177-
</Grid>
178-
275+
</Grid>
276+
179277
<Grid Grid.Column="1">
180278
<Grid.RowDefinitions>
181279
<RowDefinition Height="auto"/>
182280
<RowDefinition Height="30"/>
183-
<RowDefinition Height="30" />
184-
<RowDefinition Height="85*"/>
281+
<RowDefinition Height="auto" />
282+
<RowDefinition Height="*"/>
185283
</Grid.RowDefinitions>
186-
284+
187285
<StackPanel Grid.Row="0" Background="Transparent">
188286
<TextBlock
189287
x:Name="DriveName"
@@ -196,21 +294,72 @@
196294

197295
Padding="60, 30"/>
198296
</StackPanel>
199-
200-
<StackPanel Grid.Row="1" Background="Purple">
201-
<TextBlock Text="The titles of the rows for example. 'Name', 'Contents' and 'Size'"/>
202-
</StackPanel>
203-
204-
<StackPanel Grid.Row="2" Background="Orange">
205-
<TextBlock Text="The position where the element goes that brings the user back to the parent folder."/>
206-
</StackPanel>
207-
208-
<ListBox x:Name="ExplorerListBox" ItemsSource="{Binding ExplorerItemsList}" SelectedItem="{Binding SelectedExplorerItem}" Background="Transparent" Grid.Row="3" HorizontalAlignment="Stretch">
297+
298+
<Grid Grid.Row="1" Opacity="0.5">
299+
<Grid.ColumnDefinitions>
300+
<ColumnDefinition Width="50"/>
301+
<ColumnDefinition Width="*"/>
302+
<ColumnDefinition Width="100"/>
303+
<ColumnDefinition Width="100"/>
304+
</Grid.ColumnDefinitions>
305+
306+
<Image Grid.Column="0" Source="/Assets/Icons/folder.png" VerticalAlignment="Center" HorizontalAlignment="Center" Width="20"/>
307+
<TextBlock
308+
Grid.Column="1"
309+
VerticalAlignment="Center"
310+
Text="Name"
311+
312+
FontSize="16"
313+
FontFamily="{StaticResource Lato}"
314+
FontWeight="Regular"
315+
Foreground="White"/>
316+
<TextBlock
317+
Grid.Column="2"
318+
VerticalAlignment="Center"
319+
Text="Contents"
320+
321+
FontSize="16"
322+
FontFamily="{StaticResource Lato}"
323+
FontWeight="Regular"
324+
Foreground="White"/>
325+
<TextBlock
326+
Grid.Column="3"
327+
VerticalAlignment="Center"
328+
Text="Size"
329+
330+
FontSize="16"
331+
FontFamily="{StaticResource Lato}"
332+
FontWeight="Regular"
333+
Foreground="White"/>
334+
</Grid>
335+
336+
<Border Grid.Row="2" BorderThickness="0, 0, 0, 2" BorderBrush="#3A454E" HorizontalAlignment="Stretch">
337+
<Grid>
338+
<Grid.ColumnDefinitions>
339+
<ColumnDefinition Width="50"/>
340+
<ColumnDefinition Width="*"/>
341+
</Grid.ColumnDefinitions>
342+
343+
<Image Grid.Column="0" Source="/Assets/Icons/up-left.png" VerticalAlignment="Center" HorizontalAlignment="Center" Width="20"/>
344+
<TextBlock
345+
Grid.Column="1"
346+
Text="..."
347+
348+
Padding="40, 15, 15, 15"
349+
350+
FontSize="16"
351+
FontFamily="{StaticResource Lato}"
352+
FontWeight="Regular"
353+
Foreground="White"/>
354+
</Grid>
355+
</Border>
356+
357+
<ListBox Grid.Row="3" x:Name="ExplorerListBox" ItemsSource="{Binding ExplorerItemsList}" SelectedItem="{Binding SelectedExplorerItem}" Background="Transparent" HorizontalAlignment="Stretch">
209358
<!--Styles the listbox containing the drives.-->
210359
<ListBox.ItemContainerStyle>
211360
<Style TargetType="ListBoxItem">
212361
<Setter Property="Background" Value="Transparent"/>
213-
362+
214363
<Setter Property="FontSize" Value="16"/>
215364
<Setter Property="FontFamily" Value="{StaticResource Lato}"/>
216365
<Setter Property="FontWeight" Value="Regular"/>
@@ -219,7 +368,7 @@
219368
<Setter Property="HorizontalAlignment" Value="Stretch"/>
220369
</Style>
221370
</ListBox.ItemContainerStyle>
222-
371+
223372
<ListBox.Resources>
224373
<!--Make the listbox items transparent.-->
225374
<Style TargetType="{x:Type ListBoxItem}">
@@ -228,15 +377,29 @@
228377
<Setter Property="TextBlock.Foreground" Value="white"/>
229378
</Style>
230379
</ListBox.Resources>
231-
380+
232381
<ListBox.ItemTemplate>
233382
<DataTemplate>
234-
<StackPanel x:Name="FolderStackPanel" Background="Transparent" Orientation="Horizontal" HorizontalAlignment="Stretch" Height="50">
383+
384+
<StackPanel x:Name="FolderStackPanel" Height="50">
235385
<StackPanel.InputBindings>
236386
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding DataContext.GetChildrenFomItemCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"/>
237387
</StackPanel.InputBindings>
388+
238389
<Border BorderThickness="0, 0, 0, 2" BorderBrush="#3A454E">
239-
<TextBlock x:Name="ExplorerItem" Text="{Binding Name}" VerticalAlignment="Center" Background="Red" Padding="40, 15, 15, 15"/>
390+
<Grid>
391+
<Grid.ColumnDefinitions>
392+
<ColumnDefinition Width="50"/>
393+
<ColumnDefinition Width="*"/>
394+
<ColumnDefinition Width="100"/>
395+
<ColumnDefinition Width="85"/>
396+
</Grid.ColumnDefinitions>
397+
398+
<Image Grid.Column="0" Source="/Assets/Icons/folder.png" VerticalAlignment="Center" HorizontalAlignment="Center" Width="20"/>
399+
<TextBlock Grid.Column="1" x:Name="ExplorerItem" Text="{Binding Name}" Padding="40, 15, 15, 15"/>
400+
<TextBlock Grid.Column="2" Text="{Binding }" VerticalAlignment="Center"/>
401+
<TextBlock Grid.Column="3" Text="{Binding Size}" VerticalAlignment="Center"/>
402+
</Grid>
240403
</Border>
241404
</StackPanel>
242405
</DataTemplate>

‎OneDrive-Cloud-Player.csproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@
1818
<None Remove="Assets\Fonts\Lato-LightItalic.ttf" />
1919
<None Remove="Assets\Fonts\Lato-Regular.ttf" />
2020
<None Remove="Assets\Icons\add_to_queue.png" />
21+
<None Remove="Assets\Icons\folder.png" />
2122
<None Remove="Assets\Icons\Fullscreen.png" />
23+
<None Remove="Assets\Icons\logout.png" />
2224
<None Remove="Assets\Icons\pause.png" />
2325
<None Remove="Assets\Icons\play_arrow.png" />
2426
<None Remove="Assets\Icons\Reload.png" />
27+
<None Remove="Assets\Icons\settings.png" />
2528
<None Remove="Assets\Icons\stop.png" />
29+
<None Remove="Assets\Icons\up-left.png" />
2630
<None Remove="Assets\Icons\volume-up.png" />
2731
</ItemGroup>
2832
<ItemGroup>
@@ -50,11 +54,15 @@
5054
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
5155
</Resource>
5256
<Resource Include="Assets\Icons\add_to_queue.png" />
57+
<Resource Include="Assets\Icons\folder.png" />
5358
<Resource Include="Assets\Icons\Fullscreen.png" />
59+
<Resource Include="Assets\Icons\logout.png" />
5460
<Resource Include="Assets\Icons\pause.png" />
5561
<Resource Include="Assets\Icons\play_arrow.png" />
5662
<Resource Include="Assets\Icons\Reload.png" />
63+
<Resource Include="Assets\Icons\settings.png" />
5764
<Resource Include="Assets\Icons\stop.png" />
65+
<Resource Include="Assets\Icons\up-left.png" />
5866
<Resource Include="Assets\Icons\volume-up.png" />
5967
</ItemGroup>
6068
<ItemGroup>

0 commit comments

Comments
 (0)