[TASK] Adapt belog filter bar to twbs 92/36692/2
authorFelix Kopp <felix-source@phorax.com>
Thu, 5 Feb 2015 21:50:15 +0000 (22:50 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 5 Feb 2015 22:16:27 +0000 (23:16 +0100)
Following beusers backend App the filter bar of belog is styled
and html markup following twbs.

Resolves: #64891
Releases: master
Change-Id: Ie0b3fa294621614d8ebc7859d3511f85f3b9981e
Reviewed-on: http://review.typo3.org/36692
Reviewed-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Tested-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/belog/Resources/Private/Partials/Content/Filter.html

index 12a14a1..2a4f7da 100644 (file)
        <input type="hidden" name="id" value="{constraint.pageId}" />
 </f:if>
 
-<f:form object="{constraint}" action="index" name="constraint">
-       <table border="0" cellpadding="0" cellspacing="0">
-               <tbody>
-                       <tr>
-                               <th>
-                                       <label for="belog-users"><f:translate key="users" /></label>
-                               </th>
-                               <td>
+<f:form object="{constraint}" action="index" name="constraint" class="form-inline form-inline-spaced">
+       <div class="form-group">
+               <label for="belog-users"><f:translate key="users" /></label>
+               <f:form.select
+                       property="userOrGroup"
+                       options="{userGroups}"
+                       additionalAttributes="{onchange : 'submit()'}"
+                       class="form-control input-sm"
+                       id="belog-users"
+               />
+       </div>
+
+       <div class="form-group">
+               <label for="belog-max"><f:translate key="max" /></label>
+               <belog:form.translateLabelSelect
+                       property="number"
+                       options="{settings.selectableNumberOfLogEntries}"
+                       optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
+                       additionalAttributes="{onchange : 'submit()'}"
+                       class="form-control input-sm"
+                       id="belog-max"
+               />
+       </div>
+
+       <f:if condition="{belog:isExtensionLoaded(extensionKey:'workspaces')}">
+               <f:if condition="{showWorkspaceSelector}">
+                               <div class="form-group">
+                                       <label for="belog-workspaces"><f:translate key="workspace" /></label>
                                        <f:form.select
-                                               property="userOrGroup"
-                                               options="{userGroups}"
+                                               property="workspaceUid"
+                                               options="{workspaces}"
                                                additionalAttributes="{onchange : 'submit()'}"
-                                               id="belog-users"
+                                               class="form-control input-sm"
+                                               id="belog-workspaces"
                                        />
-                               </td>
+                               </div>
+               </f:if>
+       </f:if>
 
-                               <th>
-                                       <label for="belog-max"><f:translate key="max" /></label>
-                               </th>
-                               <td>
-                                       <belog:form.translateLabelSelect
-                                               property="number"
-                                               options="{settings.selectableNumberOfLogEntries}"
-                                               optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
-                                               additionalAttributes="{onchange : 'submit()'}"
-                                               id="belog-max"
-                                       />
-                               </td>
+       <f:if condition="{constraint.isInPageContext}">
+               <div class="form-group">
+                       <label for="belog-depth"><f:translate key="chLog_menuDepth" /></label>
+                       <f:form.select
+                               property="depth"
+                               options="{pageDepths}"
+                               additionalAttributes="{onchange : 'submit()'}"
+                               class="form-control input-sm"
+                               id="belog-depth"
+                       />
+               </div>
+       </f:if>
 
-                               <f:if condition="{belog:isExtensionLoaded(extensionKey:'workspaces')}">
-                                       <f:then>
-                                               <f:if condition="{showWorkspaceSelector}">
-                                                       <f:then>
-                                                               <th>
-                                                                       <label for="belog-workspaces"><f:translate key="workspace" /></label>
-                                                               </th>
-                                                               <td>
-                                                                       <f:form.select
-                                                                               property="workspaceUid"
-                                                                               options="{workspaces}"
-                                                                               additionalAttributes="{onchange : 'submit()'}"
-                                                                               id="belog-workspaces"
-                                                                       />
-                                                               </td>
-                                                       </f:then>
-                                                       <f:else>
-                                                               <th></th><td></td>
-                                                       </f:else>
-                                               </f:if>
-                                       </f:then>
-                                       <f:else>
-                                               <th></th><td></td>
-                                       </f:else>
-                               </f:if>
+       <div class="form-group">
+               <label for="belog-time"><f:translate key="time" /></label>
+               <belog:form.translateLabelSelect
+                       property="timeFrame"
+                       options="{settings.selectableTimeFrames}"
+                       optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
+                       additionalAttributes="{onchange : 'submit()'}"
+                       class="form-control input-sm"
+                       id="belog-time"
+               />
+       </div>
 
-                               <f:if condition="{constraint.isInPageContext}">
-                                       <f:then>
-                                               <th>
-                                                       <label for="belog-depth"><f:translate key="chLog_menuDepth" /></label>
-                                               </th>
-                                               <td>
-                                                       <f:form.select
-                                                               property="depth"
-                                                               options="{pageDepths}"
-                                                               additionalAttributes="{onchange : 'submit()'}"
-                                                               id="belog-depth"
-                                                       />
-                                               </td>
-                                       </f:then>
-                                       <f:else>
-                                               <th></th><td></td>
-                                       </f:else>
-                               </f:if>
-                       </tr>
+       <div class="form-group">
+               <label for="belog-action"><f:translate key="action" /></label>
+               <belog:form.translateLabelSelect
+                       property="action"
+                       options="{settings.selectableActions}"
+                       optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
+                       additionalAttributes="{onchange : 'submit()'}"
+                       class="form-control input-sm"
+                       id="belog-action"
+               />
+       </div>
 
-                       <tr>
-                               <th>
-                                       <label for="belog-time"><f:translate key="time" /></label>
-                               </th>
-                               <td>
-                                       <belog:form.translateLabelSelect
-                                               property="timeFrame"
-                                               options="{settings.selectableTimeFrames}"
-                                               optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
-                                               additionalAttributes="{onchange : 'submit()'}"
-                                               id="belog-time"
-                                       />
-                               </td>
+       <div class="form-group">
+               <label for="belog-group"><f:translate key="groupByPage" /></label>
+               <f:form.checkbox
+                       property="groupByPage"
+                       value="1"
+                       additionalAttributes="{onchange : 'submit()'}"
+                       id="belog-group"
+               />
+       </div>
 
-                               <th>
-                                       <label for="belog-action"><f:translate key="action" /></label>
-                               </th>
-                               <td>
-                                       <belog:form.translateLabelSelect
-                                               property="action"
-                                               options="{settings.selectableActions}"
-                                               optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
-                                               additionalAttributes="{onchange : 'submit()'}"
-                                               id="belog-action"
-                                       />
-                               </td>
+       <f:comment>
+               Date time fields for manual date selection
+       </f:comment>
 
-                               <th>
-                                       <label for="belog-group"><f:translate key="groupByPage" /></label>
-                               </th>
-                               <td>
-                                       <f:form.checkbox
-                                               property="groupByPage"
-                                               value="1"
-                                               additionalAttributes="{onchange : 'submit()'}"
-                                               id="belog-group"
-                                       />
-                               </td>
 
-                               <th></th><td></td>
-                       </tr>
-                       <f:comment>
-                               Date time fields for manual date selection
-                       </f:comment>
+       <f:if condition="{constraint.timeFrame} == 30">
+               <div class="form-group">
+                       <label for="manualDateStart"><f:translate key="LLL:EXT:lang/locallang_common.xlf:from" /></label>
+                       <div class="input-group input-group-sm">
+                               <f:form.textfield
+                                               name="manualDateStart"
+                                               value="{f:if(condition: constraint.startTimestamp, then: \"{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '@{constraint.startTimestamp}')}\")}"
+                                               id="manualDateStart"
+                                               class="form-control input-sm t3js-datetimepicker t3js-clearable"
+                                               data="{date-type: 'datetime', date-offset: 0}"
+                                               />
+                               <f:form.hidden property="startTimestamp" value="{constraint.startTimestamp}" />
+                               <span class="input-group-btn">
+                                       <label class="btn btn-default" for="manualDateStart">
+                                               <span class="fa fa-calendar"></span>
+                                       </label>
+                               </span>
+                       </div>
+
+               </div>
+
+               <div class="form-group">
+                       <label for="manualDateStop"><f:translate key="LLL:EXT:lang/locallang_common.xlf:to" /></label>
+                       <div class="input-group input-group-sm">
+                               <f:form.textfield
+                                               name="manualDateStop"
+                                               value="{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '@{constraint.endTimestamp}')}"
+                                               id="manualDateStop"
+                                               class="form-control input-sm t3js-datetimepicker t3js-clearable"
+                                               data="{date-type: 'datetime', date-offset: 0}"
+                                               />
+                               <f:form.hidden property="endTimestamp" />
+                               <span class="input-group-btn">
+                                       <label class="btn btn-default" for="manualDateStop">
+                                               <span class="fa fa-calendar"></span>
+                                       </label>
+                               </span>
+                       </div>
+               </div>
+       </f:if>
 
-                       <f:if condition="{constraint.timeFrame} == 30">
-                               <tr>
-                                       <td colspan="8">
-                                               <div class="form-group col-sm-5">
-                                                       <label for="manualDateStart"><f:translate key="LLL:EXT:lang/locallang_common.xlf:from" /></label>
-                                                       <div class="input-group">
-                                                               <f:form.textfield
-                                                                               name="manualDateStart"
-                                                                               value="{f:if(condition: constraint.startTimestamp, then: \"{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '@{constraint.startTimestamp}')}\")}"
-                                                                               id="manualDateStart"
-                                                                               class="form-control t3js-datetimepicker t3js-clearable"
-                                                                               data="{date-type: 'datetime', date-offset: 0}"
-                                                                               />
-                                                               <f:form.hidden property="startTimestamp" value="{constraint.startTimestamp}" />
-                                                               <span class="input-group-btn">
-                                                                       <label class="btn btn-default" for="manualDateStart">
-                                                                               <span class="fa fa-calendar"></span>
-                                                                       </label>
-                                                               </span>
-                                                       </div>
-                                               </div>
-                                               <div class="form-group col-sm-5">
-                                                       <label for="manualDateStop"><f:translate key="LLL:EXT:lang/locallang_common.xlf:to" /></label>
-                                                       <div class="input-group">
-                                                               <f:form.textfield
-                                                                               name="manualDateStop"
-                                                                               value="{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '@{constraint.endTimestamp}')}"
-                                                                               id="manualDateStop"
-                                                                               class="form-control t3js-datetimepicker t3js-clearable"
-                                                                               data="{date-type: 'datetime', date-offset: 0}"
-                                                                               />
-                                                               <f:form.hidden property="endTimestamp" />
-                                                               <span class="input-group-btn">
-                                                                       <label class="btn btn-default" for="manualDateStop">
-                                                                               <span class="fa fa-calendar"></span>
-                                                                       </label>
-                                                               </span>
-                                                       </div>
-                                               </div>
-                                               <div class="form-group col-sm-2">
-                                                       <label for="submit">&nbsp;</label>
-                                                       <div class="input-group">
-                                                               <f:form.submit id="submit" value="{f:translate(key: 'set')}" />
-                                                       </div>
-                                               </div>
-                                       </td>
-                               </tr>
-                       </f:if>
-               </tbody>
-       </table>
+       <div class="form-group">
+               <f:form.submit id="submit" value="{f:translate(key: 'set')}" class="btn btn-default btn-sm" />
+       </div>
 </f:form>