github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1093 from sharelatex/pr-editor-cobranding-ui

Browse source 
Editor cobranding UI

GitOrigin-RevId: c6d5fabc23f9105388faeb037d96545bf574f4d5
This commit is contained in:
Paulo Jorge Reis 2018-11-07 11:28:56 +00:00 committed by sharelatex
parent 7006e30d7f
commit 49388c868b
11 changed files with 1895 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
services/web/app/coffee/Features/BrandVariations/BrandVariationsHandler.coffee
View file

@ -1,3 +1,4 @@
url = require "url"
settings = require "settings-sharelatex"
logger = require "logger-sharelatex"
V1Api = require "../V1/V1Api"
@ -13,4 +14,28 @@ module.exports = BrandVariationsHandler =
if error?
logger.err { brandVariationId, error}, "error getting brand variation details"
return callback(error)
_formatBrandVariationDetails brandVariationDetails
callback(null, brandVariationDetails)
_formatBrandVariationDetails = (details) ->
if details.export_url?
details.export_url = _setV1AsHostIfRelativeURL details.export_url
if details.home_url?
details.home_url = _setV1AsHostIfRelativeURL details.home_url
if details.logo_url?
details.logo_url = _setV1AsHostIfRelativeURL details.logo_url
if details.journal_guidelines_url?
details.journal_guidelines_url = _setV1AsHostIfRelativeURL details.journal_guidelines_url
if details.journal_cover_url?
details.journal_cover_url = _setV1AsHostIfRelativeURL details.journal_cover_url
if details.submission_confirmation_page_logo_url?
details.submission_confirmation_page_logo_url = _setV1AsHostIfRelativeURL details.submission_confirmation_page_logo_url
if details.publish_menu_icon?
details.publish_menu_icon = _setV1AsHostIfRelativeURL details.publish_menu_icon
_setV1AsHostIfRelativeURL = (urlString) ->
# The first argument is the base URL to resolve against if the second argument is not absolute.
# As it only applies if the second argument is not absolute, we can use it to transform relative URLs into
# absolute ones using v1 as the host. If the URL is absolute (e.g. a filepicker one), then the base
# argument is just ignored
url.resolve settings?.apis?.v1?.url, urlString

11
services/web/app/views/project/editor/header.pug
View file

@ -9,6 +9,17 @@ header.toolbar.toolbar-header.toolbar-with-labels(
)
i.fa.fa-fw.fa-bars.editor-menu-icon
p.toolbar-label #{translate("menu")}
a.btn.btn-full-height.header-cobranding-logo-container(
ng-if="::(cobranding.isProjectCobranded && cobranding.logoImgUrl)"
ng-href="{{ ::cobranding.brandVariationHomeUrl }}"
target="_blank"
rel="noopener"
)
img.header-cobranding-logo(
ng-src="{{ ::cobranding.logoImgUrl }}"
alt="{{ ::cobranding.brandVariationName }}"
)
a.toolbar-header-back-projects(
href="/project"
)

1692
services/web/public/js/libs/underscore-1.9.1.js Normal file
View file

File diff suppressed because it is too large Load diff

12
services/web/public/src/ide.js
View file

@ -32,6 +32,7 @@ define([
'ide/metadata/MetadataManager',
'ide/review-panel/ReviewPanelManager',
'ide/SafariScrollPatcher',
'ide/cobranding/CobrandingDataService',
'ide/settings/index',
'ide/share/index',
'ide/chat/index',
@ -82,7 +83,8 @@ define([
sixpack,
event_tracking,
metadata,
$q
$q,
CobrandingDataService
) {
// Don't freak out if we're already in an apply callback
let err, pdfLayout, userAgent
@ -124,6 +126,14 @@ define([
$scope.anonymous = window.anonymous
$scope.isTokenMember = window.isTokenMember
$scope.cobranding = {
isProjectCobranded: CobrandingDataService.isProjectCobranded(),
logoImgUrl: CobrandingDataService.getLogoImgUrl(),
submitBtnHtml: CobrandingDataService.getSubmitBtnHtml(),
brandVariationName: CobrandingDataService.getBrandVariationName(),
brandVariationHomeUrl: CobrandingDataService.getBrandVariationHomeUrl()
}
$scope.chat = {}
ide.toggleReviewPanel = $scope.toggleReviewPanel = function() {

61
services/web/public/src/ide/cobranding/CobrandingDataService.js Normal file
View file

@ -0,0 +1,61 @@
/* eslint-disable
camelcase,
max-len,
no-return-assign,
no-undef,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
* decaffeinate suggestions:
* DS102: Remove unnecessary code created because of implicit returns
* DS207: Consider shorter variations of null checks
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
*/
define(['base'], function(App) {
const _cobrandingData = window.brandVariation
return App.factory('CobrandingDataService', function() {
const isProjectCobranded = () => _cobrandingData != null
const getLogoImgUrl = () =>
_cobrandingData != null ? _cobrandingData.logo_url : undefined
const getSubmitBtnHtml = () =>
_cobrandingData != null ? _cobrandingData.submit_button_html : undefined
const getBrandVariationName = () =>
_cobrandingData != null ? _cobrandingData.name : undefined
const getBrandVariationHomeUrl = () =>
_cobrandingData != null ? _cobrandingData.home_url : undefined
const getPublishGuideHtml = () =>
_cobrandingData != null ? _cobrandingData.publish_guide_html : undefined
const getPartner = () =>
_cobrandingData != null ? _cobrandingData.partner : undefined
const hasBrandedMenu = () =>
_cobrandingData != null ? _cobrandingData.branded_menu : undefined
const getBrandId = () =>
_cobrandingData != null ? _cobrandingData.brand_id : undefined
const getBrandVariationId = () =>
_cobrandingData != null ? _cobrandingData.id : undefined
return {
isProjectCobranded,
getLogoImgUrl,
getSubmitBtnHtml,
getBrandVariationName,
getBrandVariationHomeUrl,
getPublishGuideHtml,
getPartner,
hasBrandedMenu,
getBrandId,
getBrandVariationId
}
})
})

2
services/web/public/src/libraries.js
View file

@ -7,7 +7,7 @@ define([
'libs/angular-autocomplete/angular-autocomplete',
'libs/ui-bootstrap',
'libs/ng-context-menu-0.1.4',
'libs/underscore-1.3.3',
'libs/underscore-1.9.1',
'libs/algolia-2.5.2',
'libs/jquery.storage',
'libs/angular-sanitize-1.2.17',

23
services/web/public/stylesheets/app/editor/toolbar.less
View file

@ -1,7 +1,9 @@
@toolbar-height: 40px;
.toolbar {
display: flex;
align-items: center;
height: 40px;
height: @toolbar-height;
border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a {
@ -33,6 +35,7 @@
padding: 5px 10px 4px;
margin-bottom: 1px;
}
&:hover {
text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color;
@ -62,6 +65,7 @@
color: @toolbar-btn-color;
padding: 3px 10px 5px;
font-size: 20px;
max-height: 39px;
&:hover {
text-shadow: @toolbar-btn-hover-text-shadow;
background-color: @toolbar-btn-hover-bg-color;
@ -76,6 +80,12 @@
top: 4px;
right: 4px;
}
&.header-cobranding-logo-container {
height: @toolbar-height - 1;
padding: 8px 10px;
background-color: @toolbar-header-branded-btn-bg-color;
}
}
.btn-full-height-no-border {
border-right: 0;
@ -134,6 +144,12 @@
}
}
.header-cobranding-logo {
display: block;
width: auto;
max-height: 100%;
}
.toolbar-small-mixin() {
height: @toolbar-small-height;
}
@ -153,10 +169,15 @@
font-weight: 600;
margin-bottom: 2px;
vertical-align: middle;
text-align: left;
@media (min-width: @screen-sm-min) {
display: inline-block;
}
&.toolbar-label-multiline {
line-height: 1.1;
}
}
.editor-dark {

47
services/web/public/stylesheets/core/_common-variables.less
View file

@ -921,29 +921,30 @@
@footer-padding : 2em;
// Editor header
@ide-body-top-offset : 40px;
@toolbar-header-bg-color : transparent;
@toolbar-header-shadow : 0 0 2px #ccc;
@toolbar-btn-color : @link-color;
@toolbar-btn-hover-color : @link-hover-color;
@toolbar-btn-hover-bg-color : darken(white, 10%);
@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15);
@toolbar-btn-active-color : white;
@toolbar-btn-active-bg-color : @link-color;
@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-font-size : 12px;
@toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark;
@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
@toolbar-icon-btn-hover-boxshadow: inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-small-height : 32px;
@toolbar-tall-height : 58px;
@project-name-color : @gray;
@project-rename-link-color : @gray-light;
@project-rename-link-color-hover : @gray-dark;
@global-alerts-padding : (@line-height-computed / 4);
@ide-body-top-offset : 40px;
@toolbar-header-bg-color : transparent;
@toolbar-header-shadow : 0 0 2px #ccc;
@toolbar-header-branded-btn-bg-color : transparent;
@toolbar-btn-color : @link-color;
@toolbar-btn-hover-color : @link-hover-color;
@toolbar-btn-hover-bg-color : darken(white, 10%);
@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15);
@toolbar-btn-active-color : white;
@toolbar-btn-active-bg-color : @link-color;
@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-font-size : 12px;
@toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark;
@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
@toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-small-height : 32px;
@toolbar-tall-height : 58px;
@project-name-color : @gray;
@project-rename-link-color : @gray-light;
@project-rename-link-color-hover : @gray-dark;
@global-alerts-padding : (@line-height-computed / 4);
// Editor file-tree
@file-tree-bg : transparent;

22
services/web/public/stylesheets/core/ol-light-variables.less
View file

@ -37,6 +37,7 @@
@progress-bg : @ol-blue-gray-0;
@input-border : @ol-blue-gray-1;
// Editor file-tree
@file-tree-bg : #FFF;
@file-tree-line-height : 2.05;
@ -67,16 +68,17 @@
@toolbar-alt-bg-color : #FFF;
@editor-toolbar-bg : @toolbar-alt-bg-color;
@toolbar-header-bg-color : #FFF;
@toolbar-header-btn-border-color : @ol-blue-gray-1;
@toolbar-btn-color : @ol-blue-gray-3;
@toolbar-btn-hover-color : @ol-blue-gray-3;
@toolbar-btn-hover-bg-color : @ol-blue-gray-0;
@toolbar-icon-btn-color : @ol-blue-gray-3;
@toolbar-icon-btn-hover-color : @ol-blue-gray-3;
@editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat;
@project-name-color : @ol-blue-gray-3;
@pdf-bg : @ol-blue-gray-0;
@toolbar-header-bg-color : #FFF;
@toolbar-header-btn-border-color : @ol-blue-gray-1;
@toolbar-header-branded-btn-bg-color : @ol-blue-gray-3;
@toolbar-btn-color : @ol-blue-gray-3;
@toolbar-btn-hover-color : @ol-blue-gray-3;
@toolbar-btn-hover-bg-color : @ol-blue-gray-0;
@toolbar-icon-btn-color : @ol-blue-gray-3;
@toolbar-icon-btn-hover-color : @ol-blue-gray-3;
@editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat;
@project-name-color : @ol-blue-gray-3;
@pdf-bg : @ol-blue-gray-0;
// Navbar
@navbar-default-bg : #FFF;

45
services/web/public/stylesheets/core/ol-variables.less
View file

@ -224,28 +224,29 @@
@footer-padding : 2em 0;
// Editor header
@toolbar-header-bg-color : @ol-blue-gray-6;
@toolbar-header-shadow : none;
@toolbar-btn-color : #FFF;
@toolbar-btn-hover-color : #FFF;
@toolbar-btn-hover-bg-color : @ol-blue-gray-5;
@toolbar-btn-hover-text-shadow : none;
@toolbar-btn-active-color : #FFF;
@toolbar-btn-active-bg-color : @ol-green;
@toolbar-btn-active-shadow : none;
@toolbar-border-color : @ol-blue-gray-5;
@toolbar-header-btn-border-color : @toolbar-border-color;
@toolbar-alt-bg-color : @ol-blue-gray-5;
@toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none;
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-icon-btn-hover-boxshadow : none;
@toolbar-font-size : 13px;
@project-name-color : @ol-blue-gray-2;
@project-rename-link-color : @ol-blue-gray-2;
@project-rename-link-color-hover : @ol-blue-gray-1;
@global-alerts-padding : 7px;
@toolbar-header-bg-color : @ol-blue-gray-6;
@toolbar-header-shadow : none;
@toolbar-header-branded-btn-bg-color : transparent;
@toolbar-btn-color : #FFF;
@toolbar-btn-hover-color : #FFF;
@toolbar-btn-hover-bg-color : @ol-blue-gray-5;
@toolbar-btn-hover-text-shadow : none;
@toolbar-btn-active-color : #FFF;
@toolbar-btn-active-bg-color : @ol-green;
@toolbar-btn-active-shadow : none;
@toolbar-border-color : @ol-blue-gray-5;
@toolbar-header-btn-border-color : @toolbar-border-color;
@toolbar-alt-bg-color : @ol-blue-gray-5;
@toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none;
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-icon-btn-hover-boxshadow : none;
@toolbar-font-size : 13px;
@project-name-color : @ol-blue-gray-2;
@project-rename-link-color : @ol-blue-gray-2;
@project-rename-link-color-hover : @ol-blue-gray-1;
@global-alerts-padding : 7px;
// Editor file-tree
@file-tree-bg : @ol-blue-gray-4;

13
services/web/test/unit/coffee/BrandVariations/BrandVariationsHandlerTests.coffee
View file

@ -9,6 +9,10 @@ modulePath = path.join __dirname, "../../../../app/js/Features/BrandVariations/B
describe "BrandVariationsHandler", ->
beforeEach ->
@settings =
apis:
v1:
url: "http://overleaf.example.com"
@logger =
err: ->
log: ->
@ -22,6 +26,8 @@ describe "BrandVariationsHandler", ->
id: "12"
active: true
brand_name: "The journal"
logo_url: "http://my.cdn.tld/journal-logo.png"
journal_cover_url: "http://my.cdn.tld/journal-cover.jpg"
home_url: "http://www.thejournal.com/"
publish_menu_link_html: "Submit your paper to the <em>The Journal</em>"
@ -44,3 +50,10 @@ describe "BrandVariationsHandler", ->
expect(brandVariationDetails).to.deep.equal @mockedBrandVariationDetails
done()
it "should transform relative URLs in v1 absolute ones", (done) ->
@mockedBrandVariationDetails.logo_url = "/journal-logo.png"
@V1Api.request.callsArgWith 1, null, { statusCode: 200 }, @mockedBrandVariationDetails
@BrandVariationsHandler.getBrandVariationById "12", (err, brandVariationDetails) =>
expect(brandVariationDetails.logo_url.startsWith(@settings.apis.v1.url)).to.be.true
done()