diff --git a/package-lock.json b/package-lock.json index 5834af075..5adfa12d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8973,11 +8973,6 @@ "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==", "dev": true }, - "font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" - }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", diff --git a/package.json b/package.json index a77f4a743..8e4d4db8a 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,6 @@ "cordova-support-google-services": "^1.2.1", "cordova.plugins.diagnostic": "^6.0.2", "es6-promise-plugin": "^4.2.2", - "font-awesome": "^4.7.0", "moment": "^2.29.0", "nl.kingsquare.cordova.background-audio": "^1.0.1", "phonegap-plugin-multidex": "^1.0.0", diff --git a/src/app/components/icon/core-icon.html b/src/app/components/icon/core-icon.html deleted file mode 100644 index 7c89b545c..000000000 --- a/src/app/components/icon/core-icon.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/src/app/components/icon/icon.scss b/src/app/components/icon/icon.scss index 5c7d48d76..99a0a14ee 100644 --- a/src/app/components/icon/icon.scss +++ b/src/app/components/icon/icon.scss @@ -1,54 +1,153 @@ -// TODO ionic 5 -:host-context([dir=rtl]) ion-icon { - &.core-icon-dir-flip, - &.fa-caret-right, - &.ion-md-send, &.ion-ios-send { - -webkit-transform: scale(-1, 1); - transform: scale(-1, 1); - } +:host { + margin: 0; } -// Slash -@font-face { - font-family: "Moodle Slash Icon"; - font-style: normal; - font-weight: 400; - src: url("/assets/fonts/slash-icon.woff") format("woff"); +:host-context(ion-item.md) ion-icon { + &[slot] { + font-size: 1.6em; + color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54); + font-size: 24px; + margin-top: 12px; + margin-bottom: 12px; + } + &[slot=start] { + margin-right: 32px; + } + &[slot=end] { + margin-left: 16px; + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=start] { + margin-right: unset; + -webkit-margin-end: 32px; + margin-inline-end: 32px; + } + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=end] { + margin-left: unset; + -webkit-margin-start: 16px; + margin-inline-start: 16px; + } + } +} + +:host-context(ion-item.ios) ion-icon { + &[slot] { + font-size: 1.6em; + } + &[slot=start] { + margin-top: 7px; + margin-bottom: 7px; + margin-left: 0; + margin-right: 20px; + } + &[slot=end] { + margin-top: 7px; + margin-bottom: 7px; + margin-left: 10px; + margin-right: 10px; + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=start] { + margin-left: unset; + margin-right: unset; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 20px; + margin-inline-end: 20px; + } + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=end] { + margin-left: unset; + margin-right: unset; + -webkit-margin-start: 10px; + margin-inline-start: 10px; + -webkit-margin-end: 10px; + margin-inline-end: 10px; + } + } +} + +:host-context(ion-item.ion-color) { + color: var(--ion-color-contrast); +} + +:host-context(ion-button.md) ion-icon, +:host-context(ion-button.ios) ion-icon { + &[slot] { + font-size: 1.4em; + pointer-events: none; + + } + &[slot=start] { + margin-left: -0.3em; + margin-right: 0.3em; + margin-top: 0; + margin-bottom: 0; + } + &[slot=end] { + margin-left: 0.3em; + margin-right: -0.2em; + margin-top: 0; + margin-bottom: 0; + } + &[slot=icon-only] { + font-size: 1.8em; + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=start] { + margin-left: unset; + margin-right: unset; + -webkit-margin-start: -0.3em; + margin-inline-start: -0.3em; + -webkit-margin-end: 0.3em; + margin-inline-end: 0.3em; + } + } + + @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { + &[slot=end] { + margin-left: unset; + margin-right: unset; + -webkit-margin-start: 0.3em; + margin-inline-start: 0.3em; + -webkit-margin-end: -0.2em; + margin-inline-end: -0.2em; + } + } +} + +// TODO ionic 5 +:host-context([dir=rtl]) ion-icon { + &.core-icon-dir-flip, + &.fa-caret-right, + &.ion-md-send, &.ion-ios-send { + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); + } } :host { - &.fa { - font-size: 24px; - contain: none; - text-align: center; - } - - // Center font awesome icons - &.fa::before { - width: 1em; - height: 1em; - text-align: center; - } - - &.icon-slash { - position: relative; - &::after { - content: "/"; - font-family: "Moodle Slash Icon"; - font-size: 0.75em; - margin-top: 0.125em; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - text-align: center; - color: var(--ion-color-danger); + &.icon-slash { + &::after { + content: " "; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--ion-color-danger); + -webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; + mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); + } } - - &.fa::after { - font-size: 1em; - margin-top: 0; - } - } } diff --git a/src/app/components/icon/icon.ts b/src/app/components/icon/icon.ts index 42d1176ca..c9a36fd21 100644 --- a/src/app/components/icon/icon.ts +++ b/src/app/components/icon/icon.ts @@ -12,31 +12,28 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input, OnChanges, OnDestroy, ElementRef, SimpleChange } from '@angular/core'; +import { Component, Input, OnChanges, ElementRef, SimpleChange } from '@angular/core'; /** - * Core Icon is a component that enables the posibility to add fontawesome icon to the html. It's recommended if both fontawesome - * or ionicons can be used in the name attribute. To use fontawesome just place the full icon name with the fa- prefix and + * Core Icon is a component that enables the posibility to add fontawesome icon to the html. It + * To use fontawesome just place the full icon name with the fa- prefix and * the component will detect it. - * Check available icons at https://fontawesome.com/v4.7.0/icons/. + * + * Check available icons at https://fontawesome.com/icons?d=gallery&m=free + * @deprecated since 3.9.3. Please useAn email should have been sent to your address at {{$a}}
\nIt contains easy instructions to complete your registration.
\nIf you continue to have difficulty, contact the site administrator.
", + "core.login.emailconfirmsentnoemail": "An email should have been sent to your address.
It contains easy instructions to complete your registration.
If you continue to have difficulty, contact the site administrator.
", + "core.login.emailconfirmsentsuccess": "Confirmation email sent successfully", + "core.login.emailnotmatch": "Emails do not match", + "core.login.erroraccesscontrolalloworigin": "The cross-origin call you're trying to perform has been rejected. Please check https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium", + "core.login.errordeletesite": "An error occurred while deleting this site. Please try again.", + "core.login.errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. Please use the URL of your school or organization's site.", + "core.login.errorqrnoscheme": "This URL isn't a valid login URL.", + "core.login.errorupdatesite": "An error occurred while updating the site's token.", + "core.login.faqcannotconnectanswer": "Please, contact your site administrator.", + "core.login.faqcannotconnectquestion": "I typed my site address correctly but I still can't connect.", + "core.login.faqcannotfindmysiteanswer": "Have you typed the name correctly? It's also possible that your site is not included in our public sites directory. If you still can't find it, please enter your site address instead.", + "core.login.faqcannotfindmysitequestion": "I can't find my site.", + "core.login.faqsetupsiteanswer": "Visit {{$link}} to check out the different options you have to create your own Moodle site.", + "core.login.faqsetupsitelinktitle": "Get started.", + "core.login.faqsetupsitequestion": "I want to set up my own Moodle site.", + "core.login.faqtestappanswer": "To test the app in a Moodle Demo Site, type \"teacher\" or \"student\" in the \"Your site\" field and click the \"Connect to your site\" button.", + "core.login.faqtestappquestion": "I just want to test the app, what can I do?", + "core.login.faqwhatisurlanswer": "Every organisation has their own unique address or URL for their Moodle site. To find the address:
If your organisation has enabled it, you will find a QR code on the web site at the bottom of your user profile page.
{{$image}}", + "core.login.findyoursite": "Find your site", + "core.login.firsttime": "Is this your first time here?", + "core.login.forcepasswordchangenotice": "You must change your password to proceed.", + "core.login.forgotten": "Forgotten your username or password?", + "core.login.help": "Help", + "core.login.helpmelogin": "There are many thousands of Moodle sites around the world. This app can only connect to Moodle sites that have specifically enabled Mobile app access.
If you can't connect to your Moodle site then you need to contact your site administrator and ask them to read http://docs.moodle.org/en/Mobile_app
To test the app in a Moodle demo site type teacher or student in the Site address field and click the Connect button.
", + "core.login.instructions": "Instructions", + "core.login.invalidaccount": "Please check your login details or ask your site administrator to check the site configuration.", + "core.login.invaliddate": "Invalid date", + "core.login.invalidemail": "Invalid email address", + "core.login.invalidmoodleversion": "Invalid Moodle site version. The Moodle app only supports Moodle systems {{$a}} onwards.
\nYou can contact your site administrators and ask them to update their Moodle system.
\n\"Site Administrators\" are the people who manages the Moodle at your school/university/company or learning organisation. If you don't know how to contact them, please contact your teachers/trainers.
", + "core.login.invalidsite": "The site URL is invalid.", + "core.login.invalidtime": "Invalid time", + "core.login.invalidurl": "Invalid URL specified", + "core.login.invalidvaluemax": "The maximum value is {{$a}}", + "core.login.invalidvaluemin": "The minimum value is {{$a}}", + "core.login.localmobileunexpectedresponse": "Moodle Mobile Additional Features check returned an unexpected response. You will be authenticated using the standard mobile service.", + "core.login.loggedoutssodescription": "You have to authenticate again. You need to log in to the site in a browser window.", + "core.login.login": "Log in", + "core.login.loginbutton": "Log in", + "core.login.logininsiterequired": "You need to log in to the site in a browser window.", + "core.login.loginsteps": "For full access to this site, you first need to create an account.", + "core.login.missingemail": "Missing email address", + "core.login.missingfirstname": "Missing given name", + "core.login.missinglastname": "Missing surname", + "core.login.mobileservicesnotenabled": "Mobile access is not enabled on your site. Please contact your site administrator if you think it should be enabled.", + "core.login.mustconfirm": "You need to confirm your account", + "core.login.newaccount": "New account", + "core.login.notloggedin": "You need to be logged in.", + "core.login.onboardingcreatemanagecourses": "Create & manage your courses", + "core.login.onboardingenrolmanagestudents": "Enrol & manage your students", + "core.login.onboardinggetstarted": "Get started with Moodle", + "core.login.onboardingialreadyhaveasite": "I already have a Moodle site", + "core.login.onboardingimalearner": "I'm a learner", + "core.login.onboardingimaneducator": "I'm an educator", + "core.login.onboardingineedasite": "I need a Moodle site", + "core.login.onboardingprovidefeedback": "Provide timely feedback", + "core.login.onboardingtoconnect": "To connect to the Moodle App you'll need a Moodle site", + "core.login.onboardingwelcome": "Welcome to the Moodle App!", + "core.login.or": "OR", + "core.login.password": "Password", + "core.login.passwordforgotten": "Forgotten password", + "core.login.passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.", + "core.login.passwordrequired": "Password required", + "core.login.policyaccept": "I understand and agree", + "core.login.policyagree": "You must agree to this policy to continue using this site. Do you agree?", + "core.login.policyagreement": "Site policy agreement", + "core.login.policyagreementclick": "Link to site policy agreement", + "core.login.potentialidps": "Log in using your account on:", + "core.login.profileinvaliddata": "Invalid value", + "core.login.recaptchachallengeimage": "reCAPTCHA challenge image", + "core.login.recaptchaexpired": "Verification expired. Answer the security question again.", + "core.login.recaptchaincorrect": "The security question answer is incorrect.", + "core.login.reconnect": "Reconnect", + "core.login.reconnectdescription": "Your authentication token is invalid or has expired. You have to reconnect to the site.", + "core.login.reconnectssodescription": "Your authentication token is invalid or has expired. You have to reconnect to the site. You need to log in to the site in a browser window.", + "core.login.resendemail": "Resend email", + "core.login.searchby": "Search by:", + "core.login.security_question": "Security question", + "core.login.selectacountry": "Select a country", + "core.login.selectsite": "Please select your site:", + "core.login.signupplugindisabled": "{{$a}} is not enabled.", + "core.login.signuprequiredfieldnotsupported": "The signup form contains a required custom field that isn't supported in the app. Please create your account using a web browser.", + "core.login.siteaddress": "Your site", + "core.login.siteaddressplaceholder": "https://campus.example.edu", + "core.login.sitehasredirect": "Your site contains at least one HTTP redirect. The app cannot follow redirects, this could be the issue that's preventing the app from connecting to your site.", + "core.login.siteinmaintenance": "Your site is in maintenance mode", + "core.login.sitepolicynotagreederror": "Site policy not agreed.", + "core.login.siteurl": "Site URL", + "core.login.siteurlrequired": "Site URL required i.e http://www.yourmoodlesite.org", + "core.login.startsignup": "Create new account", + "core.login.stillcantconnect": "Still can't connect?", + "core.login.supplyinfo": "More details", + "core.login.username": "Username", + "core.login.usernameoremail": "Enter either username or email address", + "core.login.usernamerequired": "Username required", + "core.login.usernotaddederror": "User not added - error", + "core.login.visitchangepassword": "Do you want to visit the site to change the password?", + "core.login.webservicesnotenabled": "Your host site may not have enabled Web services. Please contact your administrator for help.", + "core.login.youcanstillconnectwithcredentials": "You can still connect to the site by entering your username and password.", "core.login.yourenteredsite": "Connect to your site", "core.mainmenu.changesite": "Change site", "core.mainmenu.help": "Help", diff --git a/src/global.scss b/src/global.scss index 36c0be50d..55e394cfd 100644 --- a/src/global.scss +++ b/src/global.scss @@ -9,7 +9,7 @@ * https://ionicframework.com/docs/layout/global-stylesheets */ - + /* Core CSS required for Ionic components to work properly */ @import "~@ionic/angular/css/core.css"; @@ -25,6 +25,3 @@ @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; - -/* Font awesome */ -@import "~font-awesome/scss/font-awesome.scss";