Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix for progressbar styling #477

Merged
merged 1 commit into from
Oct 2, 2014
Merged

Fix for progressbar styling #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/Umbraco.Web.UI.Client/src/less/tree.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,14 @@ div.not-allowed > i.icon,div.not-allowed > a{
// Loading Animation
// ------------------------

div.umb-loader-wrapper {
overflow:hidden;
position:absolute;
left:0;
right:0;
margin: 10px 0;
}

.umb-tree li div.l{
width:100%;
height:1px;
Expand Down
6 changes: 4 additions & 2 deletions src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,10 @@
</div>

<div class="umb-panel-body with-footer">
<div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader"
ng-hide="active() == 0"></div>
<div class="umb-loader-wrapper" style="position:relative; margin: 0px -20px;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to see this styles as part of the css/less files instead of inline styles. It's ok to hack inline styles in the legacy webforms stuff but we need to keep the new angular files clean.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are already multiple files of the new view files with inline style to override umb-loader class 1px hight.
And here I needed to override the absolute position here, so it push down the folder and image thumbs as it do now, when the progressbar is visible. But there could of course be added an additional class with position: relative; margin: 0px -20px; after the umb-loader-wrapper class to override these styling.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah i know, i'd like to try to avoid that as much as possible so please keep this in mind for any future PRs,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I agree that inline styling should be avoid as possible. I have also tried to define the progressbar with a simular markup and moved the styling to umb-loader-wrapper.

<div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader"
ng-hide="active() == 0"></div>
</div>

<umb-photo-folder
min-height="75"
Expand Down
6 changes: 4 additions & 2 deletions src/Umbraco.Web.UI/umbraco/developer/Packages/installedPackage.aspx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,10 @@
<cc2:PropertyPanel ID="pp_confirm" runat="server" Text="&nbsp;">
<p>
<asp:Button ID="bt_confirmUninstall" OnClick="confirmUnInstall" OnClientClick="$('#loadingbar').show()" Text="Confirm uninstall" CssClass="btn btn-primary" runat="server" />
<div style="display: none" id="loadingbar">
<cc2:ProgressBar ID="progbar" runat="server" Title="Please wait..." />
<div id="loadingbar" style="display: none">
<div class="umb-loader-wrapper">
<cc2:ProgressBar ID="progbar" runat="server" Title="Please wait..." />
</div>
</div>
</p>
</cc2:PropertyPanel>
Expand Down
36 changes: 20 additions & 16 deletions src/Umbraco.Web.UI/umbraco/developer/Packages/installer.aspx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@
<cc1:PropertyPanel runat="server" Text="&nbsp;">
<asp:Button ID="ButtonLoadPackage" runat="server" Enabled="false" Text="Load Package"
OnClick="uploadFile"></asp:Button>
<span id="loadingbar" style="display: none;">
<cc1:ProgressBar ID="progbar1" runat="server" Title="Please wait..." />
</span>
<div id="loadingbar" style="display: none;">
<div class="umb-loader-wrapper">
<cc1:ProgressBar ID="progbar1" runat="server" Title="Please wait..." />
</div>
</div>
</cc1:PropertyPanel>
</cc1:Pane>
<cc1:Pane ID="pane_authenticate" runat="server" Visible="false" Text="Repository authentication">
Expand All @@ -98,16 +100,17 @@
</cc1:Pane>

<asp:Panel ID="pane_acceptLicense" runat="server" Visible="false">
<br />
<div class="alert alert-warning">
<p>
<strong>Please note:</strong> Installing a package containing several items and
files can take some time. Do not refresh the page or navigate away before, the installer
notifies you the install is completed.
</p>
</div>


<cc1:Pane ID="pane_acceptLicenseInner" runat="server">

<div class="alert alert-warning">
<p>
<strong>Please note:</strong> Installing a package containing several items and
files can take some time. Do not refresh the page or navigate away before, the installer
notifies you the install is completed.
</p>
</div>

<cc1:PropertyPanel ID="PropertyPanel3" runat="server" Text="Name">
<asp:Label ID="LabelName" runat="server" /></cc1:PropertyPanel>
<cc1:PropertyPanel ID="PropertyPanel5" runat="server" Text="Author">
Expand Down Expand Up @@ -251,10 +254,11 @@

<cc1:PropertyPanel runat="server" Text=" ">
<br />
<div style="display: none;" id="installingMessage">
<cc1:ProgressBar runat="server" ID="_progbar1" />
<br />
<em>&nbsp; &nbsp;Installing package, please wait...</em><br />
<div id="installingMessage" style="display: none;">
<div class="umb-loader-wrapper">
<cc1:ProgressBar runat="server" ID="_progbar1" />
</div>
<em>Installing package, please wait...</em><br /><br />
</div>
<asp:Button ID="ButtonInstall" runat="server" Text="Install Package" CssClass="btn btn-primary" Enabled="False"
OnClick="startInstall"></asp:Button>
Expand Down
4 changes: 3 additions & 1 deletion src/Umbraco.Web.UI/umbraco/dialogs/republish.aspx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
</div>

<div id="progress" style="visibility: hidden;">
<cc1:ProgressBar ID="progbar" runat="server" Title="Please wait..." />
<div class="umb-loader-wrapper">
<cc1:ProgressBar ID="progbar" runat="server" Title="Please wait..." />
</div>
</div>

</asp:Panel>
Expand Down
6 changes: 4 additions & 2 deletions src/Umbraco.Web.UI/umbraco/dialogs/sort.aspx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@
<div class="umb-dialog-body">
<cc1:Pane runat="server">

<div id="loading" style="display: none;">
<div id="loading" style="display: none; margin-bottom: 10px;">
<div class="notice">
<p><%= umbraco.ui.Text("sort", "sortPleaseWait") %></p>
</div>
<br />
<cc1:ProgressBar ID="prog1" runat="server" Title="sorting.." />
<div class="umb-loader-wrapper">
<cc1:ProgressBar ID="prog1" runat="server" Title="sorting.." />
</div>
</div>

<div id="sortingDone" style="display: none;" class="success">
Expand Down