<!--
Description:
  Top bar containing
  * Logo
  * Mixer for Master, Booth & Headphone
  * Crossfader (if enabled)
  * GUI toggle buttons (FX, Sampler, Lib, Wave ...)
  * recording button with duration display
  * Broadcast button
  * Clock
  * Skin Menu toggle
-->
<Template>
  <WidgetGroup>
    <ObjectName>Topbar</ObjectName>
    <Layout>horizontal</Layout>
    <SizePolicy>me,min</SizePolicy>
    <Children>
  <!-- Put Mixerbar & Logo in a container to achieve top alignment
      when Crossfader is enabled. 'qproperty-layoutAlignment' for Topbar
      wouldn't work... -->
      <WidgetGroup>
        <ObjectName>AlignTop</ObjectName>
        <Layout>horizontal</Layout>
        <SizePolicy>me,min</SizePolicy>
        <Children>
          <WidgetGroup><!-- Logo + Master, Headphone & Booth Mixer -->
            <ObjectName>MixerBar</ObjectName>
            <Layout>horizontal</Layout>
            <Size>-1me,28f</Size>
            <Children>

              <WidgetGroup>
                <MaximumSize>3,-1</MaximumSize>
                <SizePolicy>min,min</SizePolicy>
              </WidgetGroup>

              <PushButton>
                <MinimumSize>51,12</MinimumSize>
                <MaximumSize>102,24</MaximumSize>
                <SizePolicy>me,min</SizePolicy>
                <NumberStates>2</NumberStates>
                <State>
                  <Number>0</Number>
                  <Pressed scalemode="STRETCH_ASPECT">buttons/btn_logo_102x24_grey.svg</Pressed>
                  <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_logo_102x24_grey.svg</Unpressed>
                </State>
                <State>
                  <Number>1</Number>
                  <Pressed scalemode="STRETCH_ASPECT">buttons/btn_logo_102x24.svg</Pressed>
                  <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_logo_102x24.svg</Unpressed>
                </State>
                <Connection>
                  <ConfigKey persist="true">[Tango],colorLogo</ConfigKey>
                  <ButtonState>LeftButton</ButtonState>
                </Connection>
              </PushButton>

              <Template src="skin:button_2state_persist.xml">
                <SetVariable name="ObjectName">MasterHeadMixerToggle</SetVariable>
                <!-- Size needs to be changed in size_detector_stars.xml, too -->
                <SetVariable name="Size">15f,28f</SetVariable>
                <SetVariable name="ConfigKey">[Tango],master_mixer</SetVariable>
              </Template>

              <WidgetGroup><!-- Master & Headphone mixer -->
                <Size>22f,28f</Size>
                <Layout>horizontal</Layout>
                <Children>
                  <Label>
                    <Size>22f,28f</Size>
                    <ObjectName>MasterHeadMixerLabel</ObjectName>
                  </Label>
                </Children>
                <Connection>
                  <ConfigKey persist="true">[Tango],master_mixer</ConfigKey>
                  <Transform><Not/></Transform>
                  <BindProperty>visible</BindProperty>
                </Connection>
              </WidgetGroup>

              <WidgetGroup><Size>1f,1min</Size></WidgetGroup>

              <Template src="skin:mixer_master_booth.xml"/>

              <WidgetGroup>
                <MinimumSize>5,-1</MinimumSize>
                <MaximumSize>50,-1</MaximumSize>
                <SizePolicy>min,min</SizePolicy>
              </WidgetGroup>

              <Template src="skin:mixer_headphone.xml"/>

              <WidgetGroup><Size>0min,1min</Size></WidgetGroup>

            </Children>
          </WidgetGroup>
        </Children>
      </WidgetGroup><!-- /Logo + Master, Headphone & Booth Mixer -->

      <WidgetGroup><!-- Crossfader, hidden with maximized library -->
        <SizePolicy>min,min</SizePolicy>
        <Layout>horizontal</Layout>
        <Children>
		      <WidgetGroup>
		        <SizePolicy>min,min</SizePolicy>
		        <Layout>horizontal</Layout>
		        <Children>
		          <WidgetGroup>
		            <SizePolicy>min,min</SizePolicy>
		            <Layout>horizontal</Layout>
		            <Children>
		              <WidgetGroup>
		                <ObjectName>CrossfaderContainer</ObjectName>
		                <SizePolicy>min,f</SizePolicy>
		                <Layout>vertical</Layout>
		                <Children>
		                  <SliderComposed>
		                    <TooltipId>crossfader</TooltipId>
		                    <Size>108f,32f</Size>
		                    <Handle scalemode="STRETCH_ASPECT">knobs_sliders/crossfader_handle.svg</Handle>
		                    <Slider scalemode="STRETCH_ASPECT">knobs_sliders/crossfader_scale.svg</Slider>
		                    <Horizontal>true</Horizontal>
		                    <Connection>
		                      <ConfigKey>[Master],crossfader</ConfigKey>
		                    </Connection>
		                  </SliderComposed>
		                </Children>
		              </WidgetGroup>
		            </Children>
		            <Connection>
		              <ConfigKey persist="true">[Master],show_xfader</ConfigKey>
		              <BindProperty>visible</BindProperty>
		            </Connection>
		          </WidgetGroup>
            </Children>
            <Connection>
              <ConfigKey persist="true">[Master],show_mixer</ConfigKey>
              <BindProperty>visible</BindProperty>
            </Connection>
          </WidgetGroup>
        </Children>
        <Connection>
          <ConfigKey>[Master],maximize_library</ConfigKey>
          <Transform><Not/></Transform>
          <BindProperty>visible</BindProperty>
        </Connection>
      </WidgetGroup><!-- /Crossfader, hidden with maximized library -->

      <WidgetGroup><!-- Skin toggles, Rec, Broadcast, Clock, Skin menu toggle -->
        <Layout>horizontal</Layout>
        <ObjectName>SkinControlsBar</ObjectName>
        <SizePolicy>me,min</SizePolicy>
        <Children>

          <WidgetGroup><Size>10me,1min</Size></WidgetGroup>

          <WidgetGroup><!-- Skin toggles, hidden with maximized library -->
            <Layout>horizontal</Layout>
            <ObjectName>SkinControlsBar</ObjectName>
            <SizePolicy>min,min</SizePolicy>
            <Children>

              <Template src="skin:button_2state_persist.xml"><!-- Waveforms -->
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">30f,20f</SetVariable>
                <SetVariable name="state_0_icon">wave_off.svg</SetVariable>
                <SetVariable name="state_1_icon">wave_on.svg</SetVariable>
                <SetVariable name="ConfigKey">[Tango],stacked_waveforms</SetVariable>
              </Template>

              <WidgetGroup><Size>10f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml"><!-- FX -->
                <SetVariable name="TooltipId">show_effects</SetVariable>
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">30f,20f</SetVariable>
                <SetVariable name="state_0_text">FX</SetVariable>
                <SetVariable name="state_1_text">FX</SetVariable>
                <SetVariable name="ConfigKey">[EffectRack1],show</SetVariable>
              </Template>

              <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml"><!-- Samplers -->
                <SetVariable name="TooltipId">show_samplers</SetVariable>
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">30f,20f</SetVariable>
                <SetVariable name="state_0_icon">samplers_off.svg</SetVariable>
                <SetVariable name="state_1_icon">samplers_on.svg</SetVariable>
                <SetVariable name="ConfigKey">[Samplers],show_samplers</SetVariable>
              </Template>

              <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml">
                <SetVariable name="TooltipId">show_microphone</SetVariable>
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">30f,20f</SetVariable>
                <SetVariable name="state_0_icon">mic_aux_off.svg</SetVariable>
                <SetVariable name="state_1_icon">mic_aux_on.svg</SetVariable>
                <SetVariable name="ConfigKey">[Microphone],show_microphone</SetVariable>
              </Template>

              <WidgetGroup><Size>10f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml"><!-- Mixer -->
                <SetVariable name="TooltipId">show_mixer</SetVariable>
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">20f,20f</SetVariable>
                <SetVariable name="state_0_icon">mixer_off.svg</SetVariable>
                <SetVariable name="state_1_icon">mixer_on.svg</SetVariable>
                <SetVariable name="ConfigKey">[Master],show_mixer</SetVariable>
              </Template>

              <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml"><!-- Loop/Beatjump -->
                <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
                <SetVariable name="Size">20f,20f</SetVariable>
                <SetVariable name="state_0_icon">loop_beatjump_off.svg</SetVariable>
                <SetVariable name="state_1_icon">loop_beatjump_on.svg</SetVariable>
                <SetVariable name="ConfigKey">[Tango],loop_beatjump_controls</SetVariable>
              </Template>

              <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

              <Template src="skin:button_2state_persist.xml"><!-- 4 Decks -->
                <SetVariable name="ObjectName">GuiToggleButton2</SetVariable>
                <SetVariable name="Size">20f,20f</SetVariable>
                <SetVariable name="TooltipId">toggle_4decks</SetVariable>
                <SetVariable name="state_0_icon">2decks.svg</SetVariable>
                <SetVariable name="state_1_icon">4decks.svg</SetVariable>
                <SetVariable name="ConfigKey">[Master],show_4decks</SetVariable>
              </Template>
            </Children>
            <Connection>
              <ConfigKey>[Master],maximize_library</ConfigKey>
              <Transform><Not/></Transform>
              <BindProperty>visible</BindProperty>
            </Connection>
          </WidgetGroup>

          <WidgetGroup><Size>10f,1min</Size></WidgetGroup>

          <WidgetGroup><!-- Recording button & recording duration label -->
            <ObjectName>RecBox</ObjectName>
            <Layout>stacked</Layout>
            <Size>70f,20f</Size>
            <Children>
              <!-- invisible Rec button -->
              <Template src="skin:button_3state_display.xml">
                <SetVariable name="ObjectName">RecButton</SetVariable>
                <SetVariable name="TooltipId">toggle_recording</SetVariable>
                <SetVariable name="Size">70f,20f</SetVariable>
                <SetVariable name="ConfigKey">[Recording],toggle_recording</SetVariable>
                <SetVariable name="ConfigKeyDisp">[Recording],status</SetVariable>
              </Template>

              <WidgetGroup><!-- Rec dot + RecDuration -->
                <Layout>horizontal</Layout>
                <Size>70f,20f</Size>
                <Children>
                  <Label>
                    <ObjectName>RecDot</ObjectName>
                    <Size>15f,20f</Size>
                  </Label>

                  <RecordingDuration>
                    <ObjectName>RecDuration</ObjectName>
                    <Size>55f,20f</Size>
                    <InactiveText>REC</InactiveText>
                    <Alignment>center</Alignment>
                  </RecordingDuration>
                </Children>
              </WidgetGroup><!-- /Rec dot + RecDuration -->
            </Children>
          </WidgetGroup><!-- /Recording button & recording duration label -->

          <WidgetGroup><Size>10f,1min</Size></WidgetGroup>

          <Template src="skin:button_5state_display.xml">
            <SetVariable name="TooltipId">broadcast_enabled</SetVariable>
            <SetVariable name="ObjectName">BroadcastButton</SetVariable>
            <SetVariable name="Size">20f,28f</SetVariable>
            <SetVariable name="ConfigKey">[Shoutcast],enabled</SetVariable>
            <SetVariable name="ConfigKeyDisp">[Shoutcast],status</SetVariable>
          </Template>

          <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

          <WidgetGroup><!-- Clock + latency display -->
            <ObjectName>AlignCenter</ObjectName>
            <Size>52f,24f</Size>
            <Layout>vertical</Layout>
            <Children>
              <WidgetGroup>
                <SizePolicy>min,me</SizePolicy>
                <Layout>horizontal</Layout>
                <Children>
                  <Time>
                    <TooltipId>time</TooltipId>
                    <ObjectName>Clock</ObjectName>
                    <!-- <ShowSeconds>false</ShowSeconds>
                    <ClockFormat>12AP</ClockFormat>
                    This has no effect, neither has 'text-align' in qss.   -->
                    <Align>center</Align>
                  </Time>
                </Children>
              </WidgetGroup>

              <VuMeter><!-- latency usage -->
                <Size>31f,3f</Size>
                <TooltipId>audio_latency_usage</TooltipId>
                <PathVu>graphics/latency_usage_over.svg</PathVu>
                <PathBack>graphics/latency_usage.svg</PathBack>
                <Horizontal>true</Horizontal>
                <PeakHoldSize>5</PeakHoldSize>
                <PeakHoldTime>1000</PeakHoldTime>
                <PeakFallTime>100</PeakFallTime>
                <PeakFallStep>1</PeakFallStep>
                <Connection>
                  <ConfigKey>[Master],audio_latency_usage</ConfigKey>
                </Connection>
              </VuMeter><!-- /latency usage -->

              <WidgetGroup><Size>1min,3f</Size></WidgetGroup>
            </Children>
          </WidgetGroup><!-- Clock + latency display -->

          <WidgetGroup><Size>3f,1min</Size></WidgetGroup>

          <WidgetGroup>
            <Layout>vertical</Layout>
            <SizePolicy>min,min</SizePolicy>
            <Children>
              <PushButton>
                <TooltipId>skin_settings</TooltipId>
                <ObjectName>SkinSettingsToggler</ObjectName>
                <Size>24f,24f</Size>
                <!-- This is used to work around Bug 1795663 on OSX -->
                <EmitOnPressAndRelease>false</EmitOnPressAndRelease>
                <NumberStates>2</NumberStates>
                <State>
                  <Number>0</Number>
                </State>
                <State>
                  <Number>1</Number>
                </State>
                <Connection>
                  <ConfigKey>[Master],skin_settings</ConfigKey>
                  <ButtonState>LeftButton</ButtonState>
                </Connection>
              </PushButton>
            </Children>
            <Connection>
              <ConfigKey persist="true">[Master],skin_settings</ConfigKey>
              <Transform><Not/></Transform>
              <BindProperty>visible</BindProperty>
            </Connection>
          </WidgetGroup>

        </Children>
      </WidgetGroup><!-- /Skin toggles, Rec, Broadcast, Clock, Skin menu toggle -->

    </Children>
  </WidgetGroup>
</Template>
