fontcustom_canvas 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f3dc2a97fe4bbdb8ffcc9996a24ae717e95f991cb5c7f3058567c0abcee0edb
-  data.tar.gz: 47657a628aeca0b39df15f7a150f013564bb9bf00fbc8f3b63115ad1b4cbd73f
+  metadata.gz: 58d2d40ad483730f7eac99b623b0b6a3df6651e56ed980dcb2819c4575bcf87e
+  data.tar.gz: e1ed441bebc9ff8c997f583e9232e83fa1e3fd00df80857c96aebfeeac3419ea
 SHA512:
-  metadata.gz: 9f0b16fc1e1484370391108b8ba778b2cae9bcb0ea0db130f8454067686246feca358c6e6bf1db6bb06797859e19e67cdc7e6c3dff6440ed120b3887c8308884
-  data.tar.gz: c0603ef80edbafe68c8b75f392698f34ecc67d54cc798a3a16ca9871f62b5b52e918403888a6fe0eb0b8edcdf6cb46c02531ab48d693487282d1c6a2999dc174
+  metadata.gz: 53a266ad92c8971f69dc89efc2b7f8caf4aa34fa5aad10161ff9fb6099aac04eb2b428c3db7fac7a1ece1d03e8126b6f30ddcfa7152ea975d697ddecf50b246e
+  data.tar.gz: 3551336d05125b9fb056e8613879e73df4a4aefdfb9b9f67475c399803e6d4d13893cf59336c0172e7c5d69fae99ff4873adbc8cbac87d3312e98358c117d0ef

data/README.md

@@ -2,8 +2,6 @@
 
 Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/fontcustom_canvas`. To experiment with that code, run `bin/console` for an interactive prompt.
 
-TODO: Delete this and the text above, and describe your gem
-
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -20,10 +18,15 @@ Or install it yourself as:
 
     $ gem install fontcustom_canvas
 
-## Usage
 
-TODO: Write usage instructions here
+After That compile assets of canvas:
+
+    $ bundle exec rails canvas:compile_assets
+
+## Usage
 
+To add Font customization options in canvas-lms, and added it to Theme Editor.
+ 
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/fontcustom_canvas.gemspec

@@ -1,6 +1,7 @@
 require_relative 'lib/fontcustom_canvas/version'
 
 Gem::Specification.new do |spec|
+  spec.add_dependency 'bootstrap', ['~> 4.5.3']
   spec.name          = "fontcustom_canvas"
   spec.version       = FontcustomCanvas::VERSION
   spec.authors       = ["ahmed-abd-elhamid"]

data/lib/fontcustom_canvas.rb

@@ -11,18 +11,18 @@ module FontcustomCanvas
 
   files.each do |file|
     File.write("app/jsx/theme_editor/#{file}", (URI.parse("#{uri_content}/theme_editor/#{file}").open.read) )
-    puts "app/jsx/theme_editor/#{file} --->> done"
+    # puts "app/jsx/theme_editor/#{file} --->> done"
   end 
 
   File.write("app/stylesheets/base/_variables.scss", (URI.parse("#{uri_content}/_variables.scss").open.read) )
-  puts "app/stylesheets/base/_variables.scss --->> done"
+  # puts "app/stylesheets/base/_variables.scss --->> done"
 
   File.write("app/stylesheets/components/_ic-typography.scss", (URI.parse("#{uri_content}/_ic-typography.scss").open.read) )
-  puts "app/stylesheets/components/_ic-typography.scss --->> done"
+  # puts "app/stylesheets/components/_ic-typography.scss --->> done"
 
   File.write("app/stylesheets/brandable_variables.json", (URI.parse("#{uri_content}/brandable_variables.json").open.read) )
-  puts "app/stylesheets/brandable_variables.json --->> done"
+  # puts "app/stylesheets/brandable_variables.json --->> done"
 
   File.write("lib/brandable_css.rb", (URI.parse("#{uri_content}/brandable_css.rb").open.read) )
-  puts "lib/brandable_css.rb --->> done"
+  # puts "lib/brandable_css.rb --->> done"
 end

data/lib/fontcustom_canvas/version.rb

@@ -1,3 +1,3 @@
 module FontcustomCanvas
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

data/public/_ic-typography.scss

@@ -0,0 +1,629 @@
+/*
+ * Copyright (C) 2012 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/// This is the beginning of fixing typography usage in Canvas. We originally were pulling in a bunch of
+/// bootstrap styles, of which, we'd like to phase out in multiple iterations.
+/// Below is the combination of overwrites and bootstrap styles that were originally in Canvas.
+/// As we sift through fixing things to the way we need them, this file should get smaller and smaller. :)
+
+/// Repeat - this is a work in progress, iterative approach to handing typography in Canvas.
+/// There's a lot here we don't want, and a lot more we need to re-work, but not all in one go.
+
+
+///////==============
+/// Global Settings
+///////==============
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-family: $ic-font-family;
+}
+
+body {
+  @include fontSize($ic-font-size);
+  font-weight: $ic-font-weight;
+  font-family: $ic-font-family;
+  font-size: $ic-font-size;
+  line-height: $ic-line-height;
+  color: $ic-font-color-dark;
+  -webkit-font-smoothing: antialiased; // needed to help render the iconFont clearer
+  -moz-osx-font-smoothing: grayscale; // needed to help render the iconFont clearer
+}
+
+p {
+  margin: $ic-sp 0;
+  font-family: $ic-font-family;
+}
+
+///////==============
+/// Emphasis and Utility Settings
+///////==============
+
+small {
+  font-size: 85%; // Ex: 14px base font * 85% = about 12px
+}
+strong {
+  font-weight: $ic-font-weight-bold;
+}
+em {
+  font-style: italic;
+}
+cite {
+  font-style: normal;
+}
+.lead {
+  margin-bottom: $ic-sp;
+  @include fontSize($ic-font-size);
+  font-weight: 200;
+  line-height: $ic-line-height * 1.5;
+}
+.muted {
+  @if $use_high_contrast { color: darken($ic-hint-text, 20%); }
+  @else { color: $ic-hint-text; }
+}
+.text-warning { color: $ic-color-alert; }
+a.text-warning:hover { color: darken($ic-color-alert, 10%); }
+
+.text-error { color: $ic-color-danger; }
+a.text-error:hover { color: darken($ic-color-danger, 10%); }
+
+.text-info { color: var(--ic-brand-primary); }
+a.text-info:hover { color: var(--ic-brand-primary-darkened-10); }
+
+.text-success { color: $ic-color-success; }
+a.text-success:hover { color: darken($ic-color-success, 10%); }
+
+///////==============
+/// Heading Settings
+///////==============
+
+h1, h2, h3, h4, h5, h6 {
+  margin: $ic-sp/2 0;
+  font-family: $ic-font-family;
+  font-weight: $ic-font-weight-bold;
+  line-height: $ic-line-height;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
+  small {
+    font-weight: $ic-font-weight;
+    line-height: $ic-line-height/0.5;
+    color: $ic-font-color--subdued;
+  }
+}
+
+h1 { font-size: $ic-font-size--xxlarge; } // ~38px
+h2 { font-size: $ic-font-size--xlarge; } // ~32px
+h3 { font-size: $ic-font-size--large; } // ~24px
+h4 { font-size: $ic-font-size--medium; } // ~18px
+h5 { font-size: $ic-font-size; }
+h6 { font-size: $ic-font-size--xsmall; } // ~12px
+
+h1 small { font-size: $ic-font-size--large; } // ~24px
+h2 small { font-size: $ic-font-size--medium; } // ~18px
+h3 small { font-size: $ic-font-size; }
+h4 small { font-size: $ic-font-size; }
+
+// now tweak them all a bit to be less shouty
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  font-weight: $ic-font-weight;
+}
+h1, h2, .h1, .h2 {
+  font-size: 1.8em;
+  line-height: $ic-line-height;
+}
+h3, .h3 {
+  font-size: 1.5em;
+}
+
+.page-header {
+  padding-bottom: ($ic-sp / 2);
+  margin: 20px 0 30px;
+  border-bottom: 1px solid $ic-border-color;
+}
+
+///////==============
+/// Links
+///////==============
+
+a {
+  color: var(--ic-link-color);
+  &:focus, &:hover {
+    color: var(--ic-link-color-darkened-10);
+  }
+
+  @if $use_high_contrast {
+    text-decoration: underline;
+    &:focus, &:hover { text-decoration: none; }
+    @include ic-focus-base;
+    &:focus { @include ic-focus-variant; }
+  }
+
+  @else {
+    text-decoration: none;
+    &:focus, &:hover { text-decoration: underline; }
+  }
+
+}
+////////=============
+/// Underline All Links Feature Flag
+////////=============
+.Underline-All-Links__enabled {
+  a:not(.Button, .btn, .ui-button, .ui-tabs-anchor) {
+    text-decoration: underline;
+    &:focus, &:hover { text-decoration: none; }
+
+    &:not([data-cid*="Button"]) { // inst-UI Button component
+      @include ic-focus-base;
+      &:focus { @include ic-focus-variant($color: var(--ic-link-color)); }
+    }
+  }
+}
+
+// make links in .alert be same color as alert text but bold
+.alert a {
+  font-weight: $ic-font-weight-bold;
+  color: inherit;
+}
+
+///////==============
+/// List Settings
+///////==============
+
+// Unordered and Ordered lists
+ul, ol {
+  padding: 0;
+  margin: direction-sides(0 0 6px 25px);
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+ul.unstyled,
+ol.unstyled {
+  margin-#{direction(left)}: 0;
+  list-style: none;
+}
+
+// Description Lists
+dl {
+  margin-bottom: 20px;
+}
+dt,
+dd {
+  line-height: $ic-line-height;
+}
+dt {
+  font-weight: $ic-font-weight-bold;
+}
+dd {
+  margin-#{direction(left)}: 10px;
+}
+// Horizontal layout (like forms)
+.dl-horizontal {
+  @include clearfix(); // Ensure dl clears floats if empty dd elements present
+  dt {
+    float: direction(left);
+    width: $horizontalComponentOffset - 20;
+    clear: direction(left);
+    text-align: direction(right);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  dd {
+    margin-#{direction(left)}: $horizontalComponentOffset;
+  }
+}
+
+///////==============
+/// Prevents sub and sup affecting line-height in all browsers
+///////==============
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+
+///////==============
+/// Form Settings
+///////==============
+
+// have to make labels inline-block by default,
+// boostrap makes them all block but we have a ton of
+// existing forms that count on them being inline.
+label { display: inline-block; }
+
+// because sometimes an input-mini is just too big
+.input-micro { width: 30px; }
+
+// if you are making a bootstrap style form and need to get your labels to look right (be block),
+// add the class .bootstrap-form to the <form>. this is the only need for .bootstrap-form, you
+// dont need to add the .bootstrap-form class if you already have the .form-horizontal class.
+.form-horizontal label, .bootstrap-form label { display: block;}
+
+// make labels in paragraphs the same size as regular text (as opposed to slightly larger)
+p label {
+  font-size: inherit;
+}
+
+//remove default bottom margin on a bootstrap form
+.bootstrap-form.no-margin {
+  margin-bottom: 0;
+}
+
+//get rid of bottom margin on any element (needed mostly for text inputs)
+.no-margin-bottom {
+  margin-bottom: 0 !important;
+}
+
+//bootstrap makes all <select>s a certain width. provide a class to enable one to be auto width
+select.un-bootrstrapify {
+  width: auto;
+  border-radius: 0;
+  height: auto;
+}
+
+.form-actions {
+  text-align: direction(right);
+  padding: 10px 10px 11px;
+
+  // when .form-actions is in a modal box, make it look different per Kyle mockup
+  .ui-dialog-content & {
+    margin-bottom: 0;
+    box-shadow: inset 0 1px 0 #fff;
+  }
+
+  // when you want your non-modal .form-actions footer to not have any whitespace around it
+  &.flush {
+    margin-bottom: -1em;
+    margin-#{direction(left)}: -1em;
+    margin-#{direction(right)}: -1em;
+  }
+}
+
+// for checkboxes not wrapped in a label.checkbox, make them look decent,
+// should remove this eventually.
+input[type=checkbox] + label,
+input[type=radio] + label {
+  vertical-align: -4px;
+}
+
+// align inline form buttons to prevent staggering
+.form-inline {
+  input[type=checkbox] + label,
+  input[type=radio] + label {
+    vertical-align: middle;
+  }
+}
+
+///////==============
+/// Table Settings
+///////==============
+
+// modify the default bootstrap .table class to have the thead look like our .toolbars
+.table > thead {
+  background: #e4e9ed;
+}
+.table-vertically-center {
+  th, td {
+    vertical-align: middle;
+  }
+}
+.table .center {
+  text-align: center;
+}
+.table-striped {
+  border: 1px solid $ic-border-color;
+  > thead {
+    border: 1px solid $ic-border-color;
+  }
+  > tbody > tr {
+    td {
+      background: #fff; // so we can hide focusable stuff via z-index
+    }
+    &:first-child > td {
+      border-top: 0;
+    }
+  }
+}
+.table-hover tbody {
+  tr:hover, tr.table-hover-row {
+    td, th {
+      background: $ic-color-neutral;
+    }
+  }
+}
+
+///////==============
+/// Misc Type Settings
+///////==============
+
+// gets rid of ugly border
+iframe#tool_content {
+  border: none;
+}
+
+// "ui.dialog you are so dumb. you are really dumb, for real"
+// ui.dialog cancels input events for any positioned element w/ a lower
+// z-index, even if the element is inside the dialog (in which case the
+// z-index is not actually lower. so dumb)
+.ui-dialog {
+  .input-append, .input-prepend {
+    input, select, .uneditable-input {
+      &:focus {
+        z-index: 1001;
+      }
+    }
+  }
+}
+
+// fixes bug in Cal1 where not-allowed cursor appears over checkboxes set to readonly
+.calendar_links input[readonly] { cursor: auto; }
+
+blockquote p {
+  font-size: inherit;
+}
+
+.progress-small {
+  height: 10px;
+  margin: 5px 0;
+}
+
+.popover {
+  z-index: 10;
+}
+
+// Horizontal rules
+hr {
+  margin: 20px 0;
+  border: 0;
+  border-top: 1px solid $ic-border-color;
+  border-bottom: none;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $ic-border-color;
+}
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+// Blockquotes
+blockquote {
+  padding: direction-sides(0 0 0 15px);
+  margin: 0 0 20px;
+  border-#{direction(left)}: 5px solid $ic-border-color;
+  p {
+    margin-bottom: 0;
+    @include fontSize(16px);
+    font-weight: 300;
+    line-height: 25px;
+  }
+  small {
+    display: block;
+    line-height: $ic-line-height;
+    color: $ic-font-color--subdued;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  // Float right with text-align: right
+  &.pull-right {
+    float: direction(right);
+    padding-#{direction(right)}: 15px;
+    padding-#{direction(left)}: 0;
+    border-#{direction(right)}: 5px solid $ic-border-color;
+    border-#{direction(left)}: 0;
+    p,
+    small {
+      text-align: direction(right);
+    }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+// Addresses
+address {
+  display: block;
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: $ic-line-height;
+}
+
+///////==============
+/// Popover Settings
+///////==============
+
+.ui-widget.ui-tooltip {
+  word-wrap: break-word;
+}
+
+.ui-widget.ui-tooltip.popover {
+  padding: 1px;
+  font-size: 14px;
+  max-width: 236px;
+  width: 236px;
+  color: $gray;
+  text-align: direction(left);
+  text-decoration: none;
+  background-color: $popoverBackground;
+  opacity: 1;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: 6px;
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.ui-widget.ui-tooltip.popover-padded {
+  padding: 9px 14px;
+}
+
+$popoverArrowDistanceFromCorner: $popoverArrowOuterWidth;
+.ui-tooltip.popover {
+  &:before, &:after {
+    border-color: transparent transparent $popoverArrowOuterColor transparent;
+    position: absolute;
+    border-style:solid;
+    border-width: $popoverArrowOuterWidth;
+    width:0;
+    height:0;
+    content: "";
+    top: -$popoverArrowOuterWidth * 2;
+    #{direction(left)}: $popoverArrowDistanceFromCorner;
+  }
+  &:after {
+    border-bottom-color: $popoverTitleBackground;
+    border-width: $popoverArrowWidth;
+    top: -$popoverArrowWidth * 2;
+    #{direction(left)}: $popoverArrowDistanceFromCorner + 1;
+  }
+  &.right:before {
+    #{direction(left)}: auto;
+    #{direction(right)}: $popoverArrowDistanceFromCorner;
+  }
+  &.right:after {
+    #{direction(left)}: auto;
+    #{direction(right)}: $popoverArrowDistanceFromCorner + 1;
+  }
+  &.bottom:before {
+    border-color: $popoverArrowOuterColor transparent transparent transparent;
+    top: auto;
+    bottom: -$popoverArrowOuterWidth * 2;
+  }
+  &.bottom:after {
+    border-color: $popoverArrowColor transparent transparent transparent;
+    top: auto;
+    bottom: -$popoverArrowWidth * 2;
+  }
+  &.center:before {
+    #{direction(left)}: 50%;
+    margin-#{direction(left)}: -$popoverArrowOuterWidth;
+    #{direction(right)}: auto;
+  }
+  &.center:after {
+    #{direction(left)}: 50%;
+    margin-#{direction(left)}: -$popoverArrowWidth;
+    #{direction(right)}: auto;
+  }
+  &.middle:before {
+    top: 50%;
+    margin-top: -$popoverArrowOuterWidth;
+    bottom: auto;
+  }
+  &.middle:after {
+    top: 50%;
+    margin-top: -$popoverArrowWidth;
+    bottom: auto;
+  }
+  &.horizontal:before {
+    top: 50%;
+    margin-top: -$popoverArrowOuterWidth;
+    bottom: auto;
+    #{direction(left)}: -$popoverArrowOuterWidth * 2;
+    #{direction(right)}: auto;
+    border-color: transparent $popoverArrowOuterColor transparent transparent;
+  }
+  &.horizontal:after {
+    top: 50%;
+    margin-top: -$popoverArrowWidth;
+    bottom: auto;
+    #{direction(left)}: -$popoverArrowWidth * 2;
+    #{direction(right)}: auto;
+    border-color: transparent $popoverArrowColor transparent transparent;
+  }
+  &.right.horizontal:before {
+    #{direction(left)}: auto;
+    #{direction(right)}: -$popoverArrowOuterWidth * 2;
+    border-color: transparent transparent transparent $popoverArrowOuterColor;
+  }
+  &.right.horizontal:after {
+    #{direction(left)}: auto;
+    #{direction(right)}: -$popoverArrowWidth * 2;
+    border-color: transparent transparent transparent $popoverArrowColor;
+  }
+  &.bottom.horizontal:before {
+    top: auto;
+    bottom: $popoverArrowDistanceFromCorner;
+  }
+  &.bottom.horizontal:after {
+    top: auto;
+    bottom: $popoverArrowDistanceFromCorner + 1;
+  }
+  &.top.horizontal:before {
+    margin-top: 0;
+    top: $popoverArrowDistanceFromCorner;
+  }
+  &.top.horizontal:after {
+    margin-top: 0;
+    top: $popoverArrowDistanceFromCorner + 1;
+  }
+  &.content-top.horizontal:before {
+    margin-top: 0;
+    top: 35px;
+  }
+  &.content-top.horizontal:after {
+    margin-top: 0;
+    top: 36px;
+  }
+}
+
+.dotted-separator {
+  border-bottom: 1px dotted #aaa;
+}
+
+@keyframes highlight-shadow-fade {
+  from {
+    box-shadow: 0 0 8px rgba(82,168,236,1);
+  }
+  to {
+    box-shadow: none;
+  }
+}